Figma 正在悄悄改写设计师的边界：Code Layers 让“不会写代码”失效了

在 Config 2025 上，Figma 做了一件很“危险”的事：把原本属于开发者的能力，拆碎成“图层级别”的代码，直接塞进设计工具里。Code Layers 不只是更酷的交互，而是在重新定义设计、原型和产品构建的分工方式。

真正反直觉的点：Figma 没有让你“做 App”，而是让每一层都会思考

很多人第一次听到 Code Layers，会下意识把它和 Figma Make 画等号：是不是又一个“AI 帮你做网站”的功能？但 Lauren 在视频里一开始就把这条线划得很清楚——Make 关注的是“整个应用”，而 Code Layers 只盯着一件事：单个图层。

这听起来像是降级，实际上却是更激进的选择。因为设计里最难被穷举的，恰恰不是页面结构，而是那些“只差一点点”的细节：动画节奏、状态变化、边界行为。Code Layers 让这些原本只能靠 preset interactions 硬凑的效果，直接变成可生成、可修改、可复用的代码单元。

一句话总结这个反直觉的判断：“Figma 不是在教设计师写代码，而是在让代码学会尊重设计图层。”

从 200ms 淡入到满屏花雨：AI 是怎么介入设计细节的

视频前半段其实很“克制”。Lauren 先演示了完全不靠 Code Layers，也能用预设交互做到的效果：淡入、Hover 放大、200ms 延迟——这些大家都熟。

转折点发生在她按下 E，拉出一个新图层，并用一句自然语言描述：“create a floral confetti that spans the width of the layer using flower emojis”。这一刻，Code Layers 的本质才显现出来：你不是在配置参数，而是在表达意图。

更关键的是，这些生成的代码并不是黑箱。你能看到实时生成的代码、能改速度、数量，还能把 Figma 里的变量直接绑定进去。甚至当效果不符合预期时，你不是推翻重来，而是继续对 AI 说：让花掉满整个图层。

这里隐藏的价值在于：设计师第一次可以用“对话 + 变量”的方式，精细控制动态系统，而不是在交互面板里反复试错。

当交互开始“越界”：预设能力的天花板被捅破了

真正让 Code Layers 显得危险的，是后面的两个例子。

第一个，是用现有设计素材生成“会长出来的花”。Hover 出现、弹跳、离开消失——理论上用预设也能做，但 Lauren 说了一句很实在的话：能做，不代表值得做。配置成本和维护复杂度，往往才是设计系统的隐形杀手。

第二个例子直接越界：DIY 花束编辑器。可拖拽、可复制、可旋转、支持撤销和重置。这里她明确点出一个限制：Figma 现有的交互，无法拖出“副本”，也无法处理超出画框的状态。

而 Code Layers 的解法，本质上是在画布里跑了一个小型应用逻辑。更重要的是，Lauren 强调自己“不是开发者”，但她依然能读懂、微调代码尺寸、布局，甚至让真正的开发者接手深化。

这不是取代谁，而是在模糊那条原本泾渭分明的边界。

你以为这是一次性魔法？不，这是可回滚、可组件化的

很多设计师看到这里，心里都会冒出一个恐惧：那我原来的设计怎么办？是不是一旦进了 Code Layers，就回不去了？

Figma 给出的答案非常工程化：可以复制原始设计，也可以一键 restore，直接移除代码层。更重要的是，这些 Code Layers 可以被做成组件，在不同页面复用，像对待普通设计组件一样对待。

这一步，其实暴露了 Figma 的长期野心：代码不再是设计的终点，而是设计系统的一部分。你编辑的不只是视觉规范，还有行为规范。

总结

Code Layers 最值得 AI 从业者警惕的，不是它做了多炫的动画，而是它重新定义了“谁可以构建交互系统”。当自然语言、设计变量和可读代码被压缩进一个图层里，原本分属设计、原型、前端的工作开始重叠。

对个人来说，这意味着你可以用更低成本验证复杂交互；对团队来说，这可能会倒逼角色重新分工。一个值得思考的问题是：当设计工具开始承载逻辑，产品早期探索还需要多早引入工程资源？也许，下一次你打开 Figma，不只是为了画界面。

关键词： Figma， Code Layers， AI设计工具， 交互原型， 低代码

事实核查备注： 需要核查：Config 2025 发布时间；Figma Make 与 Code Layers 的官方定位表述；Lauren 是否为视频中唯一出镜讲解者；视频是否明确展示变量绑定与 restore original designs 功能。