Figma MCP Server实战：设计稿丢给AI Agent直接出代码

前端开发这么多年，设计稿转代码一直是最痛的环节。Figma Dev Mode给你看HTML/CSS片段，各种插件能导出React组件，Figma Make能从文本生成原型——但这些工具各干各的，没有一个能真正理解你的项目代码。Figma最近推出的MCP Server彻底改变了这个局面。它基于Anthropic开源的Model Context Protocol标准，让AI Agent同时访问你的设计稿、代码库和设计系统，实现真正的双向打通。

什么是Figma MCP Server

MCP（Model Context Protocol）是Anthropic提出的开放标准，让AI Agent通过统一接口访问各种数据源。Figma的MCP Server就是基于这个协议，把Figma的设计数据暴露给AI编码工具。跟之前的插件方案本质区别在于：AI Agent拿到的不是一张截图或一段CSS片段，而是完整的设计上下文——布局结构、设计变量、组件映射、样式系统，全部结构化地传给LLM。目前支持的MCP客户端：

环境搭建：5分钟接入

两种接入方式：远程MCP Server（推荐，免安装）和本地Desktop Server（需要Figma桌面端）。以Claude Code为例，远程接入只需要一行命令：

claude mcp add --transport http figma https://mcp.figma.com/mcp

如果想全局生效（所有项目都能用），加上--scope user：

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

然后重启Claude Code，输入/mcp选择figma → Authenticate → 浏览器弹出OAuth授权 → 完成。Cursor更简单，直接点Figma提供的deep link就行，自动写入MCP配置。VS Code需要手动编辑mcp.json：

{  "servers": {    "figma": {      "url": "https://mcp.figma.com/mcp"    }  }}

OpenAI Codex的话，在Codex App里点Settings → MCP servers → 找到Figma → Install and authenticate。CLI方式：

codex mcp add figma --url https://mcp.figma.com/mcp

MCP Server提供的工具集

Figma MCP Server暴露了一组结构化工具，不是简单的”截图+识别”：get_design_context —— 核心工具。选中Figma里的一个frame，它返回完整的设计上下文：布局方式、间距、颜色变量、字体、组件层级。AI拿到这些信息后生成的代码会精确得多，不是看图猜CSS。get_variable_defs —— 返回选中区域用到的所有设计变量和样式。对于维护设计系统的团队来说，这意味着AI生成的代码会自动使用你定义好的token，不会硬编码颜色值。get_code_connect_map —— 查询Figma组件和代码组件的映射关系。如果你已经用Code Connect建立了映射，AI生成代码时会直接引用你的真实组件，而不是从零写一个新的。generate_figma_design —— 反向操作：把你的live UI截取成Figma设计层。目前只有Claude Code和Codex支持。你可以让Agent启动本地dev server，然后把渲染出来的页面直接送进Figma文件，用于设计走查或迭代。get_screenshot —— 对选中区域截图，给Agent做视觉参考。create_design_system_rules —— 生成一份规则文件，告诉Agent怎么把你的设计系统翻译成前端代码。跑一次就行，后面所有代码生成都会遵循这些规则。

实战：从设计稿到React组件

用一个真实场景演示。假设设计师在Figma里做了一个用户卡片组件，我要用Claude Code把它变成React代码。第一步，在Figma里选中该卡片frame，复制链接。第二步，在Claude Code里直接告诉它：

用这个Figma设计实现React组件：https://figma.com/design/xxx/yyy?node-id=123:456

Claude Code通过MCP调用get_design_context，拿到的不是截图，而是结构化数据：

{  "type": "FRAME",  "name": "UserCard",  "layoutMode": "VERTICAL",  "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },  "itemSpacing": 12,  "fills": [{ "type": "SOLID", "color": "var(--surface-primary)" }],  "children": [    {      "type": "FRAME",      "name": "Header",      "layoutMode": "HORIZONTAL",      "children": [        { "type": "ELLIPSE", "name": "Avatar", "width": 48, "height": 48 },        { "type": "TEXT", "name": "Username", "style": "heading/sm" }      ]    },    { "type": "TEXT", "name": "Bio", "style": "body/md", "maxLines": 3 }  ]}

如果你项目里已经有Code Connect映射，AI还知道Avatar对应你代码里的@/components/Avatar，直接import而不是重写一个。生成的代码大概长这样：

import { Avatar } from '@/components/Avatar'import styles from './UserCard.module.css'interface UserCardProps {  username: string  avatarUrl: string  bio: string}export function UserCard({ username, avatarUrl, bio }: UserCardProps) {  return (    <div className={styles.card}>      <div className={styles.header}>        <Avatar src={avatarUrl} size={48} />        <h3 className={styles.username}>{username}</h3>      </div>      <p className={styles.bio}>{bio}</p>    </div>  )}

对应的CSS module：

.card {  display: flex;  flex-direction: column;  padding: 16px;  gap: 12px;  background: var(--surface-primary);  border-radius: 12px;}.header {  display: flex;  align-items: center;  gap: 12px;}.username {  font: var(--heading-sm);}.bio {  font: var(--body-md);  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  overflow: hidden;}

注意：间距、圆角、字体全部来自设计变量，不是AI”猜”出来的。这跟截图识别生成代码完全不是一个级别。

反向操作：代码UI送回Figma

generate_figma_design是个杀手级功能。场景：你开发完了一个页面，想让设计师review，或者想把当前实现存回Figma做版本对比。在Claude Code里：

启动本地dev server，把首页UI截取到这个Figma文件：https://figma.com/design/xxx

Agent会自动：启动你的dev server → 打开浏览器 → 注入截取脚本 → 把渲染结果作为可编辑的Figma图层送到文件里。不是截图，是真实的Figma图层，设计师可以直接在上面改。这打通了一个一直缺失的闭环：设计 → 代码 → 设计review → 迭代。以前代码实现后跟设计稿的对比全靠人肉比对，现在直接overlay。

Code Connect：提升生成质量的关键

如果你团队有设计系统，强烈建议配合Code Connect使用。它的作用是告诉AI：”这个Figma组件对应我代码里的哪个组件”。没有Code Connect时，AI看到一个按钮组件会自己写一个<button>。有Code Connect后，AI知道应该用<Button variant="primary" size="md" />。设置方式：MCP Server提供了get_code_connect_suggestions工具，AI会自动扫描你的Figma组件和代码库，建议映射关系，你确认后通过send_code_connect_mappings保存。一次设置，后续所有从该设计系统生成的代码都会复用你的真实组件。

Skills：预置工作流

Figma还给不同的AI工具提供了Skills（预设的工作流指令）。比如Claude Code的Skill会告诉Agent：1. 先调用get_design_context获取设计数据2. 检查get_code_connect_map看有没有可复用的组件3. 如果有设计系统规则，先读取4. 再生成代码OpenAI Codex和Kiro也有各自的Skills。这些Skills本质是Agent层面的提示词，规范了AI使用MCP工具的顺序和方式。

踩坑记录

实际用下来几个问题：OAuth认证偶尔断连。 远程MCP Server依赖OAuth token，长时间不用会过期。重新跑一下/mcp → Authenticate就行，但在CI/CD场景里这是个麻烦。复杂嵌套组件的设计上下文太大。 一个包含几十个子组件的page-level frame，返回的context能有几十KB。直接发给LLM会吃掉大量上下文窗口。建议按组件粒度分别获取，不要一次性丢整个页面。generate_figma_design目前只支持web。 移动端app的UI截取还不支持，只能截取浏览器渲染的页面。而且只有Claude Code和Codex能用这个功能，Cursor和VS Code还不行。Code Connect需要前期投入。 如果你的设计系统有100+组件，建立映射需要不少时间。好在AI可以帮你批量建议映射，但还是要人工确认。本地Desktop MCP Server对网络有要求。 本地方案需要Figma桌面端在运行状态，如果你在SSH远程开发就用不了，这种场景只能用远程MCP Server。

跟之前方案的对比

核心差距就一个词：上下文。之前的方案给AI的信息都是碎片化的，MCP Server给的是完整的、结构化的设计上下文，加上代码库的映射关系。这才是生成质量拉开差距的根本原因。

适用场景

推荐用的场景：有设计系统的团队、组件化开发、需要频繁设计-代码同步的项目。特别是Code Connect配置好之后，ROI非常高。不太适合的场景：纯手写CSS不用设计系统的项目、设计稿极其复杂且嵌套层级深的情况、需要在移动端原生应用里使用的场景。我的判断：MCP协议正在成为AI工具集成的事实标准。Figma率先在设计-代码场景落地，后面Sketch、Adobe XD跟进是迟早的事。如果你团队在用Figma，现在就可以开始接入了，配置成本极低，收益是立竿见影的。