CC Fig MCP

Figma integration for Claude Code with bidirectional design control and real-time sync.

Based on claude-talk-to-figma-mcp-daisyui by morteng and claude-talk-to-figma-mcp by arinspunk.

Prerequisites

• Node.js 18+
• Docker & Docker Compose
• pnpm
• Figma Desktop

Build from Source

git clone https://github.com/agenisea/cc-fig-mcp.git
cd cc-fig-mcp
pnpm install
pnpm run build

Setup Guide

1. Run the WebSocket Relay (Docker)

cd /path/to/cc-fig-mcp

# Build and start the relay server
docker-compose up -d --build

# Verify it's running
curl http://localhost:3055/status

2. Configure Claude Code

Option A: CLI Flag

claude --mcp-config '{"figma":{"command":"node","args":["/path/to/cc-fig-mcp/dist/talk_to_figma_mcp/server.js"]}}'

Option B: Edit ~/.claude.json

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": [
        "/path/to/cc-fig-mcp/dist/talk_to_figma_mcp/server.js"
      ]
    }
  }
}

3. Install Figma Plugin

1. Open Figma Desktop
2. Go to Plugins → Development → Import plugin from manifest
3. Select: /path/to/cc-fig-mcp/src/claude_mcp_plugin/manifest.json

4. Connect Figma Plugin

1. In Figma, open Plugins → CC Fig MCP Plugin
2. Set Port: 3055
3. Set Channel: Your Figma project name (e.g., my-app-design, dashboard-ui)
4. Click Connect
5. Status must show green/connected

5. Use in Claude Code

# Join the same channel as your Figma plugin (your Figma project name)
figma - join_channel("your-figma-project-name")

# Now you can use Figma tools
figma - create_rectangle(x: 0, y: 0, width: 100, height: 100)
figma - create_text(x: 50, y: 50, text: "Hello")

Available Tools

Important Requirements

Troubleshooting

"Forwarded message to 0 clients"

Figma plugin disconnected. Reconnect in Figma.

"Request timed out"

Plugin not connected or wrong channel. Check plugin status and channel name matches.

"Must join a channel"

Run join_channel("your-figma-project-name") in Claude Code first.

Port 3055 already in use

Change the port in docker-compose.yml:

ports:
  - "3056:3055"  # Use 3056 externally

Then update the Figma plugin port to match.

Connection drops frequently

The Figma plugin may disconnect when the plugin window loses focus. Keep the plugin panel visible while working.

Architecture

Claude Code
    ↓ (stdio - MCP protocol)
MCP Server (server.js)
    ↓ (WebSocket ws://localhost:3055)
Docker Container (socket relay)
    ↓ (WebSocket)
Figma Plugin (inside Figma Desktop)

Disclaimer

Experimental Software: This project is in active development and should be considered experimental. It is not production-ready and may contain bugs or breaking changes.

No Warranty: This software is provided "as is", without warranty of any kind, express or implied. Use at your own risk.

Third-Party Notice: This project is not affiliated with, endorsed by, or sponsored by Figma, Inc. or Anthropic, PBC. All trademarks belong to their respective owners.

License

MIT