Figma MCP Go

为什么需要

Figma 是出海产品设计的核心工具，AI 编程助手（Cursor、Claude Code、Codex）需要 MCP 协议才能读写 Figma 文件。官方 Figma REST API 限制极严：免费版每月 6 次调用，Pro 每天 200 次，做 AI 自动化根本不够。

这个工具绕过 REST API，通过本地 Figma 插件桥接，给 AI Agent 完全的读写权限。独立开发者用免费版 Figma 就能在 AI 里读设计稿、生 UI 代码，零成本。

怎么用

1. 安装 MCP server：claude mcp add -s project figma-mcp-go -- npx -y @vkhanhqui/figma-mcp-go@latest
2. Figma 端装插件：从 GitHub Releases 下载 plugin.zip，桌面端 Figma 导入
3. AI 端调用：Claude Code / Cursor 里直接说"读取当前 Figma 文件的所有 frame 节点"，Agent 自动用 MCP 工具拿
4. 双向操作：可以读设计稿生成 React/Vue 代码，也可以从代码描述让 AI 在 Figma 里直接画出来

界面

这是 MCP server，没独立界面，效果在 Figma 桌面端和 AI 客户端展示：

[Figma 桌面]                  [Claude Code]
┌──────────────────┐         ┌──────────────────┐
│  Plugin 运行中    │  <----> │  73 MCP Tools    │
│  ┌──────────┐    │  桥接   │  • read_frame    │
│  │ Frame 1  │    │         │  • create_frame  │
│  │ Frame 2  │    │         │  • set_text      │
│  │ Component│    │         │  • set_fills     │
│  └──────────┘    │         │  • ... 73 个     │
└──────────────────┘         └──────────────────┘

使用案例

• 设计稿转代码：独立开发拿到 Figma 设计稿，让 Claude Code 通过 read_frame + read_design_strategy 读出布局、间距、组件，直接生成 Tailwind 代码
• AI 批量改设计：运营要改 30 个 banner 文案和颜色，用 set_text + set_fills 批量调用，10 分钟搞定
• 设计系统自动化：从代码仓库的 design token 同步到 Figma Variables，让 AI 维护设计系统一致性

注意事项

• 定价：MIT 开源免费，无 API 调用费用（Figma 插件端需要 Desktop 版 Figma）
• 局限：必须用 Figma 桌面端（网页版 Figma 不支持插件），73 个工具覆盖 90% 场景，极少数高级操作（动画时间轴）不支持
• 安全：所有读写走本地桥接，不上传设计稿到第三方，桥接只暴露当前打开的 Figma 文件
• 与官方 Figma Dev Mode 比：官方 Dev Mode 要付费席位，这个完全免费，工具数量更多