AI 现在确实非常强大，它让做原型变快了，但“做出来之后怎么一起看、一起改”，还是老问题。这次 Figma 的更新，重点是把代码原型、设计系统和项目上下文重新放回团队协作里。

这次更新，可以看出是在变化团队的工作流：想法落成一个能点、能动的原型，比以前容易多了。AI 能帮忙搭界面、补交互，几轮下来，很快就有东西可以看。不用像以前一样做一个功能都要详细规划。

现在虽然AI方案和原型很快就能做出来，但是麻烦的是后续。

比如原型在某个人的设计软件里或者在开发的 IDE 里，评审靠发链接或录屏；大家能看到结果，却不太知道它是怎么来的。想比较两个方案？开几个标签来回切。想让同事试一下？先解释怎么跑。一个本来应该很快的探索，到了协作这里，反而卡住了。

Figma 这次发布的 Build by Design，我觉得不是单纯的更新了“几个 AI 功能”，而是在整合工作流，在解决能不能把构思、试验、讨论和修改放在同一个工作画布里？

先说最直接的变化：代码原型能放到画布上一起看

这次的主角是 Code Layers。简单理解，就是把能运行的代码原型放进 Figma Design 的画布里。它不只是给你看最后长什么样，也把交互和背后的代码放进同一个协作空间。

原型可以从不同地方来：从 Figma 设计生成、从本地文件夹或 GitHub 导入，也可以通过 Figma MCP 带进来。GitHub 导入的代码层还会保持和仓库的连接。我的天！网页已经上线了？

Figma Chrome 扩展也能把线上体验带到画布里了，一会也可以看下。

这个更新看起来像是多了一种导入方式，不就是支持把代码导入画布嘛。但是我试了一下，这样相比以前的图和代码分离，真的太方便了，结合AI写代码，在一个画布里面解决，所见即所得，比如一些动画，直接获取代码来做，不用再单独再画布外面做动画等。另外就是以前丢一个链接的情况不存在了，现在，可以直接在文件里打开原型、点交互、留下反馈。整个流程基本在画布里面跑通了，团队协作效率就更高了。

以后，设计开发是不是就都可以进一个画布了，你也可以先用 AI 在 IDE 里做原型，再通过 Figma MCP 导进代码层。代码层可以直接把开发的Demo 展示出来，也可以切换为纯代码展示样式。选择元素或者对效果不满意，直接用 Figma 的 AI修改也可以。

设计改了，原型也能更好改

正常我们用AI写代码生成原型后，基本都会有些调整，不是生成完就定稿。现在你可以用 Figma agent 调整样式和交互，也可以直接在原型上评论、标注需要修改的位置让AI改，或者直接编辑代码。Figma 画布还支持为不同工作部分开多个 agent 对话。

这次的更新能解决一个我认为用AI最重要的问题，我们看了太多网上的图和视频写“AI 一句话搞定”，实际上使用大家都知道，一句话很难搞定，需要你花费很长时间来对话调整，现在可以直接在图上批注或者像Codex一样可以手动调节，反馈越具体，修改越容易得到想要的效果。

Figma 怎么说呢，不愧是给设计师用的，至少在调节上，我认为相对更方便了，至于直接改代码，还没试过，不会改...

另外就是，不管你是外部导入还是已经开发好的，使用 Extract designs 都可以将代码层中的设计转换为可编辑的 Figma图层，简单说就是在FIgma 里面就可以完成相互转换。

而且，现在设计完推进开发，开发好的代码可以直接推到分支；团队也可以通过 pull request 审查后再合并。它并没有把代码仅作为画布里面的展示，而是直接串联了整个工程流程。

Agent 能不能像设计团队一样，得看它拿到了什么上下文

这次更新除了上面的设计、代码、工作流，就是设计更关注的设计系统和设计上下文，Figma 也在扩展设计系统能提供给 agent 的信息，怎么让你AI生成的东西更符合我以往项目的规范和复用设计系统。

现在团队可以给已发布的设计库补充 guidelines，让 agent 知道哪些模式应该沿用；也可以从 GitHub 仓库或 npm package 导入代码来源，帮助它更准确地创建和编辑组件、代码层。Figma 还预览了一个集中管理设计系统的空间：System map 看库之间的关系和依赖，System check 则帮忙找缺口，比如组件没有描述或交互状态不完整。

Figma 还推出了 Specs，可以把它理解成放在画布上的项目上下文。Markdown 文件本身当然能写东西，但项目决策、参考图片、链接和其他文档分散开后，协作者和 agent 都不一定知道它们彼此有什么关系。Specs 想解决的，就是让这些背景信息和设计稿、图表、代码原型待在一起。

你可以用 Specs 整理 PRD、数据或技术材料，把外部资料交给 agent，再通过 Figma MCP 把完成的上下文送到 coding agent；也可以从规格文档出发创建代码层，边验证边补充。对设计师来说，以后你整个设计或者项目思路不仅铺在画布上，也装进Agent 脑子里了。

另外一个就是 Figma Payload ，可以建站，发布、管理数据等一条龙服务，如图所示直观便捷的设计，加数据，对于不懂复杂逻辑的人上手快。

最后就是 Figma 官方的浏览器插件

还记得我之前开发的一个插件，就是可以把任意网页提取后转到Figma 内粘贴，就能获得一个可编辑的源文件，现在Figma 自己做了，而且更准，更强，基本是 100% 提取，重点是还可以提取代码！

提取网页为可编辑设计图没啥好说的，关键是提取代码，你粘贴到Figma 后，还是带可交互的预览代码文件，可以直接在此基础上直接改！

快去体验一下吧，最后简单总结下。

Code Layers 让原型回到团队的画布上；设计系统和 Specs 给 agent 更多项目背景；MCP 和 Payload 则试着把工具之间的交接连起来。Figma 想做的不是单一环节，而是原型从想法走向交付时，那些容易断掉的上下文和协作。

当然，Figma 也说明了现阶段 Code Layers 仍处于测试阶段，当前面向轻量原型，复杂代码库支持会逐步扩展。它不是把设计师变成开发，也不意味着原型就能直接替代生产代码。更像是多了一个大家都能参与的中间工作区。