AI 指南 Cursor 集成本地 Figma MCP（Free 计划可用）

IT相关

AI 指南 Cursor 集成本地 Figma MCP（无需额外订阅，个人 Free 计划可用）

本文比较详细，按顺序照抄即可跑通。

最终会在 Cursor 里直接“读设计稿 / 改设计稿 / 导出截图”，而且不需要 Figma 额外订阅，个人 Free 计划也能用。

核心卖点：不走官方 MCP 插件，也就没有官方 MCP 插件的速率限制
使用三方MCP项目 cursor-talk-to-figma-mcp。
一句话原理：Cursor ↔（MCP Server）↔ WebSocket ↔（Figma 插件）↔ Figma 桌面端

你需要准备什么

必装清单

Figma 桌面端客户端：必须是 Desktop App（浏览器版一般无法跑本地插件开发流程）。
Bun：用于启动 MCP Server 和 WebSocket。

0. 安装 Bun（只做一次）

macOS / Linux：

curl -fsSL https://bun.sh/install | bash

安装完成后，重新打开一个终端，验证：

bun -v

如果提示 command not found: bun：重开终端，或把 bun 的安装路径加入你的 PATH。

1. 克隆项目到本地

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp

2. 安装依赖 + 初始化

在仓库根目录运行：

bun setup

这一步会写入 Cursor 的 MCP 配置

如果你不想让脚本改配置，或者没生效，请看后面的“手动配置 MCP”。

3. 启动 WebSocket（必须一直开着）

在仓库根目录运行（建议单独开一个终端窗口，别关）：

bun socket

成功标志

终端输出显示 WebSocket server 已启动的信息
不要关闭这个进程；关了就断链

4. MCP 导入并启动（让 Cursor 具备“控制 Figma”的工具）

4.1 手动配置 MCP

找到你的 Cursor MCP 配置文件位置（不同系统/版本位置不一样；你也可以直接在 Cursor 设置里搜 “MCP” 找到配置入口），配置类似这样：

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "/Users/你的用户名/.bun/bin/bun",
      "args": [
        "/绝对路径/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
      ]
    }
  }
}

bun 路径怎么填（macOS）

which bun

把输出结果填到上面 command 里即可。

成功标志

Cursor 里能看到 TalkToFigma 相关工具（例如 get_selection、read_my_design 等）

5. 下载 Figma 客户端（必须是桌面端）

安装并登录 Figma Desktop App。

说明：本方案需要导入“开发插件”，一般要求桌面端能力更完整。

https://www.figma.com/downloads/

安装完成后打开Figma，并新建个人计划

6. 准备 Free 计划的完全权限页面

目标：把要被 Cursor 操作的 UI 稿复制到个人 Free 计划下“完全权限”的页面里，避免因为权限/限制导致读不到或改不了。

6.1 新建一个专用项目

在 Figma 左上角选择你的 **个人空间 **
新建一个设计项目（例如：MCP-自动化），Free计划最多一个
打开该项目

6.2 创建“完全权限页面”

在该项目里创建页面（Page），最多3个

6.3 把 UI 复制到页面里

打开你原来的设计稿（可能在团队/协作空间）
网页选中要操作的 Frame / Component
复制（Cmd+C）
切到 MCP-自动化 对应页面
粘贴（Cmd+V）

7. 导入 Figma 插件（只做一次导入）

打开 Figma Desktop
打开你刚才的 MCP-自动化（任意页面保持打开）
进入 插件（Widgets） → 开发（Development） → 导入插件（Import Widget from manifest）
选择这个文件：
- cursor-talk-to-figma-mcp/src/cursor_mcp_plugin/manifest.json

8. 启动插件并获取通道名（每次用时都要做）

在 Figma 打开 MCP-自动化测试稿
运行刚导入的开发插件
插件启动后会自动生成一个通道名/频道标识（以插件界面展示为准）
复制这个通道名（后面要粘到 Cursor 里）

9. 连接通道

回到 Cursor，先执行：

join_channel <从 Figma 插件界面复制的通道名>

注意：这个通道名是插件启动时生成的，如果你重启插件/重开 Figma，通道名会变化，以插件界面显示为准

成功标志

先在 Figma 里手动选中一个节点（比如某个 Frame 或 Text），再在 Cursor 执行：

get_selection

Cursor 能拿到你在 Figma 里当前选中的节点信息并输出

至此，已经全部配置好可以使用了

10. 后续在 Cursor 里真正“用起来”的

按这个顺序跑：

切到 bun socket 启动 socket 服务器
在 Figma 打开 MCP-自动化，启用插件并手动选中一个节点
Cursor join_channel <从 Figma 插件界面复制的通道名>
执行 get_selection 、get_document_info等操作

常用示例：

join_channel xxxxxxx
并调用 export_node_as_image 和 get_selection、get_nodes_info、read_my_design 查看UI图
然后说要执行的操作

常见问题

1）Cursor 里找不到 `TalkToFigma` / 没有工具列表

检查 MCP 配置：是否使用了 bun 的绝对路径、server.ts 的绝对路径
重启 Cursor：很多配置变更需要重启生效

2）Figma 插件能打开，但 Cursor 调用报“连接不上 / 超时”

WebSocket 是否在运行：bun socket 的终端窗口不要关
通道是否正确：Cursor join_channel xxx 的 xxx 必须是 Figma 插件启动后生成并展示的通道名

3）macOS 里找不到 bun 路径

常见路径：/Users/你的用户名/.bun/bin/bun
用命令找：

which bun

附录：项目结构

src/talk_to_figma_mcp/：用于 Figma 集成的 TypeScript MCP 服务器
src/cursor_mcp_plugin/：用于与 Cursor 通信的 Figma 插件
src/socket.ts：用于促进 MCP 服务器和 Figma 插件之间通信的 WebSocket 服务器

附录：Windows + WSL 说明

通过 PowerShell 安装 bun

powershell -c "irm bun.sh/install.ps1|iex"

若 WSL 下插件连不上 WebSocket，可在 src/socket.ts 将 hostname 改为 0.0.0.0（按原项目注释操作）：

// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",

启动 WebSocket

bun socket

附录：MCP 工具

文件与选择

get_document_info：获取有关当前 Figma 文档的信息
get_selection：获取有关当前选择的信息
read_my_design：获取当前选定节点的详细信息（无需参数）
get_node_info：获取特定节点的详细信息
get_nodes_info：通过提供节点 ID 数组，获取多个节点的详细信息
set_focus：选择特定节点并滚动视口至该节点
set_selections：选择多个节点并滚动视口以显示它们

注释

get_annotations：获取当前文档或指定节点中的所有注释
set_annotation：创建或更新支持 Markdown 的注释
set_multiple_annotations：批量创建/更新多个注解
scan_nodes_by_types：扫描具有特定类型的节点（可用于查找注释目标）

原型设计与连接

get_reactions：获取节点的所有原型反应
set_default_connector：将复制的 FigJam 连接器设为默认连接器样式（创建连接前设置）
create_connections：在节点之间创建 FigJam 连接线

创建元素

create_rectangle：创建矩形
create_frame：创建 Frame
create_text：创建 Text

修改文本内容

scan_text_nodes：扫描大型设计中的文本节点（分块）
set_text_content：设置单个文本节点内容
set_multiple_text_contents：批量更新多个文本节点

自动布局和间距

set_layout_mode：设置布局模式与换行（无/水平/垂直）
set_padding：设置内边距（上/右/下/左）
set_axis_align：设置主轴与反轴对齐方式
set_layout_sizing：设置水平/垂直尺寸模式（固定/环绕/填充）
set_item_spacing：设置子元素间距

造型

set_fill_color：设置填充色（RGBA）
set_stroke_color：设置描边颜色和粗细
set_corner_radius：设置圆角半径（可分别控制四角）

布局与组织

move_node：移动节点
resize_node：调整节点尺寸
delete_node：删除节点
delete_multiple_nodes：批量删除
clone_node：克隆节点

组件和样式

get_styles：获取本地样式
get_local_components：获取本地组件
create_component_instance：创建组件实例
get_instance_overrides：从组件实例中提取覆盖属性
set_instance_overrides：将覆盖应用到目标实例

导出

export_node_as_image：导出节点为图像（PNG/JPG/SVG/PDF；目前多为 base64 文本）

连接管理

join_channel：加入特定频道与 Figma 进行沟通

MCP 提示（Prompt）

design_strategy：Figma 设计最佳实践
read_design_strategy：阅读设计的最佳实践
text_replacement_strategy：替换文本的系统方法
annotation_conversion_strategy：将手动注释转换为 Figma 原生注释
swap_overrides_instances：组件实例间覆盖值传递策略
reaction_to_connector_strategy：将 get_reactions 输出转换为连接线并指导使用 create_connections

附录：设计自动化示例，给设计用的

批量文本内容替换：文本替换功能。演示视频
实例覆盖传播：将组件实例覆盖从源实例传播到多个目标实例。演示视频

参考

原项目：cursor-talk-to-figma-mcp

如果觉得文章对你有用，请随意赞赏

AI 指南 Cursor 集成本地 Figma MCP（Free 计划可用）

https://blog.xlxs.top/archives/cursor集成figmamcp

作者

围巾🧣

发布于

2026-01-02

更新于

2026-01-23

许可协议

CC BY 4.0

AI 指南 Cursor 集成本地 Figma MCP（Free 计划可用）

AI 指南 Cursor 集成本地 Figma MCP（无需额外订阅，个人 Free 计划可用）

你需要准备什么

必装清单

0. 安装 Bun（只做一次）

1. 克隆项目到本地

2. 安装依赖 + 初始化

3. 启动 WebSocket（必须一直开着）

成功标志

4. MCP 导入并启动（让 Cursor 具备“控制 Figma”的工具）

4.1 手动配置 MCP

bun 路径怎么填（macOS）

成功标志

5. 下载 Figma 客户端（必须是桌面端）

6. 准备 Free 计划的完全权限页面

6.1 新建一个专用项目

6.2 创建“完全权限页面”

6.3 把 UI 复制到页面里

7. 导入 Figma 插件（只做一次导入）

8. 启动插件并获取通道名（每次用时都要做）

9. 连接通道

成功标志

10. 后续在 Cursor 里真正“用起来”的

常见问题

1）Cursor 里找不到 TalkToFigma / 没有工具列表

2）Figma 插件能打开，但 Cursor 调用报“连接不上 / 超时”

3）macOS 里找不到 bun 路径

附录：项目结构

附录：Windows + WSL 说明

附录：MCP 工具

文件与选择

注释

原型设计与连接

创建元素

修改文本内容

自动布局和间距

造型

布局与组织

组件和样式

导出

连接管理

MCP 提示（Prompt）

附录：设计自动化示例，给设计用的

参考

作者

发布于

更新于

许可协议

1）Cursor 里找不到 `TalkToFigma` / 没有工具列表