Figma MCP Server
Figma MCP Server 把你的 Figma 设计稿接给 AI：它能读取画板的布局、间距、颜色、字体，然后照着生成对应的前端代码。
对做 design-to-code 的人特别有用——不用手动量像素、抄颜色，AI 直接从设计源数据里取。
它能帮你做什么
让 AI 读取你的 Figma 设计稿——拿到布局、颜色、间距、组件信息，把设计直接变成代码。
能力
- 读取 Figma 文件的布局与样式
- 提取颜色 / 间距 / 字体等 design token
- 把设计节点转成前端代码
装好后，试试这样问 AI
在 Claude / Cursor 等接了这个 server 的客户端里直接说
- ›“把这个 Figma 组件转成一个 React + Tailwind 组件”
- ›“从这个设计稿提取所有用到的颜色，做成一份色板”
安装 / 接入
claude mcp add figma-developer-mcp -- npx -y figma-developer-mcp以官方 README 为准；env 与参数各 server 不同。
能接哪些客户端
- Claude Desktopnpx
- Claude Codenpx
- Cursornpx
- VS Codenpx
- Windsurfnpx
依据 registry manifest 的包类型和 transport 推导，我们尚未实际安装验证。接入前请以官方 README 为准。
为什么用它
适合：前端开发者、做设计还原的团队，想把 Figma 稿快速转成代码。
维护活跃、采用度高，下方有完整健康数据可参考。
相似 / 替代 server
io.github.shinpr/sub-agents-mcp
AI sub-agent delegation for Cursor, Claude, Codex, Gemini, GLM, Kimi, Grok, and
io.github.raymondchins/agentmap
The TS/JS-accurate repo map for coding agents: ts-morph import/symbol/call graph
postman-mcp-server
Postman MCP Server — connect AI agents (Claude Code, Cursor, VS Code Copilot, Ge
io.github.Dhevenddra/forensic-deepdive
Persistent code knowledge graph + 9 composite MCP tools for AI coding agents.
常见问题
需要 Figma 的什么权限？
需要一个 Figma access token 来读取文件，按最小权限配置即可。
能生成哪种框架的代码？
它提供的是设计的结构化数据，具体生成 React/Vue/Tailwind 哪种由你的 AI 客户端和提示词决定。