figma-developer-mcp
MCP server to provide Figma layout information to AI coding agents like Cursor
Figma MCP Server 把你的 Figma 设计稿接给 AI：它能读取画板的布局、间距、颜色、字体，然后照着生成对应的前端代码。
对做 design-to-code 的人特别有用——不用手动量像素、抄颜色，AI 直接从设计源数据里取。
它能帮你做什么
让 AI 读取你的 Figma 设计稿——拿到布局、颜色、间距、组件信息，把设计直接变成代码。
能力
- 读取 Figma 文件的布局与样式
- 提取颜色 / 间距 / 字体等 design token
- 把设计节点转成前端代码
装好后，试试这样问 AI
在 Claude / Cursor 等接了这个 server 的客户端里直接说
- ›“把这个 Figma 组件转成一个 React + Tailwind 组件”
- ›“从这个设计稿提取所有用到的颜色，做成一份色板”
为什么用它
适合：前端开发者、做设计还原的团队，想把 Figma 稿快速转成代码。
维护活跃、采用度高，下方有完整健康数据可参考。
能接哪些客户端
- Claude Desktopnpx
- Claude Codenpx
- Cursornpx
- VS Codenpx
- Windsurfnpx
依据 registry manifest 的包类型和 transport 推导，我们尚未实际安装验证。接入前请以官方 README 为准。
安装 / 接入
claude mcp add figma-developer-mcp -- npx -y figma-developer-mcp以官方 README 为准；env 与参数各 server 不同。
🛠️ 维护活跃度 权重 30% · 58分
📊 采用度 权重 25% · 77分
✅ 可用性 权重 20% · 55分
❤️ 健康度 & 社区 权重 25% · 81分
数据来源：GitHub API · npm registry · 更新于 2026-08-19
近 90 天趋势
⭐ stars +0%
📦 周下载 +0%
常见问题
需要 Figma 的什么权限？
需要一个 Figma access token 来读取文件，按最小权限配置即可。
能生成哪种框架的代码？
它提供的是设计的结构化数据，具体生成 React/Vue/Tailwind 哪种由你的 AI 客户端和提示词决定。
相似 / 替代 server
io.github.leMaur/livewire-flux-mcp
Flux UI component and layout docs for AI coding agents. Live from fluxui.dev, Pr
io.github.VonderVuflya/yggdrasil
One shared, durable memory for your AI coding agents — local-first, zero-depende
io.github.yaminbkk/nexusmem
Local-first memory for AI coding agents: shell history with exit codes, git diff
io.github.anup-khanal/aidimag
Persistent, verified memory for AI coding agents: recall, capture, guardrails, r
每周一封，5 分钟看完 MCP 生态发生了什么
新增 server、爆火趋势、弃坑预警——引擎自动追踪，人工筛选后发到你邮箱。
每周一封 · 随时退订 · 不卖数据