{"id":34979184,"url":"https://github.com/agenisea/cc-fig-mcp","last_synced_at":"2026-04-16T03:31:41.896Z","repository":{"id":329871205,"uuid":"1120838638","full_name":"agenisea/cc-fig-mcp","owner":"agenisea","description":"Claude Code to Figma MCP server with 2-way communication.","archived":false,"fork":false,"pushed_at":"2025-12-22T03:19:13.000Z","size":201,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-23T14:50:51.658Z","etag":null,"topics":["claude-code","claude-figma-mcp","figma-mcp","mcp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agenisea.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-22T03:02:29.000Z","updated_at":"2025-12-22T04:10:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/agenisea/cc-fig-mcp","commit_stats":null,"previous_names":["agenisea/cc-fig-mcp"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/agenisea/cc-fig-mcp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agenisea%2Fcc-fig-mcp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agenisea%2Fcc-fig-mcp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agenisea%2Fcc-fig-mcp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agenisea%2Fcc-fig-mcp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agenisea","download_url":"https://codeload.github.com/agenisea/cc-fig-mcp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agenisea%2Fcc-fig-mcp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31870506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["claude-code","claude-figma-mcp","figma-mcp","mcp"],"created_at":"2025-12-27T00:51:41.300Z","updated_at":"2026-04-16T03:31:41.884Z","avatar_url":"https://github.com/agenisea.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CC Fig MCP\n\nFigma integration for Claude Code with bidirectional design control and real-time sync.\n\n\u003e 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.\n\n## Prerequisites\n\n- Node.js 18+\n- Docker \u0026 Docker Compose\n- pnpm\n- Figma Desktop\n\n## Build from Source\n\n```bash\ngit clone https://github.com/agenisea/cc-fig-mcp.git\ncd cc-fig-mcp\npnpm install\npnpm run build\n```\n\n## Setup Guide\n\n### 1. Run the WebSocket Relay (Docker)\n\n```bash\ncd /path/to/cc-fig-mcp\n\n# Build and start the relay server\ndocker-compose up -d --build\n\n# Verify it's running\ncurl http://localhost:3055/status\n```\n\n### 2. Configure Claude Code\n\n**Option A: CLI Flag**\n\n```bash\nclaude --mcp-config '{\"figma\":{\"command\":\"node\",\"args\":[\"/path/to/cc-fig-mcp/dist/talk_to_figma_mcp/server.js\"]}}'\n```\n\n**Option B: Edit `~/.claude.json`**\n\n```json\n{\n  \"mcpServers\": {\n    \"figma\": {\n      \"command\": \"node\",\n      \"args\": [\n        \"/path/to/cc-fig-mcp/dist/talk_to_figma_mcp/server.js\"\n      ]\n    }\n  }\n}\n```\n\n### 3. Install Figma Plugin\n\n1. Open Figma Desktop\n2. Go to **Plugins → Development → Import plugin from manifest**\n3. Select: `/path/to/cc-fig-mcp/src/claude_mcp_plugin/manifest.json`\n\n### 4. Connect Figma Plugin\n\n1. In Figma, open **Plugins → CC Fig MCP Plugin**\n2. Set **Port**: `3055`\n3. Set **Channel**: Your Figma project name (e.g., `my-app-design`, `dashboard-ui`)\n4. Click **Connect**\n5. Status must show green/connected\n\n### 5. Use in Claude Code\n\n```bash\n# Join the same channel as your Figma plugin (your Figma project name)\nfigma - join_channel(\"your-figma-project-name\")\n\n# Now you can use Figma tools\nfigma - create_rectangle(x: 0, y: 0, width: 100, height: 100)\nfigma - create_text(x: 50, y: 50, text: \"Hello\")\n```\n\n---\n\n## Available Tools\n\n| Tool | Description |\n|------|-------------|\n| `join_channel` | Connect to a Figma project channel |\n| `get_document_info` | Get current document details |\n| `get_selection` | Get selected nodes |\n| `get_node_info` | Get details about specific nodes |\n| `create_frame` | Create a frame/artboard |\n| `create_rectangle` | Create a rectangle |\n| `create_text` | Create text element |\n| `create_ellipse` | Create an ellipse |\n| `create_polygon` | Create a polygon |\n| `create_star` | Create a star shape |\n| `create_line` | Create a line |\n| `create_component_instance` | Create instance of a component |\n| `set_fill_color` | Change fill color |\n| `set_stroke_color` | Change stroke color |\n| `set_corner_radius` | Set corner radius |\n| `set_text_content` | Update text content |\n| `set_font_size` | Change font size |\n| `set_font_weight` | Change font weight |\n| `set_auto_layout` | Configure auto layout |\n| `move_node` | Move a node |\n| `resize_node` | Resize a node |\n| `clone_node` | Duplicate a node |\n| `delete_node` | Delete a node |\n| `group_nodes` | Group nodes together |\n| `ungroup_nodes` | Ungroup nodes |\n| `export_node_as_image` | Export node as PNG/SVG |\n| `get_styles` | Get document styles |\n| `get_local_components` | Get local components |\n\n---\n\n## Important Requirements\n\n| Requirement | Details |\n|-------------|---------|\n| Docker running | WebSocket relay must be up on port 3055 |\n| Plugin window open | Keep the Figma plugin window visible |\n| Connection green | Plugin must show connected status |\n| Same channel | Use your Figma project name as the channel in both Figma plugin and Claude Code |\n| Reconnect if needed | If you see timeouts, reconnect the plugin and re-join channel in Claude Code |\n\n---\n\n## Troubleshooting\n\n### \"Forwarded message to 0 clients\"\nFigma plugin disconnected. Reconnect in Figma.\n\n### \"Request timed out\"\nPlugin not connected or wrong channel. Check plugin status and channel name matches.\n\n### \"Must join a channel\"\nRun `join_channel(\"your-figma-project-name\")` in Claude Code first.\n\n### Port 3055 already in use\nChange the port in `docker-compose.yml`:\n```yaml\nports:\n  - \"3056:3055\"  # Use 3056 externally\n```\nThen update the Figma plugin port to match.\n\n### Connection drops frequently\nThe Figma plugin may disconnect when the plugin window loses focus. Keep the plugin panel visible while working.\n\n---\n\n## Architecture\n\n```\nClaude Code\n    ↓ (stdio - MCP protocol)\nMCP Server (server.js)\n    ↓ (WebSocket ws://localhost:3055)\nDocker Container (socket relay)\n    ↓ (WebSocket)\nFigma Plugin (inside Figma Desktop)\n```\n\n---\n\n## Disclaimer\n\n**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.\n\n**No Warranty**: This software is provided \"as is\", without warranty of any kind, express or implied. Use at your own risk.\n\n**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.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagenisea%2Fcc-fig-mcp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagenisea%2Fcc-fig-mcp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagenisea%2Fcc-fig-mcp/lists"}