关于 Figma Dev Mode MCP Server
Figma 官方推出的 Dev Mode MCP 服务器, 让 Cursor、VS Code、Claude Code 等 AI 编码工具直接读取 Figma 设计稿的图层、变量与组件信息, 从而生成贴合设计规范的代码。最初以本地桌面版形态在 2025 年 beta 亮相, 随后提供官方推荐的远程托管版。
提供 get_design_context、get_variable_defs、Code Connect 映射等工具, 可将选中画框转换为 React + Tailwind 等代码, 并让生成结果复用团队既有组件库, 显著缩小设计与实现之间的落差。
技能规格
| 厂商 | Figma |
|---|---|
| 平台 | MCP |
| 能力维度 | 设计创作 |
| 是否官方 | 官方出品 |
| 中文支持 | 不支持 |
| 上线时间 | 2025-06 |
| 最近核实 | 2026-09 |
| 费用说明 | 远程版 beta 期全套餐可用且免费 (View/Collab 席位限每月 6 次调用, 付费 Dev 席位 200 次/天); 桌面本地版需 Professional 及以上套餐的 Dev 或 Full 付费席位。 |
怎么安装
远程 (推荐): 执行 claude mcp add --transport http figma https://mcp.figma.com/mcp 并完成 OAuth; 桌面版: 在 Figma 桌面应用 Dev Mode (Shift+D) 中启用 MCP 服务, 地址为 http://127.0.0.1:3845/mcp, 需付费 Dev 或 Full 席位。适用场景
- 把选中的设计画框一键转换为前端组件代码
- 提取颜色、间距、字体等设计变量与样式令牌
- 借助 Code Connect 让 AI 复用团队已有代码组件
相关链接
同维度的其他技能
以下是「设计创作」维度下的其他技能,可作备选。 想一次看完,见 设计创作类 Agent Skills。
BlenderMCP
让 Claude 等 LLM 对话式驱动 Blender 做 3D 建模与场景操作。
Canva MCP Server
Canva 官方 MCP, 让 AI 助手直接生成与编辑 Canva 设计。
Excalidraw MCP
AI 在聊天里直接生成并编辑 Excalidraw 手绘风图表。
draw.io 官方 MCP
draw.io 官方 MCP: 让 AI 直接生成可继续编辑的流程图与架构图。
MCP for Unity
把 Unity 编辑器交给 AI: 建场景、写脚本、跑测试都用自然语言。
21st MCP (原 Magic MCP)
21st.dev 官方的 UI 组件 MCP, 用自然语言产出 React/Tailwind 组件。