CC图MCP
Claude Code的Figma集成，具有双向设计控制和实时同步功能。
先决条件
- Node.js 18+
- Docker&Docker编写
- pnpm
- Figma桌面
从源代码构建
git clone https://github.com/agenisea/cc-fig-mcp.git
cd cc-fig-mcp
pnpm install
pnpm run build安装指南
1.运行WebSocket中继（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/status2.配置克劳德代码
选项A:CLI标志
claude --mcp-config '{"figma":{"command":"node","args":["/path/to/cc-fig-mcp/dist/talk_to_figma_mcp/server.js"]}}'选项B：编辑 ~/.claude.json
{
"mcpServers": {
"figma": {
"command": "node",
"args": [
"/path/to/cc-fig-mcp/dist/talk_to_figma_mcp/server.js"
]
}
}
}3.安装Figma插件
- 打开Figma桌面
- 首选 插件→ 发展→ 从清单导入插件
- 选择：
/path/to/cc-fig-mcp/src/claude_mcp_plugin/manifest.json
4.连接Figma插件
- 在Figma中，打开 插件→ CC Fig MCP插件
- 集 端口:
3055 - 集 频道：您的Figma项目名称（例如。，
my-app-design,dashboard-ui) - 点击 连接
- 状态必须显示为绿色/已连接
5.在克劳德代码中使用
# 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")______________________________________________________________________
可用工具
| 工具 | 说明 |
|---|---|
join_channel | 连接到Figma项目频道 |
get_document_info | 获取当前文档详细信息 |
get_selection | 获取所选节点 |
get_node_info | 获取特定节点的详细信息 |
create_frame | 创建框架/画板 |
create_rectangle | 创建矩形 |
create_text | 创建文本元素 |
create_ellipse | 创建椭圆 |
create_polygon | 创建多边形 |
create_star | 创建星形 |
create_line | 创建一条线 |
create_component_instance | 创建组件实例 |
set_fill_color | 更改填充颜色 |
set_stroke_color | 更改笔划颜色 |
set_corner_radius | 设置拐角半径 |
set_text_content | 更新文本内容 |
set_font_size | 更改字体大小 |
set_font_weight | 更改字体粗细 |
set_auto_layout | 配置自动布局 |
move_node | 移动节点 |
resize_node | 调整节点大小 |
clone_node | 复制节点 |
delete_node | 删除节点 |
group_nodes | 将节点分组在一起 |
ungroup_nodes | 取消节点分组 |
export_node_as_image | 将节点导出为PNG/SVG |
get_styles | 获取文档样式 |
get_local_components | 获取本地组件 |
______________________________________________________________________
重要要求
| 要求 | 详细信息 |
|---|---|
| Docker正在运行 | 端口3055上必须启动WebSocket中继 |
| 插件窗口打开 | 保持Figma插件窗口可见 |
| 连接绿色 | 插件必须显示连接状态 |
| 同一频道 | 在Figma插件和Claude Code中使用您的Figma项目名称作为频道 |
| 必要时重新连接 | 如果您看到超时，请重新连接插件并在Claude Code中重新加入通道 |
______________________________________________________________________
故障排除
“已将邮件转发给0个客户端”
Figma插件已断开连接。在Figma中重新连接。
“请求超时”
插件未连接或通道错误。检查插件状态和频道名称是否匹配。
“必须加入频道”
跑 join_channel("your-figma-project-name") 首先是克劳德密码。
端口3055已在使用中
更改端口 docker-compose.yml:
ports:
- "3056:3055" # Use 3056 externally然后更新Figma插件端口以匹配。
连接频繁中断
当插件窗口失去焦点时，Figma插件可能会断开连接。工作时保持插件面板可见。
______________________________________________________________________
建筑
Claude Code
↓ (stdio - MCP protocol)
MCP Server (server.js)
↓ (WebSocket ws://localhost:3055)
Docker Container (socket relay)
↓ (WebSocket)
Figma Plugin (inside Figma Desktop)______________________________________________________________________
免责声明
实验软件：该项目正在积极开发中，应被视为实验性项目。它还没有准备好投入生产，可能包含错误或破坏性更改。
无担保：本软件按“原样”提供，不提供任何明示或暗示的保证。使用风险自负。
第三方通知：本项目不隶属于Figma，股份有限公司或Anthropic，PBC，也不由其背书或赞助。所有商标均归其各自所有者所有。
许可证
麻省理工学院