Talk To Figma via Claude

What is Talk to Figma - Claude Desktop App Integration?

This project facilitates seamless integration between the Claude Desktop App and Figma, allowing users to control Figma and create/modify designs using natural language commands within Claude. It leverages the Model Context Protocol (MCP) and WebSocket communication to establish this connection, building upon the existing cursor-talk-to-figma-mcp project.

How to use Talk to Figma - Claude Desktop App Integration?

To use this integration, you need Node.js 14+ and the Figma desktop application.

Installation: Clone the repository, install dependencies (npm install), and make startup scripts executable (chmod +x run-figma-claude.sh).
Quick Start: Run ./bin/claude-figma-connect.sh (Linux/macOS) or bin\claude-figma-connect.bat (Windows) to start the WebSocket server, MCP server, and Claude bridge.
Figma Plugin: Add the provided plugin to Figma by importing the manifest.json file from talk-with-figma-claude > src > figma_plugin.
Claude Integration: Configure Claude Desktop App by adding the MCP server details to its MCP Config, pointing to talk_to_figma_claude\src\mcp-server\mcp-server.js.
Interaction: Within Claude, use join_channel to establish a connection, then utilize various Figma tools like create_rectangle, get_document_info, etc., through natural language commands.

Key Features of Talk to Figma - Claude Desktop App Integration

Natural Language Control: Control Figma directly from Claude Desktop App using text commands.
MCP and WebSocket Communication: Utilizes robust protocols for real-time interaction.
Extensive Figma Toolset: Access to basic Figma tools (document info, creation, styling, components) and enhanced tools for improved functionality (e.g., enhanced_create_component_instance, enhanced_set_fill_color).
Component Management: Create and update component instances programmatically.
Logging: Detailed logs are stored in the logs directory for troubleshooting.
Monitoring Dashboard: A server monitoring dashboard is available at http://localhost:3650.

Use Cases of Talk to Figma - Claude Desktop App Integration

Accelerated Design Workflow: Quickly create and modify Figma designs using natural language, reducing manual clicks.
Automated Design Tasks: Automate repetitive design tasks through Claude commands.
Collaborative Design: Facilitate real-time collaboration by allowing multiple users to interact with Figma through Claude.
Prototyping: Rapidly prototype designs by generating elements and layouts with text commands.
Accessibility: Potentially improve accessibility for users who prefer text-based interaction for design.

FAQ from Talk to Figma - Claude Desktop App Integration

Q: What are the prerequisites for running this project? A: You need Node.js 14+ and the Figma desktop application.

Q: How do I troubleshoot issues? A: Check log files in the logs directory, ensure Figma is running with the plugin installed, try health_check or connection_status tools from Claude, or restart the integration.

Q: Can I monitor the server status? A: Yes, a server monitoring dashboard is available at http://localhost:3650 when the server is running.

Q: What kind of Figma tools are supported? A: The integration supports basic Figma tools for document information, creation, styling, and components, as well as enhanced tools for more advanced functionalities.

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