figma-code-mcp

v1.0.0

Published

a month ago

MCP server for Figma design platform - lets AI assistants read designs, export slices and restore HTML+CSS.

🎨 Figma MCP Server

让 AI 编程助手直接读取 Figma 设计稿、还原 HTML+CSS、导出切图

这是什么

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 的对比

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 Token

登录 Figma
点头像 -> Settings -> Account -> Personal access tokens
生成新 token,勾选权限:File content (read-only)、Current user (read-only)
复制 token 填入上面的 FIGMA_TOKEN

配置完成后重启客户端,粘贴 Figma 链接即可使用。

工具

`figma_design` - 设计稿

通过 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"

MCP Resources & Prompts

| 类型 | 名称 | 说明 | |------|------|------| | Resource | file-frames | 文件 frame 列表(figma://file/{key}/frames) | | Prompt | frontend-dev | 根据设计稿生成像素级前端代码 | | Prompt | design-review | 审查设计一致性和可实现性 |

还原说明

能高保真还原

尺寸 / 坐标:absoluteBoundingBox 精确到像素
布局:Auto Layout -> flex(方向/间距/padding/对齐/换行),否则 absolute 定位
颜色:SOLID / 线性渐变 / 径向渐变(含 alpha)
文本:字体族/字号/字重/行高/字间距/对齐/装饰/大小写
效果:外阴影 / 内阴影 / 图层模糊 / 背景模糊
其他:圆角(含四角不同)、描边、透明度、overflow 裁剪

导出为切图引用(无法 CSS 还原)

矢量图标 / 插画(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 的关键差异

| 维度 | 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       # 测试

License

MIT