Talk to Figma - Claude Desktop App Integration

This project enables Claude Desktop App to control Figma through the MCP (Model Context Protocol) and WebSocket communication. It extends the original cursor-talk-to-figma-mcp to work with Claude Desktop App via stdio.

YT Video: https://www.youtube.com/watch?v=-LA_Ew7GhC4

https://github.com/user-attachments/assets/68dcc372-3605-477f-ab43-8fe076eed99c

Screenshots

Prerequisites

Node.js 14+ and npm
Figma desktop application

Installation

Clone this repository:

git clone https://github.com/gaganmanku96/talk-with-figma-claude.git
cd talk-with-figma-claude

Install dependencies:
```
npm install
```
Make the startup scripts executable (Linux/macOS):
```
chmod +x run-figma-claude.sh
```

Usage

Quick Start

On Linux/macOS:

./bin/claude-figma-connect.sh

On Windows:

bin\claude-figma-connect.bat

This will start all necessary components:

WebSocket server (background)
MCP server (background)
Claude bridge (foreground)

Using with Claude Desktop App

Start the integration using one of the scripts above
Open Claude Desktop App
In Claude, use the following tool commands:
- First use join_channel to establish a connection
- Then use various Figma tools like create_rectangle, get_document_info, etc.

Adding plugin in Figma

Go to Actions in Figma

Click on import from manifest

Select the manifest file

talk-with-figma-claude > src > figma_plugin > manifest.json

Connecting with Claude

You'll have to add following in Claude MCP Config

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

talk_to_figma_claude\src\mcp-server\mcp-server.js

Available Tools

Basic Figma tools:

Document information tools (get_document_info, get_selection, etc.)
Creation tools (create_rectangle, create_frame, create_text, etc.)
Styling tools (set_fill_color, set_corner_radius, etc.)
Component tools (create_component, update_instance_properties, etc.)

Enhanced tools:

enhanced_create_component_instance: Better component instance creation
enhanced_set_fill_color: Improved color handling
create_multiple_instances: Batch creation of instances

Logs

Logs are stored in the logs directory with timestamped files for each component.

Monitoring

A server monitoring dashboard is available at http://localhost:3650 when the server is running.

Troubleshooting

If you encounter issues:

Check the log files in the logs directory
Make sure Figma is running with the plugin installed
Try running the health_check or connection_status tools from Claude
Restart the integration if needed

License

MIT License - See LICENSE file for details.

Talk To Figma via Claude