AI导哈

自然语言Figma设计工具

通过自然语言创建和编辑Figma设计，连接Claude Code与Figma插件实现智能设计修改和自动化操作。

  • by witxhhaven
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 witxhhaven/figma-mcp

使用说明

克劳德·菲格马大桥

通过自然语言创建和编辑Figma设计。此MCP服务器允许Claude Code读取和修改您的Figma文件。一个轻量级的Figma插件连接到本地Node.js服务器，Claude Code处理智能。

它与Figma Design合作。在有限的测试中，它也适用于FigJam和Figma Slides。

你需要什么

  • Node.js v18+
  • Figma 桌面应用程序
  • 克劳德代码 （CLI）

设置

1.安装、构建和链接

导航到要保存仓库的文件夹，然后运行：

git clone https://github.com/witxhhaven/figma-mcp.git
cd figma-mcp
npm install
npm run build
npm run build:plugin
npm link

npm link 创建全球 figma-mcp 命令，以便其他存储库可以在不知道此存储库路径的情况下使用服务器。你只需要做一次（一次又一次） npm run build 如果你拉取更改）。

注： 你做 不 需要手动启动MCP服务器。Claude Code在连接时会自动启动它。只需确保Figma插件正在运行。

2.在Figma中加载插件

  1. 打开Figma桌面应用程序并打开任何文件
  2. 首选 插件→ 发展→ 从清单导入插件。..
  3. 选择 figma-mcp/plugin/manifest.json
  1. 运行它： 插件→ 发展→ 克劳德·菲格马大桥
  2. 出现一个小状态窗口，其中显示 红点 （尚未连接）

您只需要导入一次。之后，只要打开Figma，就可以从“开发”菜单重新运行插件。

3.连接到克劳德代码

复制 .mcp.json 从 mcp-config/ 将文件夹添加到要在其中工作的项目的根目录中。

通过终端：

cp /path/to/figma-mcp/mcp-config/.mcp.json /path/to/your-project/

手动： .mcp.json 是一个隐藏文件--run open . 里面 mcp-config/ 此存储库的文件夹，以在Finder中显示它（或按 Cmd + Shift + . 切换隐藏文件），然后将其复制到项目根目录。

复制后，从该项目目录打开Claude Code——它将检测MCP服务器并提示您确认：

选择选项1为此项目启用服务器。

全球添加

如果您希望Figma工具在每个Claude Code会话中都可用，而无需复制 .mcp.json 在每个项目中：

claude mcp add cc-figma-bridge -s user -- figma-mcp

4.验证其是否有效

如果一切都连接起来，你会看到 绿点 在Figma插件中：

在Claude Code中，运行 /mcp 确认 cc-figma-bridge 显示为已连接：

5.开始使用它

问克劳德关于你的Figma文件的任何事情：

  • “我当前的Figma页面上有什么？”
  • “从我的代码库中提取颜色标记并创建匹配的Figma变量”
  • 为此按钮组件创建悬停、聚焦和禁用状态
  • “将Figma中定义的蓝色变量应用于此组件”
  • “将Tailwind配置中的间距和排版标记同步到Figma变量中”
  • 为所选输入组件生成所有大小变量（sm、md、lg）
  • 创建一个包含标题、描述和按钮的卡片组件
  • 以及更多

工具

工具 它做什么
get_scene 全场景转储——选定节点、其属性、变量、文本样式、页面信息
get_selection 所选节点的快速摘要（ID、名称、类型）
execute_code 在沙箱中运行Figma插件API代码（创建节点、修改属性等）
export_image 将节点导出为PNG（按节点ID或当前选择）
connection_status 检查Figma插件是否已连接

卸载

npm unlink -g figma-mcp

如果全局添加MCP服务器，请将其删除：

claude mcp remove cc-figma-bridge -s user

如果你抄袭了 .mcp.json 在任何项目目录中，也删除这些文件。

故障排除

插件显示红点（未连接）

  • 确保Figma插件正在运行，Claude Code已打开
  • 检查端口3002是否未使用： lsof -i :3002
  • 插件每3秒自动重新连接一次——启动服务器后稍等

Claude没有显示Figma工具

  • 确保您所在的目录包含 .mcp.json，或者您已将其添加到全局

“字体未加载”错误

  • execute_code 自动重试，字体加载最多3次
  • 如果仍然失败，请显式加载字体：
    await figma.loadFontAsync({ family: "Inter", style: "Regular" });
textNode.characters = "Hello";

端口3002已在使用中

  • 查找使用端口的内容： lsof -i :3002
  • 杀死它： kill $(lsof -t -i :3002)
  • 或者问问克劳德·科德： “杀死端口3002上运行的任何程序”

重启Figma后插件消失

  • 重新运行它 插件→ 发展→ 克劳德·菲格马大桥 （导入仍然存在，您只需在每个会话中启动它）

相关 MCP