Figma × AI 直通代码

这一页写给主力使用 Figma 的设计师：你不需要改变工具、不需要改变设计习惯，变化发生在交接这一环——从「导出标注图给前端肉眼翻译」升级为「AI 直接读取你的设计文件生成代码」。这是 Figma 官方与 Claude（Anthropic 的 AI）在 2026 年初正式打通的双向集成，已是业界公开的主流工作流。

全景：一条双向环路

传统链路是单向有损的：设计稿 → 标注 / 切图 → 前端解读 → 代码。打通后的链路是双向环路：

时序图渲染中…

两个方向各解决一个老大难：

正向（design-to-code）：AI 编码工具读到的是设计文件的结构化数据——图层层级、自动布局约束、变量绑定——而不是一张位图。生成的代码引用的就是你定义的间距和 token，「前端量像素量出 15px 而你画的是 16px」这类翻译损耗从机制上消失。
反向（code-to-canvas）：开发到一半的真实界面（本地开发环境或线上页面），可以整页捕获送回 Figma，变成原生可编辑图层，还支持多屏按序捕获保留流程上下文。设计师直接在画布上改变体、加批注、探索方案——不用再对着截图提意见、等开发改完再看。

实践这条环路的团队报告的效果：首版代码还原度显著提升，设计⇄开发的反馈周期从数天缩短到数小时，两个角色从串行等待变成并行迭代。

对设计师意味着什么

具体到日常工作，你会感受到三个变化：

交付物就是 Figma 文件本身。不用再做标注稿、切图包；把设计文件（或某个 frame 的链接）给到前端，AI 从源头读取。你在文件里用的 Auto Layout、组件实例、变量绑定，都会成为代码生成的依据——设计文件越规范，生成的代码越准（这也让「规范作图」第一次有了立竿见影的回报）。
你的评审阵地还是 Figma。开发中的界面被送回画布后，你在最熟悉的环境里做视觉走查、改稿探索，改完前端再经同一条环路取回。
设计系统的一致性由机器守护。swift-web 的语义 token 对应到 Figma 侧就是 Variables（变量集合）：颜色、圆角、间距绑定变量后，AI 生成代码时会映射回同名的代码 token。换品牌、调色板时改变量值，稿与码同步换装。

swift-web 资源在 Figma 侧的形态

资源	形态	状态
语义 token	Figma Variables 集合（含明暗两套模式），与代码侧 token 清单同名对应	建设中
组件库	swift-web 组件的 Figma 组件库（以 20 张形态卡片为蓝本）	建设中——将借助 code-to-canvas 把框架组件的真实渲染态推入 Figma 整理成库，而非手工重画
组件↔代码映射	Figma Code Connect：把 Figma 组件与真实代码组件挂钩，AI 生成代码时直接复用 `SwButton` 等框架组件而不是重新造轮子	规划中（依赖 Figma 计划支持）

资源建设期间，Figma 轨的 design-to-code 已经完全可用：即使没有现成组件库，AI 也能从任意 Figma 稿读取结构生成代码；我们已在实际业务项目中用这条链路完成过整页还原。组件库与 Variables 就位后，生成代码的组件复用率和 token 命中率会进一步提高。

前端侧怎么接（给工程师的部分）

设计师可以跳过本节。前端在 Claude Code 中安装 Figma 官方插件即可：

claude plugin install figma@claude-plugins-official

安装后重启 Claude Code，在 /plugin 面板完成 Figma 账号授权（推荐 remote 版本，桌面版仅面向特定企业场景且需要 Dev Mode）。插件提供的 MCP 工具覆盖：读取设计上下文（组件 / 变量 / 布局 / FigJam / Make 资源）、按选中 frame 生成代码、Code Connect 对齐真实组件、把界面写回画布。

日常用法：拿到设计师给的 frame 链接后，在 Claude Code 里直接说「按这个 Figma 稿实现页面，用 swift-web 组件和语义 token」；反向则是「把当前页面发到 Figma」。结合本站组件文档与开发规范，生成结果落在框架约定内。

顺路一望：AI 还能在 Figma 里做什么

Figma Make（Figma 自家 AI）：从一段描述生成可交互原型，结果可以复制回设计画布继续加工——适合快速探索方向。
对话式改稿：社区生态里已有让 AI 直接读取、分析乃至修改 Figma 原生图层的工具，能力仍在快速演进。

这些与 swift-web 体系不冲突——它们解决「稿子怎么来」，我们的体系解决「稿子怎么变成上线代码」。如果你对「用对话直接出稿」这个方向感兴趣，下一页的 Claude Design 是目前把这件事和设计系统结合得最深的工具。