figma-code-mcp 是 Figma 的 MCP 服务器,装上之后 Cursor、Windsurf、Claude Desktop、Claude Code 都能直接连接 Figma。AI 可以读取设计稿、还原成 HTML+CSS、提取 Design Tokens、导出切图并下载到本地,全程不用离开编辑器。
- 设计稿 -> HTML+CSS:基于 Figma node tree 生成像素级还原代码,Auto Layout -> flex,否则 absolute 定位
- 切图/图标导出:主动调 Figma export API 导出 png/svg,下载到本地(Figma 的 S3 链接是临时的,必须下载)
- 结构化 Design Tokens:提取所有颜色、字体/字号/字重、阴影、边框、圆角,按使用频率排序
- 并发 + 重试:多 frame 并行分析,网络异常自动重试
- MCP Resources & Prompts:内置前端开发和设计走查 Prompt 模板
Figma 官方提供了 Dev Mode MCP server(需 Figma 桌面端 + 付费席位),figma-code-mcp 是社区实现,走 REST API,两者定位互补:
| 维度 | Figma 官方 Dev Mode MCP | figma-code-mcp |
|---|---|---|
| 前置依赖 | Figma 桌面端运行中 | 仅需 REST API token |
| 席位要求 | 付费席位(Dev / Full seat) | 无 |
| 连接方式 | localhost:3845 本地服务 |
标准 stdio,任意 MCP 客户端 |
| 资产落地 | 返回 SVG 源码 / 临时图片 URL,靠 agent 自行写文件 | slices 模式直接批量下载到指定目录 |
| 批量导出 | 围绕桌面端当前选区 | 按 frame 整体导出,支持 frame="all" |
| 附加能力 | Code Connect、变量定义 | HTML+CSS 还原、Design Tokens 提取 |
官方 MCP 的工具清单持续更新,以官方文档为准。
Cursor / Windsurf - 编辑 .cursor/mcp.json(或 .windsurf/mcp.json):
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-code-mcp"],
"env": { "FIGMA_TOKEN": "your_figma_token_here" }
}
}
}Claude Desktop - 编辑 claude_desktop_config.json:
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-code-mcp"],
"env": { "FIGMA_TOKEN": "your_figma_token_here" }
}
}
}Claude Code:
claude mcp add figma -- npx -y figma-code-mcp然后设置环境变量 FIGMA_TOKEN。
- 登录 Figma
- 点头像 -> Settings -> Account -> Personal access tokens
- 生成新 token,勾选权限:File content (read-only)、Current user (read-only)
- 复制 token 填入上面的
FIGMA_TOKEN
配置完成后重启客户端,粘贴 Figma 链接即可使用。
通过 mode 参数切换功能:
| Mode | 说明 |
|---|---|
list |
列出文件所有顶层 frame(画面) |
analyze |
frame -> HTML+CSS 还原 + Design Tokens(默认) |
tokens |
仅提取 Design Tokens(字体、颜色、阴影等) |
slices |
导出切图/图标/图片并下载到本地 |
参数:
| 参数 | 说明 |
|---|---|
url |
Figma 文件 URL(支持 /file、/design、/proto,可带 node-id) |
mode |
list / analyze / slices / tokens,默认 analyze |
frame |
目标 frame:node_id、名称、索引、或 all。URL 有 node-id 时可省 |
include |
analyze 模式输出项:html、image、tokens、layout、layers、slices,默认 ["html","tokens","layers","image"] |
output_dir |
切图下载目录,默认 figma-assets |
scale |
导出倍率,默认 2 |
典型用法:
# 1. 先列画面
figma_design url="https://www.figma.com/design/KEY/File" mode="list"
# 2. 还原某个 frame(名称或索引)
figma_design url="https://www.figma.com/design/KEY/File" mode="analyze" frame="登录页"
# 3. 或直接用带 node-id 的链接
figma_design url="https://www.figma.com/design/KEY/File?node-id=12-345" mode="analyze"
# 4. 导出切图
figma_design url="https://www.figma.com/design/KEY/File?node-id=12-345" mode="slices"
# 5. 只提取设计规范
figma_design url="https://www.figma.com/design/KEY/File?node-id=12-345" mode="tokens"
| 类型 | 名称 | 说明 |
|---|---|---|
| Resource | file-frames |
文件 frame 列表(figma://file/{key}/frames) |
| Prompt | frontend-dev |
根据设计稿生成像素级前端代码 |
| Prompt | design-review |
审查设计一致性和可实现性 |
- 尺寸 / 坐标:absoluteBoundingBox 精确到像素
- 布局:Auto Layout -> flex(方向/间距/padding/对齐/换行),否则 absolute 定位
- 颜色:SOLID / 线性渐变 / 径向渐变(含 alpha)
- 文本:字体族/字号/字重/行高/字间距/对齐/装饰/大小写
- 效果:外阴影 / 内阴影 / 图层模糊 / 背景模糊
- 其他:圆角(含四角不同)、描边、透明度、overflow 裁剪
- 矢量图标 / 插画(VECTOR / LINE / ELLIPSE / STAR / POLYGON / BOOLEAN_OPERATION):导出 SVG
- 位图素材(含 IMAGE fill 的节点):导出 PNG
- 设计师标记的导出项(有 exportSettings 的节点):按其设置导出
- 字体:Figma 返回 PostScript 字体名,本地未必安装,会映射到 web fallback(PingFang SC / Microsoft YaHei 等)
- 复杂矢量:部分复杂图形用 CSS 还原精度不足,统一导出为 SVG 引用
- 切图 URL 临时:Figma export 返回的 S3 链接约 14 天失效,所以必须下载到本地,HTML 直接引用本地路径
| 维度 | lanhu-mcp | figma-mcp |
|---|---|---|
| 数据源 | Sketch JSON + DDS schema(两条路) | Figma REST API node tree(一条路) |
| 切图来源 | 从 sketch JSON 挖现成 downloadUrl |
主动调 /v1/images/:key 按 node id 导出 |
| 切图 URL | 长期有效 | 临时(约 14 天) |
| 是否下载到本地 | 否(只给清单) | 是(内置下载,HTML 引用本地路径) |
| 还原路径 | schema->flex / sketch->absolute 两条 | Auto Layout->flex / 否则 absolute,统一一条 |
- 前端开发:粘贴 Figma 链接 -> AI 生成与设计稿匹配的组件代码,切图已下载到本地
- 设计走查:对比实现与 Design Tokens(间距、颜色、字体)
- 资源导出:批量导出图标和图片素材
git clone <repo> && cd figma-mcp
npm install && cp config.example.env .env # 填入 FIGMA_TOKEN
npm run dev # 开发模式(tsx)
npm run build # 构建
npm run check # 类型检查
npm test # 测试