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 不同。
为什么用它
适合：前端开发者、做设计还原的团队，想把 Figma 稿快速转成代码。
维护活跃、采用度高，下方有完整健康数据可参考。
相似 / 替代 server
@upstash/context7-mcp
Context7 Platform -- Up-to-date code documentation for LLMs and AI code editors
94
活跃⭐ 59.6k1 天前更新
@github/github-mcp-server
GitHub's official MCP Server
85
活跃⭐ 31.6k1 天前更新
sentry-mcp
An MCP server for interacting with Sentry via LLMs.
83
活跃⭐ 788今天更新
terraform-mcp-server
The Terraform MCP Server provides seamless integration with Terraform ecosystem,
80
活跃⭐ 1.5k今天更新
常见问题
需要 Figma 的什么权限？
需要一个 Figma access token 来读取文件，按最小权限配置即可。
能生成哪种框架的代码？
它提供的是设计的结构化数据，具体生成 React/Vue/Tailwind 哪种由你的 AI 客户端和提示词决定。