Vol.06 Figma × MCP 2026 · 更新中

让 Figma
长出手脚

过去：你在 Figma 画好图，跨过一道墙交给开发；中间走丢的细节、对不上的命名、复制不到位的颜色——都是设计师的暗痛。 MCP 来了之后，Figma 不再只是一张图，它能"读、写、连"——读懂代码、写回设计、连接系统。

这是一本针对 B 端设计师 写的实战手册。你不用学完所有 MCP 协议细节——只要看懂 8 种能力可以让你做什么，下次就能立刻上手。

我们不讲"什么是 MCP"的官方定义，只讲 "你用它来做什么"——每种能力配一个真实场景 + 一段可复制的 prompt。

读完它，你会知道：设计师和 AI 之间的那条断带，是怎么被一根根连起来的。

vol06

topicFigma × MCP

能力8 种

阅读时长12 min

更新持续

面向设计师 / TL

S1 · WHY MCP

设计师与 AI 之间，
缺的是一座桥

AI 能写代码、能画图，但它和 Figma 之间一直隔了一层——你要先截图、复制 prompt、然后期待它"理解"。MCP（Model Context Protocol）做的就是把这道墙拆掉：让 AI 直接"读" Figma 的真实结构、"写"回 Figma、"调用" Figma 里所有能力。

没有 MCP 之前

设计与 AI 是断的

截图丢给 AI，它"猜"你画的是什么
颜色、字号、间距全靠人工拷贝
组件命名、变量结构，AI 完全看不到
设计改了一处，代码要手动对一遍

有了 MCP 之后

设计与 AI 是通的

AI 直接读 Figma 节点的真实属性
设计 token、组件、变量结构一并可见
AI 能反向写 Figma：建变量、改组件、整理 Auto Layout
设计 ↔ 代码 ↔ 文档 ↔ 流程图全部双向同步

S2 · 8 CAPABILITIES

Figma MCP 的八根手指

把当前可用的 MCP 能力分成三组：读写互通（设计↔代码）、跨形态生成（网页/文字 → Figma）、资源连接（设计系统 / 素材 / 映射）。下面是 8 张能力卡——一张图一句话，快速建立认知地图。

№ 01 · READ

📖

读 Figma → 转代码

给链接 + node id，AI 拿到设计上下文、截图、参考代码、素材 URL，直接落到项目里。

设计 → 代码

№ 02 · WRITE

✏️

写入 / 修改 Figma

创建 Frame、组件、变量、样式、文本、图片、Auto Layout——设计系统也能改。

代码 → 设计

№ 03 · WEB→FIGMA

🌐

网页转 Figma

本地 dev server 或线上网页，捕获成可编辑 Figma 文件 —— 也可以作为像素参考重建干净稿。

已有产品 → 设计稿

№ 04 · LIBRARY

🧩

设计系统资源查找

搜索当前文件可用的组件、变量、颜色、样式、library —— 优先复用，不重新画。

复用 > 新建

№ 05 · FIGJAM

📊

FigJam 图表生成

Mermaid 语法直接生成：流程图、决策树、时序图、状态图、甘特图、ER 图。

文字 → 图

№ 06 · SLIDES

🎞️

Figma Slides 演示

给主题、目标、受众、大纲，AI 一次性生成可编辑的幻灯片 deck。

大纲 → PPT

№ 07 · ASSET

🖼

图片素材上传

PNG / JPG / GIF / WebP 上传到 Figma 文件，或直接填充到指定节点里。

素材 → 节点

№ 08 · CODE CONNECT

🔗

Code Connect 映射

把 Figma 组件与代码组件绑定 —— AI 也能先给映射建议，你确认后再保存。

组件 ↔ 代码

MAP · 全景关系图

8 根手指，一张拓扑

Figma 文件是中心节点：5 种输入（代码/网页/Mermaid/大纲/素材）汇入它，2 个对外通路（设计系统、Code Connect）双向流动。下面这张 SVG 是关系预览；底下那段 Mermaid 可以直接交给挂了 Figma MCP 的 AI —— 它会在你打开的 FigJam 文件里画出来。

flowchart TB classDef cap fill:#fff,stroke:#02162D,stroke-width:1.5px classDef hub fill:#3A34FF,color:#fff,stroke:#02162D,stroke-width:2px classDef br fill:#ebe4d4,stroke:#02162D,stroke-width:1.5px CODE[代码项目]:::cap WEB[网页 / URL]:::cap MM[Mermaid 语法]:::cap OL[大纲 / 主题]:::cap IMG[图片素材]:::cap SYS[设计系统]:::br CC[Code Connect]:::br FIGMA(Figma 文件):::hub CODE <-- "N°01 READ / N°02 WRITE" --> FIGMA FIGMA <-- "N°04 LIBRARY" --> SYS FIGMA <-- "N°08 CODE CONNECT" --> CC WEB -- "N°03 WEB→FIGMA" --> FIGMA MM -- "N°05 FIGJAM" --> FIGMA OL -- "N°06 SLIDES" --> FIGMA IMG -- "N°07 ASSET" --> FIGMA

怎么用这段 Mermaid？

1️⃣ 在 Figma 里新建（或打开）一个 FigJam 文件 ——这是流程图要落到的地方。

2️⃣ 打开挂了 Figma MCP 的 AI 客户端（Claude Desktop / Cursor）。

3️⃣ 把左边整段 Mermaid 源码贴进去，加一句话："把这段 Mermaid 在我打开的 FigJam 文件里画出来。"

4️⃣ 等 30 秒，FigJam 里就出现一张可编辑的流程图。改文字、改颜色、加节点，全部用原生 Figma 体验。

💡 这本手册的 S2 全景图 就是用这种方式生成的——一次性把"教学"和"演示"做完。

S3 · READ & WRITE

第一组 · 读写互通

这是 MCP 最核心的一对能力——从 Figma 读到代码，再 从代码反写回 Figma。一个闭环就能让"设计稿改了，代码自动跟上"和"代码升级了，设计稿同步刷新"两件原本痛苦的事变得自然。

№01

读 Figma → 转代码

DESIGN → CODE

能做什么：给 AI 一个 Figma 链接和 node id，它会拿到设计上下文、截图、参考代码、素材 URL，然后帮你落到项目代码里。

不再靠 AI 截图猜想 —— 它直接读到真实结构
颜色 / 字号 / 间距 / 组件名一并拿到
素材的 URL 也能直接拿，不用手动导出

读这个 Figma 节点： https://figma.com/file/xxx?node-id=123:456 按我们项目的 React + Tailwind 栈，把它落成可用组件，颜色/间距用 Design Token 引用，不要硬编码。

设计师

不再担心"我的颜色被开发改成了别的色"

开发

不用一像素一像素对设计稿，AI 已经标准化产出

№02

写入 / 修改 Figma 文件

CODE → DESIGN

能做什么：让 AI 反向操作 Figma —— 创建 / 编辑 Page、Frame、组件、变量、样式、文本、图片、Auto Layout，甚至帮你建一套设计系统。

批量建变量 / token —— 不用手动一个个填
整理 Auto Layout 嵌套混乱的旧文件
把代码里已有的色板、字号体系一键回灌到 Figma

把项目 tailwind.config.js 里的颜色系统（primary / surface / text / state）回写到当前 Figma 文件的 Variables 里，建一个 "Brand · v2" collection，按 light / dark 两个 mode 组织。

设计师

代码已经升级了 token，你的 Figma 一键跟上

开发

不用再"催设计师同步"——你自己就能推

S4 · TRANSFORM

第二组 · 跨形态生成

这一组的共性是 "输入一种形态，输出 Figma 形态" —— 网页能变 Figma、Mermaid 能变流程图、大纲能变 PPT。它解决的是设计师常被卡住的"我手上只有这个，但我要做那个"。

№03

网页 → Figma

WEB → DESIGN

能做什么：把本地 dev server 或线上网页捕获成 Figma 文件 —— 可编辑、可拆分；也可以作为像素参考重建更干净的设计稿。

老产品没有源文件？爬一遍直接拿可编辑稿
看竞品某个页面好看？秒级抓回来研究
设计稿丢了？线上线下产品都能还原

把 https://example.com/dashboard 这个页面转成 Figma 文件，按 Auto Layout 重构，所有色值统一到我们的 Brand Variables。

№05

Mermaid → FigJam 图表

TEXT → DIAGRAM

能做什么：用 Mermaid 语法描述结构，AI 直接在 FigJam 里生成 —— 流程图、决策树、时序图、状态图、甘特图、ER 图都能画。

评审会前 5 分钟画完业务流程
用户路径、状态机这种"非画不可"的图秒级出
用文字版本作为单一信源，图能跟着改

在 FigJam 里画一个用户注册流程图：进入页 → 输入手机号 → 验证码 → 设置密码 → 完成分支：手机号已存在 → 跳登录异常：验证码错误 3 次 → 锁定 1 小时

№06

Figma Slides 演示文稿

OUTLINE → SLIDES

能做什么：给 AI 主题、目标、受众和大纲，它一次性生成可编辑的幻灯片 deck —— 不是一张图，是一套页。

设计评审 / 项目复盘 / 入职分享一气呵成
大纲改一句话，整个 deck 跟着调
用 Figma 风格，比 PPT/Keynote 更对设计师胃口

主题：B 端设计师怎么用 AI 目标：让团队 30 分钟内理解 Vibe Coding 受众：5 年+ 设计师大纲：①痛点 ②MCP 是什么 ③8 种能力 ④实战案例 ⑤上手起步生成一份 12 页可编辑的 Figma Slides。

№07

上传图片素材到 Figma

ASSET → NODE

能做什么：PNG / JPG / GIF / WebP 上传到 Figma 文件里，或者直接填充进指定节点的 Image Fill。

批量替换占位图 —— 不用一张一张拖
从云端 / 桌面 / 网址三种来源都行
素材命名、节点定位 AI 自己搞定

把这 12 张产品图（在 /Users/me/Desktop/imgs）按文件名顺序填入 Figma 文件里的 "商品卡片 × 12" 这个 Frame 中各卡片的封面位置。

S5 · CONNECT

第三组 · 资源与连接

这一组的共性是 "让设计、系统、代码不再分离" —— 你已有的资源能被找到，组件和代码能被绑定。这一组做好，你才能真的说"我们的设计系统活了"。

№04

查找设计系统资源

LIBRARY SEARCH

能做什么：AI 先搜当前文件可用的组件、变量、颜色、样式、Library —— 然后 优先复用已有的，避免重新画一遍。

"我的设计系统里有没有 XX 组件？"立刻知道
新页面默认走 token 和 component，不走野生颜色
设计系统的"活跃度"会被 AI 自然维持

我要做一个"商家结算"的页面，先搜我们这个文件里所有"金额输入框 / 结算汇总卡 / 单据列表行" 相关组件，列出来给我，优先复用，不要重新画。

№08

Code Connect 映射

COMPONENT MAPPING

能做什么：把 Figma 组件和代码组件建立映射 —— 也可以先让 AI 给映射建议，你确认后再保存。

开发拷代码时能看到"这个 Figma 组件 = 哪个 React 组件"
设计系统和代码组件库真正双绑
新组件入库，AI 帮你判断"是否已有同款"

扫一下我们 Figma 这一套"按钮"组件，和 src/components/Button 下的 .tsx 文件做映射，生成 .figma.tsx Code Connect 配置，拿不准的让我确认。

S6 · GETTING STARTED

第一次跑通 · 5 分钟

你不需要懂 MCP 协议是怎么写的，只要会"安装 → 配置 → 用一次"。下面是 5 步起手指南 —— 跑完它，你下午就能用 Figma MCP 解决一个真实问题。

装一个支持 MCP 的 AI 客户端

推荐 Claude Desktop（最丝滑）或 Cursor（设计 + 代码双场景都顺）。新版本默认支持 MCP server 配置。

开 Figma 的 Dev Mode + MCP Server

在 Figma 桌面端：Preferences → Enable Dev Mode MCP Server。开启后，它会在本地起一个 server，让 AI 客户端能"看到"你的 Figma。

在 AI 客户端里挂上 Figma MCP

Claude Desktop / Cursor 的设置里找 MCP Servers，把 Figma 的 server 地址填进去（一般是 http://localhost:3845）。重启客户端。

第一次对话 · 让 AI 读一个组件

打开任意 Figma 文件，选中一个组件，复制它的 link（含 node-id）。回到 AI 客户端，问它："这个 Figma 节点是什么？帮我转成 React 组件。"

如果它能正确回答出 组件名 + 颜色 + 间距 —— 说明 MCP 跑通了 ✅。

试一次"反向"动作

让 AI 在你的 Figma 文件里建一个 Variables Collection（比如 Brand · v1），定义 3-4 个颜色变量。

回 Figma 看一下 —— 如果 Variables 真的出现了，说明 读写双向都通了。下面所有能力，本质上都是这两件事的组合。

S7 · CASE STUDY

一个完整工作流 · 改一个组件

最后给你一个真实场景：产品要把"主按钮"从 8px 圆角改成 6px，并且加一个 loading 状态。下面是用 MCP 4 步完成全闭环——设计稿、组件库、代码、Code Connect 全部同步。

STEP 01

读现有 Button

能力 №01 READ

→

STEP 02

改 Figma 主组件

能力 №02 WRITE

→

STEP 03

同步代码组件

能力 №01 + №08

→

STEP 04

回写 Code Connect

能力 №08

①

读现有 Button

先搞清楚它是什么

选中 Button 组件，复制 link 给 AI。AI 立刻告诉你：当前圆角 8px、有 default / hover / disabled 三个状态，还告诉你哪些代码组件已经映射了。

读这个 Button 主组件： [Figma link] 告诉我当前所有状态、变量、Code Connect 映射情况。

②

改 Figma 主组件

圆角 8 → 6，加 loading 状态

让 AI 直接改 Figma —— 修圆角 token、复制一个 default 状态命名为 loading、加上 spinner 图标。所有引用这个主组件的实例自动同步。

把 Button 主组件的圆角从 8 改成 6，复制 default 状态命名为 loading，左侧加一个 16px 的旋转 icon，其他视觉保持不变。

③

同步代码组件

改 Button.tsx

AI 顺着 Code Connect 找到 src/components/Button/Button.tsx，把 borderRadius: 8 改成 6，加一个 loading prop 和 spinner UI。

根据刚才 Figma 的改动，同步更新 src/components/Button/Button.tsx： borderRadius 改 6，新增 loading prop（boolean）， loading 为 true 时左侧显示 spinner、禁用点击。

④