设计稿不再是终点：Figma把代码直接拖进画布

设计和代码终于不再是“交接关系”。Figma 最新展示的 Code to Canvas：Codex，让代码原型可以一键变成可编辑的设计稿，改完设计还能反向更新代码。这不是演示技巧，而是设计—开发协作方式的根本变化。

最反直觉的一点：Figma 不再等设计完成

过去十年，设计和代码的关系一直是单向的：设计先行，代码实现，偏差靠沟通修。Figma 这次展示的 Codex 路线，直接把这个流程掀翻了——设计不是起点，也不是终点，而是代码运行过程中的一个“可视化状态”。

在视频里，Anna 做了一件非常反直觉的事：她没有先画设计稿，而是从本地运行的代码原型出发，通过 Codex 把整个界面“丢进” Figma 画布。结果不是截图，也不是不可编辑的导入物，而是完整的设计层级：Frame、Auto Layout、可选中的元素，全都在。

这意味着一件事：Figma 正在承认一个现实——在 AI 和前端工具高度成熟之后，代码本身已经是最准确的设计表达。设计师不再是“还原者”，而是可以直接在真实实现之上做决策的人。

真正的核心不是导入，而是 MCP

很多人看到这里会以为亮点是“代码转设计”，但真正的技术拐点，其实是 MCP（Model Context Protocol）。

Anna 在视频里解释得很直白：MCP Server 的作用，是把不同应用的“上下文”喂给 AI Agent。Figma 的 MCP，不只是告诉 AI“长什么样”，而是提供结构化设计信息——用了哪些组件、变量、布局方式。

关键在于双向：
- 从代码 → Figma：Codex 把运行中的 UI 解析成设计语义
- 从 Figma → 代码：AI 通过 MCP 拉取设计上下文，像 Dev Mode 一样理解差异，但不需要人手动对照

当她把重新设计好的过滤面板链接丢回 Codex，只用一句话提示“让代码匹配这个设计”，AI 就开始自动比对：哪些结构不一致、哪里新增了选项、是否多了 reset 行为。然后，直接改代码、跑 build。

这一步的含义很重：设计变更，第一次成为 AI 可以“理解并执行”的输入，而不是人肉翻译的需求文档。

给 AI 用的设计，开始有“写法”了

视频里有一段很容易被忽略，但对从业者极其重要的经验总结。

Anna 提到，为了让 AI 正确理解设计，设计本身需要“对机器友好”：
- 图层要命名
- 能用 Auto Layout 就用
- 设计系统里的组件和变量要真的用起来
- 清理无意义、不可见的装饰层

这听起来像老生常谈，但语境已经变了。以前这是为了“方便开发”，现在这是为了避免 AI 被噪音干扰。

她也坦诚地说了一句行业现状：目前还没办法把代码组件和设计库组件做到完全一一映射，但这是 Figma 团队正在推进的方向。

换句话说，今天你是在“给 AI 准备素材”，而不是只给人看。谁的设计更结构化，谁的团队就越早吃到 AI 协作的红利。

总结

这支视频真正释放的信号是：设计、代码、AI 正在形成一个闭环，而不是接力赛。Figma 不再只是画布，而是 AI Agent 能读、能写、能行动的上下文节点。

对从业者的 takeaway 很直接：如果你是设计师，开始把“结构”当成第一原则；如果你是工程师，别再把设计当成外部约束；如果你在做 AI 工具或流程，MCP 这种上下文协议，值得重点研究。

一个值得思考的问题是：当设计修改可以直接触发代码更新，团队里“评审”“对齐”“还原”这些环节，哪些会消失，哪些必须重做？

关键词： Figma， Codex， MCP， AI Agent， 设计与代码协作

事实核查备注： 视频发布时间：2026-03-12；演示者：Anna（Figma）；产品/概念名称：Codex、Figma MCP Server；功能描述：代码导入 Figma 画布并可反向更新代码；提及对比方案：Claude Code（part two 中介绍）