TalkToFigma

社区

让 AI 通过 MCP 读取并编程修改 Figma 设计。

分类: 团队协作第 39 / 55
Stars: ★ 7.1k 非常热门
传输方式: stdio（本地进程）
运行环境: Bun
凭据: 无需凭据
许可证: MIT
最近提交: 3 个月前
工具数: 40

47FMRS · D

MIT 许可的社区 MCP 项目，通过 MCP 服务器、Figma 插件和 WebSocket 连接 AI agent 与 Figma。README 明确列出丰富的读取、创建、修改、批处理、批注、组件、连接和导出工具；使用前应准备 Bun、Figma 插件和本地 WebSocket 服务，并谨慎执行删除和批量修改。

最强项 · 安装易用性 11/20 最弱项 · 安全与权限 7/20

可靠性

8/20

安全与权限

7/20

维护活跃度

10/20

文档质量

11/20

安装易用性

11/20

查看各项评分依据

可靠性 8/20: README 描述了 MCP、WebSocket 和 Figma 插件的基本启动链路，并列出工具与提示词，说明正常路径大致可行。但未提供可核验的 manifest、源码执行证据、CI、测试、初始化握手验证或错误处理实现；工具行为与声明只能部分确认，因此扣分。
安全与权限 7/20: README 显示服务器通过 WebSocket 与 Figma 插件通信，并提供删除节点、批量删除和大量设计修改能力；同时建议在 WSL 中监听 0.0.0.0。未说明认证、授权、访问控制、数据边界、网络暴露风险或危险操作确认机制，因此仅给中低分。未发现提示中明确的凭据窃取、恶意软件或真实密钥。
维护活跃度 10/20: 项目未归档，许可证为 MIT，并有明确的 GitHub 仓库入口；但提供的材料没有提交频率、发行版、依赖更新、安全响应渠道、维护者承诺或问题处理证据。星数和未关闭 issue 不能加分，因此维持中等分数。
文档质量 11/20: README 覆盖项目结构、安装、Cursor 配置、WebSocket、插件连接、工具名称和若干操作建议，内容较完整。但缺少 manifest、工具参数与返回值、认证说明、权限模型、限制、兼容版本、成本、详细故障排查和可复现测试证据，部分关键行为仍依赖隐含前提。
安装易用性 11/20: 提供 Bun 安装、setup、WebSocket 启动、Cursor 配置、插件安装和 WSL 指引，主流程可理解。但需要多个进程、手动启动插件与频道连接，Windows/WSL 还需修改源码；未提供依赖版本、验证步骤、失败恢复或跨平台证据，因此属于可用但较脆弱的安装路径。

静态评测 · 未实际运行收录于 2026-07-29

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络

适合谁

使用 Cursor、Claude Code 或 Codex，并希望以自然语言驱动 Figma 操作的设计和开发团队
需要批量处理文本、布局、批注或组件实例的 Figma 工作流
能够运行 Bun、WebSocket 服务器并安装 Figma 插件的用户

不适合谁

只需要静态读取文件而不运行 Figma 插件的场景
不希望 AI 修改 Figma 文档的只读审阅场景
需要已明确支持的远程托管、身份认证或其他传输方式的场景

所需权限

需要在 Figma 中运行配套开发插件
需要 MCP 服务器与 Figma 插件之间的本地 WebSocket 通信
执行修改工具时需要对当前 Figma 文档进行相应的读写操作；具体权限范围取决于所调用的工具

风险与副作用

delete_node 和 delete_multiple_nodes 会删除节点，修改前应确认目标并验证结果
批量文本、布局、样式和组件覆盖操作可能影响多个设计元素
WebSocket 频道连接错误可能导致无法与 Figma 通信
节点图像导出目前支持有限，且返回 base64 文本

安装接入

准备工作

运行环境：Bun

安装 Bun；运行 bun setup 完成设置并将 MCP 安装到 Cursor 当前项目；运行 bun socket 启动 WebSocket 服务器；从 Figma Community 安装插件，或在 Figma 中通过 Plugins > Development > New Plugin > Link existing plugin，选择 src/cursor_mcp_plugin/manifest.json；打开插件并使用 join_channel 加入频道。

.cursor/mcp.json

{"mcpServers":{"TalkToFigma":{"command":"bunx","args":["cursor-talk-to-figma-mcp@latest"]}}}

以 Cursor 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

{
  "servers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": [
        "cursor-talk-to-figma-mcp@latest"
      ]
    }
  }
}

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add TalkToFigma -- bunx cursor-talk-to-figma-mcp@latest

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

先运行 bun socket 启动 WebSocket 服务器并打开 Figma 插件，在客户端调用 join_channel 加入同一频道，再调用 get_document_info；若能返回当前 Figma 文档信息，说明连接成功。

常见排障

确认已安装 Bun，并先运行 bun setup
确认 WebSocket 服务器已通过 bun socket 启动
确认 Figma 插件已安装、打开并加入了正确频道
确认 Cursor MCP 配置中的命令为 bunx，且服务器路径或包配置正确
Windows + WSL 场景下，按 README 检查 src/socket.ts 中的 0.0.0.0 主机名设置
大型设计扫描文本时使用 scan_text_nodes 的分块参数并关注 WebSocket 更新

试试这样问

连接成功后，可以直接对 AI 助手这样说：

读取我在 Figma 中选中的设计并列出其中的所有文本节点
批量把这个页面所有文本节点的文案替换为新内容
把选中组件实例的覆盖属性传播到其他几个目标实例上
在画布上创建一个 400x300 的 frame 并设置蓝色填充

工具能力 40

get_document_info 只读

获取当前 Figma 文档信息

get_selection 只读

获取当前选区信息

read_my_design 只读

在无参数情况下读取当前选区的详细节点信息

get_node_info 只读

获取指定节点的详细信息

get_nodes_info 只读

批量获取多个节点的详细信息

set_focus 只读

选中指定节点并滚动视口至该节点

set_selections 只读

选中多个节点并滚动视口显示它们

get_annotations 只读

获取当前文档或指定节点的全部批注

展开其余 32 个工具

set_annotation 写入

创建或更新支持 Markdown 的批注

set_multiple_annotations 写入

批量创建或更新批注

scan_nodes_by_types 只读

按节点类型扫描节点

get_reactions 只读

获取节点的原型交互，并显示视觉高亮动画

set_default_connector 写入

设置创建连接时使用的默认 FigJam 连接线样式

create_connections 写入

根据原型流程或自定义映射创建 FigJam 连接线

create_rectangle 写入

创建矩形

create_frame 写入

创建图框

create_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 写入

设置节点填充颜色

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 通信的指定频道

使用场景

读取当前 Figma 文档、选区和节点信息

批量替换设计中的文本内容

创建和修改图框、矩形、文本及布局属性

管理批注、组件实例覆盖和原型连接

将节点导出为图像格式

支持客户端

Cursor

Claude Code部分支持

Codex部分支持

依据项目文档列出，未经本站实测。

详细介绍

TalkToFigma 是一个由 grab 维护的开源 MCP 集成，将 AI agent 与 Figma 连接起来，用于读取设计信息并以编程方式修改设计。它包含 TypeScript MCP 服务器、Figma 插件和用于两者通信的 WebSocket 服务器。