Talk To Figma

You can connect Claude Desktop App to Figma through an MCP (Model Context Protocol) server running locally. This enables Claude to issue Figma actions like creating shapes or querying document information via a standardized, scriptable interface, while the WebSocket and MCP layers handle communication and synchronization.

How to use

Start the integration so Claude can talk to Figma. Use the provided startup script appropriate for your platform to launch all necessary components in the right order.

How to install

Prerequisites you need before installation are:
- Node.js 14+ and npm
- Figma desktop application (the local plugin and integration rely on the desktop app)

Install steps you will run in your terminal or command prompt are:

1. Clone the project repository
2. Install dependencies
3. Make startup scripts executable on Unix-like systems

How to use (continued)

Quick start on Linux/macOS: run the startup script to launch the WebSocket server, MCP server, and Claude bridge in the foreground. The exact script you run is compiled for your platform.

Quick start on Windows: run the Windows startup script to launch the same components. Once they are running, open Claude Desktop App and establish a connection using the channel join mechanism, then issue Figma actions such as create_rectangle or get_document_info.

Using Claude with the integration: after starting the service, open Claude Desktop App. Use the join_channel command to establish a connection. Then you can issue various Figma tools such as create_rectangle, get_document_info, and more from Claude, depending on what you want to accomplish in your Figma document.

Configuration and startup details

The MCP configuration for Claude is provided as a JSON object. You tell Claude how to start the MCP server that bridges Claude to Figma. The example below shows how to register a stdio-based MCP server that runs a JavaScript file with Node.

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

Adding plugin in Figma

To enable integration with Figma, install the plugin from the manifest. In Figma, go to Actions, choose import from manifest, then select the manifest.json located under talk-with-figma-claude/src/figma_plugin/manifest.json.

Connecting with Claude

In Claude, configure the MCP to connect to the local server. The setup will expose a single stdio MCP server named talk_to_figma_claude which runs the mcp-server.js file via Node. The example JSON above is what you would place in Claude’s MCP configuration to activate the bridge.

Available tools (Figma actions)

Basic Figma tools cover common document interactions and creation actions. You can query document information, access selections, create shapes and frames, adjust styling, and manage components. Enhanced tools provide improved component creation and batch operations for efficiency.

Logs

All runtime logs are saved under a logs directory with timestamped files for each component. Review these logs if you encounter issues or need to diagnose behavior.

Monitoring

A server monitoring dashboard is available at http://localhost:3650 while the MCP server is running. Use it to observe connection status, health, and performance metrics.

Troubleshooting

If you run into problems, take these steps:

• Check the logs in the logs directory for error messages.
• Ensure Figma is running and the plugin is installed.
• Execute health_check or connection_status tools from Claude to verify the MCP bridge.
• If necessary, restart the integration to reinitialize all components.

License

MIT License - See the LICENSE file for details.

Available tools

get_document_info

Query document information such as document name, document size, and current state.

get_selection

Retrieve the currently selected objects within the Figma document.

create_rectangle

Create a new rectangle shape on the canvas with specified position, size, and styling.

create_frame

Create a new frame (container) on the canvas to organize elements.

create_text

Insert a text node with specified content and styling.

set_fill_color

Apply fill color to an existing shape or element.

set_corner_radius

Set the corner radius for rounded shapes.

create_component

Create a component from a selected element for reuse.

update_instance_properties

Modify properties of a component instance.

enhanced_create_component_instance

Create a component instance with enhanced handling for complex setups.

enhanced_set_fill_color

Apply color with improved color handling and formats.

create_multiple_instances

Batch create multiple component instances in a single operation.