“把当前账单设置页放进这个 Figma 文件。设计师调整付款方式区域后，只更新对应代码，不要重做整页。”
Figma 双向交接系统 / 设计协作
figma-workflow
让页面进入 Figma，也让设计变更准确回到代码，减少两边各改一份造成的偏离。
适合谁
设计师与前端需要在 Figma 和代码之间持续协作的产品团队
这个 Skill 怎样工作
设计进 Figma，改动再回到对应代码。
关键区别
每次交接都有明确目标文件或选区；授权与凭据仍由用户在本地掌握。
- 01 / 输入
目标文件与可捕获页面
确认 Figma 环境、授权状态、目标文件，以及结构化的 HTML/CSS/JS。
Figma 文件 / 语义化页面 / 选区链接 - 02 / 处理
按方向完成交接
Code → Figma 推送到指定文件；Figma → Code 只处理明确选区对应的范围。
HTML capture / selection handoff - 03 / 交付
两端保留可追溯身份
设计师继续编辑目标文件，前端只更新被选中的代码范围，并说明同步状态。
可编辑设计 / 定位后的代码变更
- 2 向
- Code → Figma 与 Figma → Code
- 选区级
- 设计变更拥有明确对象身份
- 0
- 项凭据需要在对话中传递
先说明问题
设计和代码分别修改后会逐渐出现差异
Agent 生成的页面如果停在本地 HTML，设计师无法继续在 Figma 中工作；设计师在 Figma 中修改后，如果只能凭截图返工，代码又会迅速偏离。
适合
- 团队已经使用 Figma 文件和协作流程
- 把生成的 HTML 设计推送到 Figma
- 从 Figma 选区链接把明确变更同步回代码
不用于
- 更适合 Penpot、自托管或开放设计文件的场景
- 没有 Figma 文件和授权却声称已完成同步
- 要求自动代替用户完成浏览器授权
前面的原理先放到这里
让我们上手试试。
下面只用一个任务，看用户怎样提出要求、Agent 怎样判断，以及最后到底交付了什么。
演示案例 / Relay / Billing settings
把 Figma 里改过的付款方式，准确同步回现有代码。
任务背景
Relay 是一款订阅产品的账单管理页，现有页面已经可以运行。本次只把设计师在 Figma 中调整的付款方式区域同步回代码。
收到什么
可运行的账单设置页、指定 Figma 文件、设计师修改后的付款方式选区
具体做什么
先把整页送入 Figma，再只读取选区差异，将改动限制在 BillingMethod
交付什么
目标 Figma 页面、付款方式选区、对应代码差异
我会保留目标文件和选区身份。Code 到 Figma 先推送完整页面，回传时只读取付款方式选区，并把差异限制在 BillingMethod 组件。
- 同步方向
- Code → Figma → Code
- 修改对象
- BillingMethod 选区
- 代码边界
- 单个组件
Agent 怎样判断
先留下三个决定，再开始制作。
- 01
先固定目标文件
页面必须进入用户指定的 Figma 文件，不新建来路不明的副本。
- 02
用选区标识变更
付款方式区域的选区链接是本次修改的唯一对象身份。
- 03
代码只改对应组件
间距、边框和主操作更新到 BillingMethod，其余页面保持不动。
Before / After
差别不靠形容词，直接看交付怎么变。
- 回传依据
- Before对着整页截图找差异
- After读取明确的 Figma 选区
- 修改范围
- Before顺手重写周边页面
- After只更新 BillingMethod
- 同步状态
- Before两边改完都不知道谁最新
- After文件、选区和代码提交可追溯
实际产成品 / 可操作预览
Relay 的付款方式区域完成了选区级回传。
预览内容
设计页、Figma 选区和代码差异并排出现。切换视图可以看清设计师改了什么，以及代码最终落在哪个组件。
CASE OUTPUTfigma-workflow
SETTINGS / BILLING
付款与账单
当前付款方式Visa ···· 4242下次扣款：9 月 1 日
更换付款方式18 <section className="billing-method">\n19 <div>\n20 <span>当前付款方式</span>\n21 <strong>Visa ···· 4242</strong>\n22+ <small>下次扣款：9 月 1 日</small>\n23 </div>\n24~ <Button variant="outline">\n25 更换付款方式\n26 </Button>\n27 </section>
- 01页面进入目标 Figma 文件
Relay settings / Billing 已生成可编辑结构。
- 02设计师修改 BillingMethod
选区 214:88 保留为这次变更的对象身份。
- 03选区差异回到代码
只更新 BillingMethod.tsx，其他文件保持不动。
为什么能相信它
两个方向都有明确的交接对象
→Code to Figma←Selection to code
Code → Figma 交接
生成页面通过 Figma 的 HTML capture 路线进入指定空文件，而不是把截图当作可编辑设计。
- 目标是明确 Figma 文件
- 页面保留语义结构
- 主题使用 CSS 变量
- 推送前完成本地授权
Figma → Code 选区回传
设计师复制具体选区链接，代码更新只处理被选中的设计范围。
- 选区是变更身份
- 修改范围可追溯
- 不凭整页截图猜差异
- Figma 专属需求不路由到 Penpot
完整方法
用一条固定路线处理生成、推送和回传
- 01
检查环境
确认命令行、Figma MCP、Node.js 与插件状态，已有连接不重复配置。
- 02
完成授权
需要登录或授权时由用户在本地交互界面完成，不在对话中传递凭据。
- 03
准备设计页面
为 Code → Figma 路线准备明确目标文件和可捕获的语义化 HTML。
- 04
推送到 Figma
把设计发送到指定文件，并保留 CSS 变量、响应式和结构化页面关系。
- 05
从选区回传
设计变更后使用准确的选区链接更新对应代码范围，避免整页猜测。
交付边界
需要目标文件与选区，产出同步后的设计和代码
输入
- Figma 文件或选区链接
- 经过组织的 HTML/CSS/JS
- 需要同步的设计或代码范围
输出
- 进入目标 Figma 文件的设计
- 根据选区变更更新的代码
- 环境、授权与同步状态说明
核心能力Figma MCP 环境检查Code → FigmaFigma → Code选区级回传Figma/Penpot 路线选择
如何调用
项目明确使用 Figma 时调用
示例任务
检查 Figma MCP 状态，并说明把这个页面推送到指定 Figma 文件还缺什么。
调用方式
查看公开源码 $figma-workflow