Talk To Figma Claude Desktop App Integration

What is Talk To Figma Claude Desktop App Integration about?

A bridge that connects Claude Desktop App with the Figma desktop application using MCP and WebSocket communication. The integration runs a background WebSocket server and MCP server, exposing Figma operations as Claude tools.

How to use Talk To Figma Claude Desktop App Integration?

1. Clone & install

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

2. Make startup scripts executable (Linux/macOS)

   chmod +x run-figma-claude.sh
   

3. Start the integration
   • Linux/macOS: ./bin/claude-figma-connect.sh
   • Windows: bin\claude-figma-connect.bat This launches the WebSocket server, MCP server, and the Claude bridge.
4. Configure Claude Add the following entry to Claude’s MCP config:

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

5. Interact via Claude
   • Use join_channel to establish a connection.
   • Call tools such as create_rectangle, get_document_info, enhanced_create_component_instance, etc.

Key features of Talk To Figma Claude Desktop App Integration

• Real‑time control of Figma through Claude commands.
• Comprehensive toolset covering document info, shape creation, styling, component creation, and batch operations.
• Enhanced tools for more robust component instance creation and color handling.
• Logging with timestamped files for each component.
• Monitoring dashboard available at http://localhost:3650 while the server runs.
• Cross‑platform scripts for Linux/macOS and Windows.

Use cases of Talk To Figma Claude Desktop App Integration

• Automating repetitive design tasks (e.g., generating multiple frames or components).
• Quickly prototyping UI elements by describing them to Claude.
• Extracting design system data (colors, fonts, component hierarchy) for documentation.
• Syncing design updates from AI‑generated suggestions directly into Figma.
• Educational demos showing how AI can interact with design tools.

FAQ from the Talk To Figma Claude Desktop App Integration

Q: Do I need the Figma web version? A: No, the desktop version of Figma is required.

Q: Which Node.js version is supported? A: Node.js 14 or newer.

Q: Where are the logs stored? A: In the logs directory, with separate timestamped files for each component.

Q: How can I check if the connection is healthy? A: Use the health_check or connection_status tools from Claude.

Q: What if the integration stops responding? A: Review the log files, ensure the Figma plugin is installed, and restart the scripts.

Q: Can I run the server on a remote machine? A: Yes, as long as the WebSocket endpoint is reachable from the Claude Desktop App and the Figma desktop client is running on the same machine or network.

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

1. Clone this repository:

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

2. Install dependencies:

   npm install
   

3. 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

1. Start the integration using one of the scripts above
2. Open Claude Desktop App
3. 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

1. Go to Actions in Figma

3. Click on import from manifest

4. 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:

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

License

MIT License - See LICENSE file for details.