Figma画布里直接写代码，是要让设计师和程序员“双向奔赴”？

周三更新的Figma，突然把代码编辑器塞进了设计画布。这波操作让设计师群里炸了锅——难道以后连切图都不用，直接原地写生产级页面了？先别急，Figma的首席产品官山下侑希说得挺直白：“在多人画布上，你根本不用在乎代码质量。”

一句话道出这次更新的核心逻辑：Figma要造的，不是又一个代码工具，而是让设计师、产品经理和程序员能一起“瞎折腾”的思路场。这次一口气端上来的功能，可以拆成三层——一个代码层，一套动画系统，还有一个AI技能和插件市场。

代码层：不是写代码，是“画”逻辑

所谓代码层，并不是在Figma里装个VSCode。它更像是直接在协作画布上粘了一卷代码胶带，团队可以把GitHub仓库克隆过来，从代码里抓取流程，丢到设计层测试。产品想加个新界面？设计师画个草图，程序员直接拖一串流程代码进来验证交互；发现不对劲，马上调整设计，不用等全套UI稿输出后再碰头。

山下侑希把这种模式称为“空间化的快速探索”。他举例说，如果一个功能需要尝试几个完全不同的方向，传统流水线是串行的：先出设计稿，再写前端演示，然后被评审毙掉，再循环。现在所有人都在一个画布里，代码不用干净，跑通就行，甚至报错都无所谓。“你可以用空间化的方式做这些事，我们不希望这个功能只改变设计师的行为，希望工程师和PM也一样。”他说。

Figma这步棋其实铺垫了很久。去年他们推出AI驱动的原型工具Figma Make，后来又接入Claude Code和Codex，专门用来优化设计稿和代码之间的“交接材料”。现在代码层相当于把这两个世界焊在了一起——设计变更时，代码层里的流程可以同步更新；代码逻辑调整后，对应的原型也能即时反映。换句话说，画布变成了一个能跑“烂代码”的沙盒。

动画和着色器：从外挂到原生

Figma终于把动画和3D变换收进了自家工具箱。以前想在Figma里做个按钮的微交互，或者页面切换的过渡效果，得先到After Effects、Principle这些软件里做好，再转成Figma能读的代码丢进来。过程折磨，而且没法实时联动——设计稿任何改动，动画都得重录一遍。

现在原生支持运动（motion）、过渡和3D变换，设计师直接在画布上就能拉出旋转、缩放、淡入淡出这些效果，还能设置动效的时长和缓动曲线。更绝的是，这些动画资产现在可以用AI生成。比如跟AI说“做一个卡片弹入的弹性动画，带轻微阴影变化”，它就能吐出一组可直接用的动效层。

同时登场的还有AI着色器（Shader）支持。着色器原本是游戏和3D渲染里的概念，简单说就是在GPU上跑的小程序，能产生各种炫彩渐变、噪点纹理、液态效果。Figma把它搬进设计平面，设计师用自然语言描述“想要一个水波纹荡漾的填充底纹”，AI就能生成对应的着色器代码贴到画布里。这对做品牌视觉和动态背景的设计师来说，等于突然多了个魔法画笔。

AI能力三层堆叠：助手、工作流、插件

Figma在AI上的堆叠颇有层次感。第一层是AI助手技能的“用户自定义”。你可以写一段文字提示，创建一套可重复使用的技能，让AI代理去完成。比如设定“把选中的图层自动替换成国际版适配尺寸，并标注翻译key”，之后只要选中图层调用这个技能，AI就会按流程处理。而且现在能连接Notion、Granola、Excel、GitHub等外部工具，或者直接给AI附上文件，让它理解上下文后干活。

第二层是Weavy工作流集成。去年Figma收购了节点式AI工具Weavy——它的本事是让设计师把任务拆成节点，在不同AI模型间跑流程，对比输出结果。今年晚些时候，Figma会在应用内直接生成Weavy工作流，不用在两款软件之间跳转。这相当于给AI助手加了条“生产线”，比如先让Claude生成文案，再让GPT‑4o提取视觉元素，最后用自己的模型排版，全自动跑完。

第三层是自定义AI插件。用户用文字提示就能造出像布局生成器、向量路径追踪器这类专用工具。以前没点代码功底根本不敢想的事，现在一句话搞定。比如“做一个自动把所有圆角统一改为8px并检查对比度的插件”，Figma就会扔给你一个可用的脚本模块。这个功能不只是省时间，而是让设计师从“操作工具的人”变成“制造工具的人”。

一图总结：Figma这次更新的三层结构

如果用一张图来看这次更新，最底层是那个能跑“不干净代码”的网络画布，中间是AI生成的动画与着色器材质，上层则是可定制的AI代理技能、工作流和插件。三层互相咬合：代码层负责逻辑交互，动画层提供感官反馈，AI层则把生产细节自动化。设计师不用纠结哪个软件是神器，因为所有东西都在同一个白板上。

Figma首席产品官的这句话或许是最直白的注脚：“这里根本不在乎代码质量。”他在意的，是团队能不能用最低成本快速试错，在打磨出完美稿件前，先把所有不靠谱的方向都碰一遍。代码层就是一个不怕翻车的实验场，动画和AI则是加速这个碰撞过程的催化剂。

回过头看，Figma从在线UI设计工具走到今天，越来越像一个异类——它不想让你闷头做好图再交付，而是想让所有人挤在画布上，把灵光一现的烂Demo直接拽出来，边摇头边修改。这次的更新，不过是把这条路的边界又往外推了一下。