Figma Make 终于成了真正的设计转代码工具

简而言之：Figma Make 现在交付的代码，前端工程师不会第一眼就删掉。这才是设计师争相讨论它的真正原因，也远比又一次性能提升重要得多。

6 月 18 日，Figma 发布了一次生产级的 Make 更新。头条不是"更快了"，头条是还原度。Make 现在导出的组件已与你的真实设计 token 和 Code Connect 映射绑定，而不再是过去那种松散的、一次性的标记代码。

这个差别，就是噱头和工具之间的分界线。一次性代码会被扔掉，引用你系统的代码会被合并进去。

大家都在晒的 diff

在 figma.com 上查看

这次更新能破圈，是因为大家都在晒真实结果。@figma 的公告帖在几天内突破了约 9200 次转发，评论区全是各团队拿自己系统跑出来的 Figma 转 React 前后对比 diff。

这才是值得注意的信号。最响亮的声音不是 Figma 的营销文案，而是工程师们晒出前后对比 diff，并且没有在骂。当怀疑者沉默了，说明什么东西真的变了。

设计师听"设计转代码"的承诺听了十年。这个承诺每次碰到真实代码库都会死掉，因为输出内容完全无视了代码库所依赖的系统。这一次，diff 在接触后活下来了。

究竟改变了什么（token 和 Code Connect，而非原始十六进制和标记）

在 figma.com/make 上查看

旧版 Make 读取一个 frame，然后描述它所看到的。它看到一个蓝色按钮，就写 #2D7FF9。它看到内边距，就写一个像素值。结果看起来没错，却和任何东西都没有关联。

新版 Make 读取同一个 frame，并将其对照你的系统进行解析。蓝色按钮编译为一个 token 引用，而不是一个冻结的十六进制值。组件编译为你实际的 Code Connect 映射，因此它指向你代码库中真实存在的组件，而不是凭空造一个新的。

一句话概括整个转变：导出功能不再描述像素，开始引用你的唯一真实来源。

为什么这在实践中很重要：token 引用意味着你的代码可以免费继承主题变更。修改 token，每一次导出都会跟上。Code Connect 映射意味着导出会复用你团队已经在维护的 Button，而不是生成一个几乎重复的副本，然后在有人动它的那一刻开始偏离。

旧版 Make 输出与 6 月 18 日更新对比

直接看对比，因为对比就是论据。

右栏是唯一能出现在 pull request 里的东西。左栏就是为什么在此之前没有人信任"设计转代码"。

哪些地方仍然需要你

Make 构建骨架，不构建大脑。过度吹捧这条线对谁都没好处，所以这里是 6 月 18 日更新能为你做的事情的真实边界。

布局、token 和静态组件脚手架输出干净。所有需要判断的事情仍然需要你。导出功能不知道加载状态应该是什么感觉，出错时应该发生什么，或者你的空状态应该引导用户还是道个歉。

无障碍访问值得单独说一行。Make 可以添加 alt 属性和近似语义的标签，但它无法决定焦点顺序、宣告一个实时区域，或者理解你的模态框需要锁定焦点并在关闭后归还它。这些都是关于人如何在你的界面中移动的判断，而判断不在导出功能里。

真实数据是另一个悄无声息的杀手。一个 frame 展示一行完美的数据。生产环境展示的是名字长达 40 个字符的用户、值为 null 的价格，以及第一天就是空的列表。

Make 搭建快乐路径的脚手架。现实由你来处理。

本周就能跑起来的理性 Figma Make 介入工作流

你不需要重建你的流程。你需要在正确的节点引入 Make，并在衔接处保留人工介入。下面是一个本周就能在真实组件上运行的版本。

1. 先把你的 token 和 Code Connect 真正映射好。这是不那么光鲜的前提条件。Make 的质量取决于它所引用的系统，所以如果你的 token 命名了一半，Code Connect 覆盖率又很低，先修好这些，再去怪导出结果。
2. 在一个构建良好的组件上运行 Make，而不是整个屏幕。选一个结构清晰、token 关系干净的东西。你在测试还原度，不是在祈求奇迹。
3. 像代码审阅者一样阅读 diff，而不是粉丝。确认它解析到了 token 引用，并映射到了你真实的组件。如果它发明了一个十六进制值或一个重复组件，那个 frame 就没有系统化。修源头。
4. 把脚手架交给工程师，并明确标注状态、数据和无障碍访问工作是他们的职责。导出结果是起始结构，决策才是工作本身。
5. 把学到的东西反馈给系统。Make 每一处猜测，都是你的 token 或 Code Connect 映射存在歧义的地方。收紧它们，下一次导出就会更好。系统会形成复利。

这个模式是人在环路中，而不是人被排除在外。Make 移除了繁琐的翻译步骤，但它没有移除思考。

这对你的交付物意味着什么

在 atlassian.design 上查看

这悄悄改变了设计师对"完成"的定义。多年来，交付物是一个像素完美的 frame，以及一个礼貌的期望，希望工程那边能对得上。这种对接从来都是有损的。

现在，frame 更接近于合同了。如果你的设计引用了真实的 token，你的组件通过 Code Connect 映射，那么导出结果会以更少的偏差将你的意图带入代码。交接不再是翻译，而是转移。

这提升了系统工作的价值，降低了漂亮截图的价值。接下来一年胜出的设计师，是那些文件结构化程度足够高、能让 Make 产出干净输出的人。一个混乱的文件会更快产出混乱的代码，而一个有纪律的系统会产出可继承的代码。

所以真正的升级不是 AI，而是终于要好好命名 token、映射组件的那种压力。Make 只是让这种纪律立刻得到回报，而不是将来某天。

常见问题

6 月 18 日的更新改变了设计师最常问的关于 Figma Make 问题的真实答案。

Figma Make 现在能写出生产级别的 React 了吗？

更接近了，但还不能独立完成。这次更新产出的 React 与你的真实 token 和 Code Connect 映射绑定，是扎实的、值得保留的。它仍然把状态、无障碍访问和真实数据留给你处理。把它当作一份扎实的初稿，而不是完成的功能。

什么是 Code Connect，它为什么对导出结果很重要？

Code Connect 将你 Figma 文件中的组件映射到代码库中的真实组件。这是 Make 凭空发明一个新按钮，和 Make 复用你团队已经在维护的 Button 之间的区别。导出结果指向你的唯一真实来源，而不是生成一个副本。

Make 使用我的设计 token，还是自己发明值？

它使用你的 token，这是 6 月 18 日变更的核心。旧版导出将原始十六进制直接硬编码进标记中。这次更新将值解析为 token 引用，所以你的代码可以继承主题变更，而不是冻结一个快照。输出中出现原始十六进制，意味着那个 frame 从未被映射到 token。

Make 在哪些方面仍然不足？

有五个地方仍然需要人工，和上面表格列出的一样：

• 状态逻辑：加载、错误、空状态、成功
• 交互和动效行为
• 超出显而易见范围的无障碍访问
• 真实数据、边缘情况和长字符串
• 何时复用组件，何时新建

Make 处理布局、token 映射的样式和静态脚手架。判断性决策才是真正工作所在。

我本周应该改变我的工作流吗？

是的，做一个小小的改变。在单个干净的组件上运行 Make，像工程师一样审阅 diff，并用它揭示的东西来收紧你的 token 和 Code Connect 覆盖率。不要一夜之间把整个团队切换到 AI 交接。

结语

Figma Make 于 6 月 18 日跨越了从 demo 到工具的界线。证明不是 @figma 公告帖上约 9200 次转发，而是工程师在帖子下面贴出的生产级 diff，而且没有删掉。

机制很简单。Make 不再用原始十六进制和一次性标记描述像素，开始引用你的真实 token 和 Code Connect 映射。这就是你会扔掉的代码和你会合并的代码之间的区别。

不要对你的团队过度吹捧它。Make 构建骨架。状态、交互、无障碍访问和边缘情况仍然是你的工作，永远都是。本周最聪明的举措，是把这次更新当作一个契机，终于把你的 token 和 Code Connect 搞对，因为一个干净的系统才是让这个功能从玩具变成真正可以交付的工具的原因。