https://github.com/agenisea/cc-fig-mcp
Claude Code to Figma MCP server with 2-way communication.
https://github.com/agenisea/cc-fig-mcp
claude-code claude-figma-mcp figma-mcp mcp
Last synced: 2 months ago
JSON representation
Claude Code to Figma MCP server with 2-way communication.
- Host: GitHub
- URL: https://github.com/agenisea/cc-fig-mcp
- Owner: agenisea
- Created: 2025-12-22T03:02:29.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-12-22T03:19:13.000Z (6 months ago)
- Last Synced: 2025-12-23T14:50:51.658Z (6 months ago)
- Topics: claude-code, claude-figma-mcp, figma-mcp, mcp
- Language: JavaScript
- Homepage:
- Size: 196 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CC Fig MCP
Figma integration for Claude Code with bidirectional design control and real-time sync.
> Based on [claude-talk-to-figma-mcp-daisyui](https://github.com/morteng/claude-talk-to-figma-mcp-daisyui) by morteng and [claude-talk-to-figma-mcp](https://github.com/arinspunk/claude-talk-to-figma-mcp) by arinspunk.
## Prerequisites
- Node.js 18+
- Docker & Docker Compose
- pnpm
- Figma Desktop
## Build from Source
```bash
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)
```bash
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**
```bash
claude --mcp-config '{"figma":{"command":"node","args":["/path/to/cc-fig-mcp/dist/talk_to_figma_mcp/server.js"]}}'
```
**Option B: Edit `~/.claude.json`**
```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
```bash
# 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
| Tool | Description |
|------|-------------|
| `join_channel` | Connect to a Figma project channel |
| `get_document_info` | Get current document details |
| `get_selection` | Get selected nodes |
| `get_node_info` | Get details about specific nodes |
| `create_frame` | Create a frame/artboard |
| `create_rectangle` | Create a rectangle |
| `create_text` | Create text element |
| `create_ellipse` | Create an ellipse |
| `create_polygon` | Create a polygon |
| `create_star` | Create a star shape |
| `create_line` | Create a line |
| `create_component_instance` | Create instance of a component |
| `set_fill_color` | Change fill color |
| `set_stroke_color` | Change stroke color |
| `set_corner_radius` | Set corner radius |
| `set_text_content` | Update text content |
| `set_font_size` | Change font size |
| `set_font_weight` | Change font weight |
| `set_auto_layout` | Configure auto layout |
| `move_node` | Move a node |
| `resize_node` | Resize a node |
| `clone_node` | Duplicate a node |
| `delete_node` | Delete a node |
| `group_nodes` | Group nodes together |
| `ungroup_nodes` | Ungroup nodes |
| `export_node_as_image` | Export node as PNG/SVG |
| `get_styles` | Get document styles |
| `get_local_components` | 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`:
```yaml
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