Control Figma Designs with Natural Language

Lets Claude Desktop control Figma through MCP and WebSocket communication, extending the cursor-talk-to-figma-mcp project to work with Claude via stdio. Once connected, Claude can read document and selection info, create and style Figma elements (rectangles, frames, text, components), and manage component instances directly inside a running Figma desktop session.

Use this when Claude needs to inspect or manipulate a live Figma file - reading document info, creating shapes, frames, or text, applying fill colors and corner radius, or creating and updating component instances - as part of a design or prototyping workflow. It requires the Figma desktop app running with a companion plugin installed via manifest, plus a local WebSocket server and MCP server, so it is not a cloud-based or headless Figma integration. If something breaks, the project's own troubleshooting guidance is to check the log files first, confirm Figma is actually running with the plugin installed, run the health_check/connection_status tools from Claude, and restart the whole integration if those don't resolve it.

• Document information tools: get_document_info, get_selection, and similar.
• Creation tools: create_rectangle, create_frame, create_text, and similar.
• Styling tools: set_fill_color, set_corner_radius, and similar.
• Component tools: create_component, update_instance_properties, and similar.
• Enhanced tools: enhanced_create_component_instance, enhanced_set_fill_color, create_multiple_instances (batch creation).
• join_channel establishes the connection before any Figma tool call; health_check and connection_status help diagnose issues.

Requires Node.js 14+, npm, and the Figma desktop app. Clone the repo, run npm install, and (on Linux/macOS) chmod +x run-figma-claude.sh. Start everything with ./bin/claude-figma-connect.sh (Linux/macOS) or bin\claude-figma-connect.bat (Windows), which launches the WebSocket server, MCP server, and Claude bridge together. In Figma, go to Actions, import from manifest, and select the plugin's manifest.json. Add the MCP config:

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "node",
      "args": [
        "~/talk_to_figma_claude/src/mcp-server/mcp-server.js"
      ],
      "env": {}
    }
  }
}

A monitoring dashboard is available at http://localhost:3650 while the server is running, and logs are written to the logs directory.

Designers and developers who want Claude to directly read and manipulate a live Figma file - creating and styling elements or managing components - instead of describing changes for a human to make manually, and who are comfortable running a local WebSocket bridge alongside Figma. The project includes a walkthrough video and screenshots demonstrating the setup end to end, and is distributed under the MIT License.