告别“切图仔”？我用一个神器，让Figma设计稿自动生成前端代码！

引言：从"手工"到"智能"的蜕变

作为一名前端开发者，你是否也曾经历过这样的工作流：设计师在 Figma 中更新了设计稿 → 你收到通知 → 在 Figma 和 IDE 之间反复横跳 → 手动测量间距、色值、字体大小 → 将这些样式"翻译"成 CSS/Vue/React 代码。

这个过程繁琐、低效且容易出错，我们戏称自己为"高级切图仔"。但今天，我要向大家介绍一个能够彻底改变这一现状的神器：Figma-Context-MCP。它将 Figma 的设计上下文直接注入到你的 AI 工作流中，让"设计稿转代码"变得前所未有的智能和精准。

一、背景：为什么我们需要"上下文"？

在 AI 编程助手（如 Cursor, Windsurf, Claude Desktop）席卷而来的今天，我们已经习惯了让 AI 帮我们写代码。但当你想让 AI 根据设计稿写 UI 代码时，通常会遇到一个瓶颈：

你如何向 AI 准确描述一个复杂的视觉设计？

靠语言描述一个按钮的阴影、一个布局的 Flexbox 结构或者一个渐变色的色值？这几乎是不可能的。这就是 上下文 缺失的问题。

Figma-Context-MCP 应运而生 。它是一个 模型上下文协议（Model Context Protocol） 服务。简单来说，它就像一个超级翻译官和信使，能够：

连接：直接与你的 Figma 文件建立连接。
理解：解析 Figma 文件的结构，理解画板、框架、组件、样式等。
提供：将解析出的设计信息（如节点树、样式数据）作为"上下文"提供给 AI 助手。

这样，AI 助手就不再是"盲人摸象"，而是拥有了"火眼金睛"，能够直接"看到"设计稿的细节。

二、什么是 Figma-Context-MCP？

Figma-Context-MCP 是一个开源项目，它实现了 MCP 协议，专门用于桥接 Figma 和你的 AI 应用。

MCP（Model Context Protocol） ：由 Anthropic 提出的一种开放协议，旨在标准化 AI 模型与外部工具和数据源的连接方式。
Figma API：Figma 官方提供的接口，允许开发者读取设计文件的数据。

Figma-Context-MCP 站在巨人的肩膀上，利用 MCP 协议封装了 Figma API 的复杂性，让你能通过简单的指令，将任何 Figma 节点（一个页面、一个框架、一个组件）的详细信息作为上下文，直接喂给你正在使用的 AI 助手。

三、手把手实战：如何配置和使用

理论说再多，不如亲手实践。接下来，我们一步步配置并使用它。

准备工作：

获取 Figma Personal Access Token：
- 访问 Figma 官网进入 Settings。
- 找到 Security 标签下的 Personal access tokens。
- 点击 Generate new token，给它一个名字（如 Figma-MCP-Service），并确保拥有相关权限,比如Files Development Projects 等。
- 复制生成的 Token，妥善保存。
获取 Figma 文件 URL：
- 打开你想要转换的 Figma 设计稿。
- 从浏览器地址栏复制文件的 URL。其格式通常为：https://www.figma.com/file/{FILE_KEY}/{FileName}。我们需要其中的 {FILE_KEY}。

安装与配置（以 Cursor 为例）：

获取 Figma Personal Access Token图例演示：

安装与配置（以 Cursor 为例）：

Figma-Context-MCP

MacOS / Linux

json 复制代码

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

json 复制代码

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

cursor 里进行配置

创建一个新的MCP Server, 将刚才的代码粘贴进来

然后将刚才生成的token 替换进来

保存后，回到设置里，查看MCP状态

在 Figma 复制选中的模块

指定要写入的文件，并提出相对应的要求。他就开始写了。

最后的成品下方是设计稿，上方是他一次性就实现的界面。还是很赞的，调整下高度和相关echarts逻辑就可以用了。

注意事项

如果使用的时候没成功或者生成的ui或者生成的代码 不满足需求，请 check 以下事项

检查生成的 Figma api key 权限是否足够
检查 MCP 服务是否亮绿灯
确保最小上下文，如果上次文过长，会导致解析或数据丢失
每次下载设计稿图片 + Figma URL 并行，会大大提高设计稿转代码的还原度
如果生成的ui效果，和Figma 不符合，那么查看get_figma_data的json 数据。你所看的Figma 可能隐藏了某些图层或者有某些冗余数据，但是最终的效果，是根据get_figma_data的json 数据去生成的界面
确保有充足的rules,去规定 cursor的代码生成，避免生成的代码不符合现有项目规范

Figma设计稿自动生成前端代码整体流程(图解)

Figma-Context-MCP 核心实现

基本实现流程

启动与注册
通过 npx 启动 MCP 服务器（包名 figma-developer-mcp），在 IDE 的 MCP 配置里以 stdio 方式注册，提供 FIGMA_API_KEY。
入口与构建：src/bin.ts（CLI/stdio 启动），src/mcp-server.ts/src/server.ts（服务装配），用 tsup 构建到 dist/。元数据在 server.json，npm 包信息在 package.json。
工具暴露（MCP Tools）
get-figma-data：读取 Figma 文件/节点，返回"精简后的"布局与样式结构。
download-figma-images：按节点导出位图/SVG到本地 assets/，支持裁剪与缩放。
两者在 src/mcp/tools/ 汇总，由 src/mcp/index.ts 注册到 MCP。
设计数据获取
src/services/figma.ts：封装 Figma API 调用（鉴权=PAT），按 fileKey、nodeId、imageRef 拉取节点树与资源。
src/utils/fetch-with-retry.ts：请求重试/稳健性；logger.ts 记录过程。
解析与抽取
src/extractors/：
node-walker.ts 遍历 Figma 节点树；
design-extractor.ts/built-in.ts 将节点拆解为通用描述（尺寸、间距、对齐、半径、阴影、文本样式、填充/描边等）；
types.ts 定义抽取后的中间类型。
目标：只保留"对写代码最有用"的上下文，压缩无关噪音。
语义化"降维"与映射
src/transformers/：
layout.ts：将自动布局/约束/gap/padding/对齐转换为 Flex/Grid/定位等 CSS 线索；
style.ts/effects.ts：颜色、渐变、边框、阴影、圆角到 CSS 变量/规则；
text.ts/component.ts：文本排版与组件级别的结构提示。
输出的数据更贴近"如何写 HTML/CSS"，便于 Agent 直接生成代码。
资源导出与处理
download-figma-images 联合 src/utils/image-processing.ts（基于 sharp）做格式/尺寸处理与裁剪，产物文件名包含尺寸/后缀，方便追溯与缓存。
结果返回给 IDE Agent
MCP 工具返回"精简的节点描述 + 资源落地路径"。Agent（如 Cursor）据此一次性写出组件/页面代码，并能按节点 granularity 逐步拼装完整页面。

一些免费的Figma文件地址

B端设计地址

C端设计地址

文章演示的项目地址

github.com/github-lear...

结语

通过使用 Figma MCP，设计稿的还原效率得到了显著提升。相比之前直接截图让 AI 识别的方式，现在能够直接读取 Figma 的元数据，不仅减少了信息误差，也大大提高了还原的准确性和效果。操作更便捷，效果也更令人满意～

嘿嘿，这下又多了一个高效（摸鱼）小技巧 💡

大家要是有其他好用的 MCP 工具，欢迎在评论区一起分享交流呀！ღ( ´･ᴗ･` )比心