AI导哈

Figma双向设计控制工具

一个集成Figma和Claude Code的工具，支持双向设计控制和实时同步。

  • by agenisea
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 agenisea/cc-fig-mcp

使用说明

CC图MCP

Claude Code的Figma集成，具有双向设计控制和实时同步功能。

基于 克劳德与费玛·麦克普·戴秀伊对话 由morteng和 克劳德与figma mcp对话 通过arinsupk。

先决条件

  • 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/status

2.配置克劳德代码

选项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插件

  1. 打开Figma桌面
  2. 首选 插件→ 发展→ 从清单导入插件
  3. 选择： /path/to/cc-fig-mcp/src/claude_mcp_plugin/manifest.json

4.连接Figma插件

  1. 在Figma中，打开 插件→ CC Fig MCP插件
  2. 集 端口: 3055
  3. 集 频道：您的Figma项目名称（例如。， my-app-design, dashboard-ui)
  4. 点击 连接
  5. 状态必须显示为绿色/已连接

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，也不由其背书或赞助。所有商标均归其各自所有者所有。

许可证

麻省理工学院

相关 MCP