Figma接上Codex/Claude Code到底能干嘛？6个用法逐个讲清楚

配好Figma MCP之后，别只盯着"设计稿转代码"。

---

前置：装官方Remote MCP

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

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

配好后第一次调用会弹OAuth授权。读设计数据Dev seat够用；写画布需要Full seat。

重要：正式文件先复制一份"AI Draft"副本再动手。

---

6大用法总览

用法	干什么	主力工具
读	拿设计数据写代码	get_design_context、get_variable_defs
写	AI直接在画布里做设计	use_figma、generate_figma_design
Token	生成/同步设计Token	use_figma（写variables）
审	统一字体/颜色/间距	get_variable_defs + use_figma
画图	FigJam架构图/流程图	generate_diagram
其他	演示/组件库/建文件	use_figma、create_new_file

---

用法一：读设计数据写代码

设计师画好稿，开发照着实现——AI读真实的间距、颜色变量、组件结构。

核心工具：

• get_design_context：选区的结构化表示（React+Tailwind起步）
• get_variable_defs：选区用到的变量和样式
• get_screenshot：截图给多模态模型当视觉参考
• get_code_connect_map：Figma节点和代码库组件的映射
• get_metadata：稀疏大纲，超大设计先看大纲再钻取

可直接复制的指令：

这是设计稿里的登录卡片：[粘贴Figma链接]

1. 用get_variable_defs把这个选区用到的颜色、字号、间距变量列成表
2. 用get_design_context读结构，按React+Tailwind生成组件代码
3. 有Code Connect映射优先import现有组件
4. 颜色和间距引用变量名，不写死

---

用法二：让AI直接在Figma里做设计

反过来——让AI在画布里真的建东西：frame、组件、变量、auto layout。

核心工具：

• use_figma：通用写入，在Figma上跑Plugin API的JS
• generate_figma_design：把网页/代码搬进画布
• search_design_system：搜出能复用的组件/变量/样式
• 官方基础Skill：/figma-use、/figma-use-figjam、/figma-use-slides

复现技巧：先用现有组件铺骨架，效果最稳。不自创新控件，只用现有组件实例。

---

用法三：生成/同步设计Token

设计Token（色阶、语义色、间距、字号）手动建一套要花几小时。AI几分钟搞定。

可直接复制的指令：

在这个Figma文件的AI Draft里，按品牌主色 #0F4C81， 生成一套完整设计Token写进variables：

• 主色50~900共9级色阶
• 语义色：success/warning/error/info
• 间距：4/8/12/16/24/32/48
• 字号：12/14/16/20/24/32

---

用法四：审计设计稿，统一规范

设计稿用久了总会乱——同一个蓝色三个色值、圆角4/6/8混用。

先审计，列问题清单：

扫描这个frame，检查并列出不一致：

• 用了几种字体、几种字号？
• 用了几个蓝色色值？
• 圆角和间距有没有不在8px网格上的？

确认后再批量改：

按清单改：所有正文字统一成Body/Regular，所有蓝色统一成brand/primary，圆角统一8px

铁律：先列清单→你确认→再动手，别让AI闷头一把梭。

---

用法五：画架构图、流程图（FigJam）

generate_diagram 把Mermaid语法或自然语言描述变成可编辑的FigJam图。

支持：流程图、架构图、时序图、ERD、状态机、甘特图。

可直接复制的指令：

用generate_diagram在FigJam里画一张"用户登录鉴权"时序图： 浏览器→网关→鉴权服务→数据库，包含token签发和校验失败两条分支。

---

用法六：其他能力

• 做演示：Figma Slides里建幻灯片、版式、内容
• 反向生成组件库：从代码库倒推出整套Figma组件
• 建文件：create_new_file新建Design/FigJam/Slides文件
• 社区Skill：无障碍规范、JSON转组件、多agent并行

---

替代方案

方案	特点	适用
Figma官方MCP	官方维护，功能最全	生产环境
GLips/Figma-Context-MCP	15k+⭐开源，REST API	免费用户
bernaferrari/FigmaToCode	5k+⭐插件，一键转代码	CLI懒人
MagicPath	AI原生画布，画布↔代码双向同步	个人/小团队

---

两条铁律

1. 正式文件先开AI Draft副本
2. 让AI先列清单再动手

---

关键词：Figma MCP, Codex, Claude Code, 设计系统, 设计Token