Provides bidirectional design control and real-time sync with Figma, enabling creation and manipulation of design elements (frames, shapes, text), component instances, styling (colors, fonts, auto layout), node operations (move, resize, clone, delete, group), and exporting designs as images.
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
Setup Guide
1. Run the WebSocket Relay (Docker)
2. Configure Claude Code
Option A: CLI Flag
Option B: Edit
3. Install Figma Plugin
Open Figma Desktop
Go to Plugins → Development → Import plugin from manifest
Select:
/path/to/cc-fig-mcp/src/claude_mcp_plugin/manifest.json
4. Connect Figma Plugin
In Figma, open Plugins → CC Fig MCP Plugin
Set Port:
3055Set Channel: Your Figma project name (e.g.,
my-app-design,dashboard-ui)Click Connect
Status must show green/connected
5. Use in Claude Code
Available Tools
Tool | Description |
| Connect to a Figma project channel |
| Get current document details |
| Get selected nodes |
| Get details about specific nodes |
| Create a frame/artboard |
| Create a rectangle |
| Create text element |
| Create an ellipse |
| Create a polygon |
| Create a star shape |
| Create a line |
| Create instance of a component |
| Change fill color |
| Change stroke color |
| Set corner radius |
| Update text content |
| Change font size |
| Change font weight |
| Configure auto layout |
| Move a node |
| Resize a node |
| Duplicate a node |
| Delete a node |
| Group nodes together |
| Ungroup nodes |
| Export node as PNG/SVG |
| Get document styles |
| Get local components |
Important Requirements
Requirement | Details |
Docker running | WebSocket relay must be up on port 3055 |
Plugin window open | Keep the Figma plugin window visible |
Connection green | Plugin must show connected status |
Same channel | Use your Figma project name as the channel in both Figma plugin and Claude Code |
Reconnect if needed | If you see timeouts, reconnect the plugin and re-join channel in Claude Code |
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:
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
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