cursor-talk-to-figma-mcp MCP — 使用场景, 安装 & 实时演示

为什么要用

核心特性

读取当前选中、节点树和文档元数据
批量文本更新（scan_text_nodes + set_multiple_text_contents）用于本地化
Auto-layout 和间距工具（set_layout_mode、set_padding、set_axis_align）
创建画框、矩形和文本；实例化组件；设置覆盖
导出任何节点为 PNG/SVG 供其他地方使用

实时演示

实际使用效果

cursor-talk-to-figma.replay ▶ 就绪

0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "cursor-talk-to-figma",
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ]
    }
  ]
}

Continue 使用服务器对象数组，而非映射。

~/.config/zed/settings.json

{
  "context_servers": {
    "cursor-talk-to-figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "cursor-talk-to-figma-mcp"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add cursor-talk-to-figma -- npx -y cursor-talk-to-figma-mcp

一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。

使用场景

实战用法： cursor-talk-to-figma-mcp

如何从一条提示词更新 Figma 文档中的每个文本图层

👤 设计师和 PM，负责文案审查或本地化 ⏱ ~20 min intermediate

何时使用： 你有一个重命名 50 个字符串的规范，不想点击 50 次。

前置条件

Bun 已安装 — curl -fsSL https://bun.sh/install | bash
Figma desktop 打开并链接插件 — Plugins > Development > Link existing plugin > point to src/cursor_mcp_plugin/manifest.json
WebSocket 网桥运行中 — bun run start in the cloned repo

步骤

从插件面板加入频道

加入 Figma 频道 X7F2 并列出当前页面的所有文本节点。✓ 已复制

→ 包含当前文本的节点 id 列表
映射旧文案到新文案

这是一个 old_string,new_string 的 CSV。对于内容匹配 old_string 的每个文本节点，使用 set_multiple_text_contents 替换为 new_string。✓ 已复制

→ 应用的更新计数、diff 预览
视觉检查

导出编辑最多的三个画框为 PNG 以便我审查。✓ 已复制

→ PNG URL / 文件路径

结果： 一个经过文案审查的文件，所有字符串都已更新，并有编辑前后的导出作为证明。

注意事项

插件在操作中间断开连接 — set_multiple_text_contents 是幂等的——用相同映射重新运行；已正确的节点会被跳过
组件中的文本与实例的文本混淆了更新 — 先用 get_instance_overrides 查看哪些实例覆盖了基础文本

搭配使用： filesystem

如何从 PRD 一次性标注 Figma 规范

👤 设计工程师，将文档与原型配对 ⏱ ~25 min intermediate

何时使用： 你的 PRD 有'CTA 应该说 X，包含 Y 工具提示文案'，你想在 Figma 中标注这些。

步骤

分享 PRD

这是 PRD [粘贴]。提取每个 UI 标注需求。✓ 已复制

→ {node_hint, annotation_text} 的结构化列表
将提示映射到实际节点

使用 get_selection 和 scan_nodes_by_types 将每个标注匹配到当前页面的具体节点 id。✓ 已复制

→ node_id + annotation 对已准备好
应用标注

用 set_multiple_annotations 应用它们。✓ 已复制

→ 标注在插件覆盖层中可见

结果： 一个自文档化的 Figma 文件，工程师无需切换标签页就能读取。

注意事项

当多个节点共享名称时，Claude 匹配了错误的节点 — 包含父画框名称作为消歧提示

搭配使用： notion · github

如何以编程方式生成组件变体（深色模式、尺寸）

👤 设计系统团队 ⏱ ~20 min advanced

何时使用： 你需要将基础按钮克隆为 12 个变体并调整填充/描边。

步骤

克隆基础节点

将 Button/Primary 画框克隆 4 次并水平排列，间隔 16px。✓ 已复制

→ 文档中的 4 个新节点
重新着色填充/描边

对于每个克隆，将 set_fill_color 设置为 #3B82F6 的 500、600、700、800 色调。✓ 已复制

→ 可见的颜色渐进
转换为变体

将它们作为名为 'Button / Intensity' 的组件集分组。✓ 已复制

→ 新的组件集出现在资源中

结果： 设计系统中的现成可用变体集。

注意事项

颜色令牌不同于原始十六进制 — 如果你的系统使用变量，用 set_fill_color 时使用变量 id 而不是原始十六进制

如何导出每个标记的画框为 PNG 用于开发交付

👤 准备交付文档的设计工程师 ⏱ ~10 min beginner

何时使用： 在冲刺启动前或客户审查前。

步骤

找到带有交付标签的画框

扫描当前页面上类型为 FRAME 且名称以 '[HANDOFF]' 开头的节点。✓ 已复制

→ 目标画框列表
以 2 倍分辨率导出

将每个以 2 倍分辨率导出为 PNG 并保存到 /handoff/2026-04/。✓ 已复制

→ 返回的文件路径

结果： 一个带时间戳的交付文件夹，准备好放入 Notion 或 Linear。

搭配使用： filesystem · notion

组合

与其他 MCP 搭配，撬动十倍杠杆

cursor-talk-to-figma + notion

同步设计标注到工程师的 Notion 规范页面

提取当前 Figma 页面上的每个标注，并将它们镜像到 Notion 文档 'Checkout Spec v3' 中作为清单。✓ 已复制

cursor-talk-to-figma + filesystem

将画框导出到本地交付文件夹，按日期版本管理

将每个 [HANDOFF] 画框导出到 /design-handoff/2026-04/ 作为 PNG 2 倍。✓ 已复制

cursor-talk-to-figma + github

将设计更改与代码 PR 参考配对

在 CTA 按钮上添加标注，链接到 frontend repo 中的 PR #4421。✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用	成本
get_document_info		在新文件中定位自己	free
get_selection		对用户刚点击的内容进行操作	free
scan_text_nodes	root_id?: str	批量复制更改前	free
set_multiple_text_contents	updates: {id, text}[]	批量文本替换	free
set_fill_color	id: str, color: {r,g,b,a}	重新设置节点样式	free
set_layout_mode	id, mode: 'HORIZONTAL'\|'VERTICAL'\|'NONE'	切换 auto-layout	free
create_component_instance	component_key: str, parent_id: str, position?: {x,y}	将库组件放在画布上	free
set_multiple_annotations	annotations: {id, text}[]	批量规范标注	free
export_node_as_image	id: str, format: 'PNG'\|'SVG'\|'JPG', scale?: number	交付、审查、内联预览	free
join_channel	channel: str	启动插件后的第一个调用	free

成本与限制

运行它的成本

API 配额: Figma 对插件操作没有公开的速率限制；实际上限是 WebSocket 吞吐量
每次调用 Token 数: 节点信息：100-1500 个 token，取决于子节点
费用: 免费（需要 Figma 账户；免费计划可用）
提示: 总是将扫描范围限制在特定的根节点 id；对大文件进行整页扫描会导致上下文爆炸。

安全

权限、密钥、影响范围

最小权限： Figma 插件在桌面/网络应用中运行；不需要 API token

凭据存储： 无——插件在 Figma 中进程内运行；MCP 通过本地主机 WebSocket 通信

数据出站： Figma 文档节点从插件流向你的本地 MCP，然后流向你选择的 LLM。敏感设计只通过 LLM 调用离开你的机器。

切勿授予： 不要将 WebSocket 端口暴露到本地主机之外

批量编辑不是事务性的——部分失败会留下混合状态。在大规模运行前提交 Figma 版本。

故障排查

常见错误与修复

插件无法连接到 WebSocket

确保 bun run start 是活跃的，插件频道 id 与 agent 加入的相匹配。

验证： bun --version && lsof -i :3055

set_multiple_text_contents 仅更新一些节点

锁定图层或组件内的节点会被跳过。解锁或目标实例覆盖。

Figma 插件显示 'manifest not found'

通过 Plugins > Development > Link existing plugin > 从 src/cursor_mcp_plugin/ 选择 manifest.json 重新链接。

导出返回空 URL

某些节点（遮罩组、某些效果）无法在服务器端呈现。先扁平化或导出为 SVG。

替代方案

cursor-talk-to-figma-mcp 对比其他方案

替代方案	何时用它替代	权衡
官方 Figma Dev Mode MCP	你有 Figma 付费 Dev Mode 座位并想要官方支持	只读；无法批量编辑
Framelink Figma MCP	你更喜欢基于 REST API 的只读服务器	无变更，不需要 WebSocket 插件但无法编辑

cursor-talk-to-figma-mcp

为什么要用

核心特性

实时演示

实际使用效果

安装

选择你的客户端

使用场景

实战用法： cursor-talk-to-figma-mcp

前置条件

步骤

注意事项

步骤

注意事项

步骤

注意事项

步骤

组合

与其他 MCP 搭配，撬动十倍杠杆

工具

此 MCP 暴露的能力

成本与限制

运行它的成本

安全

权限、密钥、影响范围

故障排查

常见错误与修复

替代方案

cursor-talk-to-figma-mcp 对比其他方案

更多

资源