Home

深色模式

Claude Talk to Figma MCP ​

概述 ​

claude-talk-to-figma-mcp 是一个把 AI 工具接到 Figma Desktop 的 MCP 项目。Claude Desktop、Claude Code、Cursor、Windsurf、VS Code + GitHub Copilot、Cline、Roo Code 这类支持 MCP 的客户端，可以通过它读取 Figma 文件结构、分析当前选区，也可以创建和修改节点。

它和 Figma 官方 MCP 的一个明显差异是：项目文档说明它不依赖 Figma Dev Mode，免费 Figma 账号也能用。代价是链路里多了一个本地 WebSocket 服务和一个 Figma 开发插件，第一次安装需要把这几段都接上。

适用场景 ​

它主要适合两类工作。

设计侧可以用它做批量调整和检查，例如扫描低对比度文字、批量替换品牌色、检查页面视觉层级、统一圆角和间距。

开发侧可以把 Figma 当前选区作为上下文，让 AI 解释页面结构、导出资源、生成 React、Vue、SwiftUI 或其他组件代码。它读到的不只是截图，还包括节点树、文本、填充、描边、布局和组件信息。

准备工作 ​

开始前先确认本机环境：

  • 已安装 Node.js
  • 已安装 Figma Desktop
  • 已登录 Figma，并能打开目标设计文件
  • 已安装一个支持 MCP 的 AI 工具，例如 Claude Code、Claude Desktop 或 Cursor
  • 终端可以执行 npx

Figma 网页版不能运行本地开发插件，这里需要用 Figma Desktop。

工作原理 ​

这套工具分成四个角色：AI 客户端、MCP Server、本地 WebSocket Server、Figma 插件。

AI 客户端不会直接操作 Figma。它先调用 MCP 工具，MCP Server 再把命令发给本地 WebSocket Server。Figma 插件连接到这个 WebSocket Server 后，负责在 Figma 文件里真正调用插件 API，并把结果原路返回。

一次典型操作大致是这样：

这里的 channel 很重要。它相当于 Figma 插件和 AI 客户端之间的房间号。没有加入正确的 channel，AI 工具能看到 MCP 工具列表，也发不进当前 Figma 文件。

安装服务 ​

官方 README 提供了一个一体化安装命令。进入想保存项目的目录后执行：

sh
npx claude-talk-to-figma-mcp

这个命令会完成项目拉取、依赖安装和 WebSocket Server 启动。启动后可以打开下面地址确认状态：

text
http://localhost:3055/status

日常再次使用时，不需要重复完整安装。进入项目目录后启动 socket 即可：

sh
cd claude-talk-to-figma-mcp
bun run socket

如果没有使用 Bun，也可以按项目文档使用 npm 脚本：

sh
npm run socket

安装插件 ​

WebSocket Server 只是通道，Figma 还需要一个插件来接收命令。

在 Figma Desktop 中操作：

text
Menu → Plugins → Development → Import plugin from manifest...

选择项目里的插件清单文件：

text
src/claude_mcp_plugin/manifest.json

导入后，在目标 Figma 文件中运行这个开发插件。插件窗口里会显示一个加粗的 channel ID，后面连接 AI 客户端时要用它。

配置客户端 ​

不同 AI 工具的配置入口不一样，但本质都是把同一个 MCP Server 加进去。

Claude Code ​

Claude Code 可以直接用命令添加 MCP：

sh
claude mcp add ClaudeTalkToFigma -- npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server

添加后检查列表：

sh
claude mcp list

在 Claude Code 会话里，也可以用下面命令查看 MCP 状态：

text
/mcp

Claude Desktop ​

Claude Desktop 最省事的方式是安装 .dxt 包。到 GitHub Releases 下载 claude-talk-to-figma-mcp.dxt，双击后 Claude Desktop 会自动配置。

手动配置时，把下面内容加入 claude_desktop_config.json：

json
{
  "mcpServers": {
    "ClaudeTalkToFigma": {
      "command": "npx",
      "args": [
        "-p",
        "claude-talk-to-figma-mcp@latest",
        "claude-talk-to-figma-mcp-server"
      ]
    }
  }
}

保存后重启 Claude Desktop。

Cursor ​

在 Cursor 中进入：

text
Cursor Settings → Tools & MCP → New MCP Server

把下面配置写入 mcp.json：

json
{
  "mcpServers": {
    "ClaudeTalkToFigma": {
      "command": "npx",
      "args": [
        "-p",
        "claude-talk-to-figma-mcp@latest",
        "claude-talk-to-figma-mcp-server"
      ]
    }
  }
}

保存后重启 Cursor，并确认 MCP Server 状态正常。

连接 Figma ​

使用前按这个顺序启动，排错会简单很多：

  1. 启动本地 WebSocket Server
  2. 打开 Figma Desktop 和目标文件
  3. 运行 Claude MCP Figma 插件
  4. 复制插件窗口里的 channel ID
  5. 打开 AI 客户端，确认 MCP Server 已连接
  6. 在聊天里发送连接指令

连接指令示例：

text
Connect to Figma, channel abc123

连接成功后，再让 AI 读取当前选区、分析页面或修改节点。

常用任务 ​

先从只读任务开始，确认链路稳定后再做修改。比如：

text
Analyze the current Figma selection and describe its layout, typography, spacing, and colors.

生成代码时，把目标框架、目录和样式约束说清楚：

text
Generate a React component from the selected Figma frame. Use CSS modules, keep the component structure simple, and list any assets that need to be exported.

做批量修改时，先让 AI 列出将要修改的节点，再确认执行：

text
Find all primary buttons in the current page that use #FF6B6B. List their node names first. Do not modify anything yet.

确认后再发修改指令：

text
Change those primary buttons from #FF6B6B to #E63946 and keep the existing text, size, and corner radius.

做可访问性检查时，可以直接指定标准：

text
Find all text layers in the current selection with contrast ratio below 4.5:1 and suggest WCAG AA compliant colors.

使用节奏 ​

比较稳的节奏是“先读，后改，再验证”。

先让 AI 读取文档信息或当前选区，不要一开始就让它创建整页。它拿到节点结构后，再让它说明页面布局、组件层级和关键样式。

修改设计时，一次只处理一个 Frame、一个组件或一类样式。Figma 文件越复杂，越应该缩小选区和指令范围。把“当前选区”“目标节点名”“父节点 ID”“不要改哪些内容”写清楚，结果会稳定很多。

项目文档还提到它支持多 Agent 并行。并行时服务端会用命令队列顺序处理请求，避免 Figma API 被同时打爆。但多个 Agent 同时改同一个文件仍然有冲突风险，结构性创建命令要显式提供 parentId，不要依赖隐式页面状态。

常见问题 ​

看不到工具 ​

先检查 AI 客户端的 MCP 配置是否加载成功。Claude Code 可以看 claude mcp list 和 /mcp，Cursor 可以看 Tools & MCP 里的 MCP 状态。

配置改完后要重启客户端。很多 MCP 客户端不会在运行中自动重载完整配置。

连不上 Figma ​

按顺序检查三件事：

  • http://localhost:3055/status 是否能打开
  • Figma Desktop 里是否已经运行插件
  • 连接指令里的 channel ID 是否和插件窗口一致

端口 3055 被占用时，WebSocket Server 会启动失败。先关掉旧进程，再重新启动服务。

能读不能改 ​

先确认当前 Figma 文件是否可编辑，账号是否有修改权限。然后让 AI 明确说明将调用哪些修改工具、目标节点是什么。不要在只读分析上下文里直接要求它改完整页面。

修改范围过大 ​

把任务拆小。先选中一个 Frame，让 AI 读取选区；再要求它修改该选区内的具体元素。批量改全文件前，先让它列出命中的节点清单。

参考 ​