3 步打通 Cursor 连接 Figma 的 MCP 集成，让 AI 直接操作你的画布
项目地址: https://gitcode.com/GitHub_Trending/cu/cursor-talk-to-figma-mcp 想让 Cursor 不只是读你的设计稿，还能直接在 Figma 画布上动手改？关键就是给两边接一条 MCP 集成链路。cursor-talk-to-figma-mcp 这个项目，用一条本地 WebSocket 桥把 Cursor、MCP 服务器和 Figma 插件三方串起来。这篇带你 10 分钟跑通最小可用链路：起桥接服务、在 mcp.json 里挂上服务器、发一条改画布的指令，亲眼看到 AI 在你画布上动东西。
整体链路长什么样
先建立心智模型，后面配置就不容易乱：Cursor 里的 AI 发起指令（比如"新建一个红色矩形"），指令交给本地的 TalkToFigma MCP 服务器，服务器再经 WebSocket 桥接服务转发给 Figma 里的插件，插件拿到指令后操作画布，结果原路返回。三个角色分别对应仓库里三块源码：
- MCP 服务器：src/talk_to_figma_mcp/server.ts
- WebSocket 桥接服务：src/socket.ts
- Figma 插件：src/cursor_mcp_plugin/
一句话概括数据流向：Cursor 发起指令 → MCP 服务器 → WebSocket 桥（本地 3055 端口）→ Figma 插件落地到画布。
一次性备齐运行环境
真正必需的只有 4 项，对照着装就行：
| 组件 | 建议版本 | 用途 |
|---|---|---|
| Git | 2.x 及以上 | 拉取 cursor-talk-to-figma-mcp 仓库 |
| Bun | 1.0 及以上 | 安装依赖、跑 MCP 服务器和桥接服务 |
| Figma 桌面客户端 | 最新稳定版 | 承载 Cursor Figma 插件与画布 |
| Cursor | 支持 MCP 的最新版 | AI 编辑器，负责发起指令 |
缺哪项先补哪项；Bun 没装过的话优先装它，后面两步命令都依赖它。
三步把桥搭起来 ⚡
拉取 cursor-talk-to-figma-mcp 仓库并装好依赖
在你想放代码的目录下执行：
git clone https://gitcode.com/GitHub_Trending/cu/cursor-talk-to-figma-mcp
cd cursor-talk-to-figma-mcp
bun setup
bun setup 一条命令干了两件事：安装项目依赖，并把 MCP 服务器配置直接写进项目的 .cursor/mcp.json（顺手也会给 Claude Code 写一份 .mcp.json）。Cursor 挂载这一步它已经替你完成了一大半。
启动本地 WebSocket 桥接服务
另开一个终端，在仓库根目录：
npm run socket
它会在后台持续监听本地 3055 端口，就是 Cursor 与 Figma 之间那条通信通道。这个窗口先别关。如果你是用 Windows WSL 跑，记得把 src/socket.ts 里 hostname: "0.0.0.0" 那一行解开注释再启动，否则 Figma 插件连不进来。
在 mcp.json 里挂上 TalkToFigma，Figma 端链接插件
如果你希望所有 Cursor 项目都能用，把这段配置写进用户主目录的 ~/.cursor/mcp.json（只改 ~ 路径部分，其余照抄）：
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp@latest"]
}
}
}
Figma 端是 Figma 插件配置的最后一步：
- 打开 Figma，进 Plugins → Development → Link existing plugin
- 选中仓库里的 src/cursor_mcp_plugin/manifest.json
- 运行这个 Cursor MCP Plugin，在插件界面点 join channel，连上刚起的桥接服务
到这里，三方已经各自就位。
跑通第一次双向调用 ✅
最小验证动作分两个方向：
- Cursor → Figma：在 Cursor 里直接发一条"在画布上创建一个 200×100 的红色矩形，命名为 hello"。成功标志：画布上立刻多出一个矩形，选中它能看到名字就是 hello。
- Figma → Cursor：在画布里选一个 frame，让 Cursor"读取当前选中节点的信息"。能返回这个 frame 的层级和属性，说明反向通道也通了。
两条都能走通，这条 Figma AI 设计助手链路就算真正立住了。
排障速查表 🔧
| 现象 | 最可能原因 | 一句话动作 |
|---|---|---|
| MCP 命令完全无响应 | MCP 服务器没被 Cursor 加载 | 核对 ~/.cursor/mcp.json 格式无误后重启 Cursor |
| Cursor 里能看到工具但执行失败 | WebSocket 桥接服务没在跑 | 回终端重跑 npm run socket，保持窗口存活 |
| 插件连不上、提示连接失败 | 3055 端口被占用或 WSL 没放行 | 换掉占用 3055 的进程，或按上文解注 0.0.0.0 |
| Figma 插件加载失败 | manifest.json 选错了文件 | 重新指向仓库里的 src/cursor_mcp_plugin/manifest.json 并重启 Figma |
| 刚才能用，现在画布没反应了 | 频道掉线 | 在插件里重新 join channel 即可 |
到这里，Cursor 与 Figma 的 MCP 集成就通了：此后你在 Cursor 里说的每一句改动，都会实时落到 Figma 画布上，读设计、改样式、批量换文本不用再两头手动切。想查它到底支持哪些工具，看 README.md 的 MCP Tools 一节；以后想给插件加功能，就从 src/cursor_mcp_plugin/ 的源码下手。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
