Claude AI 智能体 Talk to Figma MCP

让你的 AI 智能体能够读取、分析和修改 Figma 设计。

适用于你最喜爱的智能体工具：

• Claude Desktop

• Claude Code

• Cursor

• Antigravity

• Windsurf

• VS Code + GitHub Copilot

• Cline

• Roo Code

👩🏽💻 适用人群

UX/UI 团队

无需手动操作，即可自动化重复的设计任务并保持品牌一致性：

• 自动化无障碍审计 - 在几秒钟内检测并修复对比度问题

• 批量样式更新 - 通过单个命令更改整个文档的颜色、排版或间距

• 视觉层级分析 - 获得关于设计结构的即时反馈

开发人员

直接从设计生成生产就绪的代码：

• React/Vue/SwiftUI 组件 - 一步从设计到代码

• 使用设计令牌 (Design Tokens) 编写代码 - 保持设计与开发同步

• 减少交付摩擦 - 减少与设计团队之间的反复迭代

核心优势：与需要 Dev Mode 许可证的 Figma 官方 MCP 不同，此 MCP 适用于任何 Figma 账户（甚至是免费账户）。

Related MCP server: Figma Console MCP Server

💡 实际应用场景

无障碍设计：

"查找所有对比度 <4.5:1 的文本，并建议符合 WCAG AA 标准的颜色"

品牌重塑：

"将文档中所有主按钮的 #FF6B6B 更改为 #E63946"

设计分析：

"分析此屏幕的视觉层级，并根据设计原则提出改进建议"

开发交付：

"为 'CardProduct' 生成 React 组件，包括 PropTypes 和 CSS 模块样式"

⚡️ 快速安装

设置： 5 分钟 | 首次自动化： 2 分钟

要求

• 已安装 Node.js

• Figma Desktop

• AI 客户端：

  • Claude Desktop

  • Claude Code

  • Cursor

  • Antigravity

  • Windsurf

  • VS Code + GitHub Copilot

  • Cline

  • Roo Code

第 1 步：安装并启动 websocket

使智能体能够向 Figma 发送命令。

打开终端，导航到要安装该工具的文件夹，然后运行：

npx claude-talk-to-figma-mcp

💡 提示：此命令是“一体化”的（克隆、安装并启动）。在后续会话中，如果你已经在项目文件夹 your-project/claude-talk-to-figma-mcp 中，只需运行 bun run socket 即可。

第 2 步：在 Figma 中安装插件

使 Figma 能够接收来自智能体的命令并返回响应。

在 Figma Desktop 中，转到 Menu → Plugins → Development → Import plugin from manifest → 在你安装 MCP 的文件夹内，选择 src/claude_mcp_plugin/manifest.json

第 3 步：配置你的智能体工具

使智能体能够使用 MCP 的读取和修改工具。

Claude Desktop

下载 claude-talk-to-figma-mcp.dxt（从最新版本的 Assets 部分下载）并双击。Claude 会自动完成配置。

Cursor

1. 打开 Cursor Settings → Tools & Integrations

2. 点击 "New MCP Server" 以打开 mcp.json 文件

3. 添加此配置：

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

4. 保存文件并重启 Cursor

其他智能体工具

对于其他工具（Claude Code、Windsurf、VS Code + GitHub Copilot、Cline、Roo Code），你可以按照详细安装指南的“配置你的智能体工具”章节中的说明进行操作。

第 4 步：开始工作

1. 在 Figma 中打开插件

2. 复制频道 ID（绿色框内的粗体代码）

3. 在聊天中输入：Connect to Figma, channel {your-ID}

✅ 准备好使用 AI 进行设计了！

后续工作会话

要在日常工作中再次使用 MCP，无需重复整个过程：

1. 启动 socket：在终端中，进入项目文件夹 your-project/claude-talk-to-figma-mcp 并运行 bun run socket（或 npm run socket）。

2. 在 Figma 中打开插件：你可以在最近使用的插件列表中找到它。

3. 连接 AI：复制频道 ID 并告诉你的智能体：Connect to Figma, channel {your-ID}。

🤖 多智能体与并行执行

此 MCP 服务器开箱即用地支持 安全并行执行，允许多个 AI 智能体（例如 Claude Code 的子智能体或团队集群）同时在你的 Figma 文件上工作，而不会锁定插件。内置的命令队列会在服务器端按顺序处理请求，防止 Figma API 超时。

注意：由于多个智能体可以同时修改文档，依赖隐式页面上下文是不安全的。因此，像 set_current_page 这样的有状态命令被 阻止 了。所有智能体在执行任何创建或结构修改命令（例如 create_frame、create_text）时，必须明确提供预期的 parentId 参数。

（特别感谢 @mmabas77 设计并贡献了此功能！）

🐳 替代方案：使用 Docker

如果你更喜欢 Docker 或需要在团队环境中运行 WebSocket 服务器，请参阅详细安装文档中的 Docker 安装指南。

🛠️ 功能

设计分析

• 获取文档信息、当前选区、样式

• 扫描文本、审计组件、导出资源

元素创建

• 具有完全样式控制的形状、文本、框架

• 克隆、编组、组织元素

修改

• 颜色、边框、圆角、阴影

• 自动布局、高级排版

• 本地组件和团队库组件

查看 完整命令列表。

📚 文档

• 详细安装 — 手动设置、Cursor、Windsurf 和其他 IDE

• 可用命令 — 完整工具参考

• 故障排除 — 常见错误及其解决方法

• 贡献指南 — 架构、测试、贡献指南

• 更新日志 — 版本历史

🙏 致谢

基于 Sonny Lazuardi 的 cursor-talk-to-figma-mcp。由 Xúlio Zé 适配至 Claude Desktop 并扩展了新工具。

如果你想了解所有项目贡献，可以访问 贡献指南的“贡献者”章节。

MIT 许可证

📊 项目状态

✅ 稳定生产 - 工具已准备好在设计和开发团队中日常使用

🚀 积极开发中：

• 对 Figma 变量的全面支持

• 增强导出至 Tailwind CSS/SwiftUI 的功能

有特定需求？

在 GitHub Issues 上提出新建议

你的反馈和贡献让项目保持活力。❤️