Figma 的巧思：让代码和动效留在同一张画布上

Figma 在 6 月 24 日发布 Config 2026 更新，把 code layers、时间线动效、shader 和 AI 生成插件都放进同一张协作画布。1

过去，设计师在画布里试方案，动效师在另一套工具里调时间，工程师再把结果翻译成代码。Figma 这次做的事情，重点不在于多加几个 AI 按钮，而是改了材料的归属：代码和时间，都可以成为设计过程中能被看见、复制、评论和继续修改的对象。

Figma 的 code layer 可以从工具栏添加，也可以由已有 frame 转换而来，还能让 Figma agent 直接生成。用户也可以导入 GitHub 仓库或本地文件夹，把已有代码带进画布。2

进入画布之后，代码的行为像一个普通设计层：可以复制出多个版本，放在一起比较；可以移动、缩放，直接观察交互的感觉；团队成员可以在同一个文件里评论，继续对同一层发出修改要求。原始版本会被保留，新的方向不会覆盖掉旧的探索。2

Figma 的设计判断是：产品探索本来就不是一条线。设计师复制 frame，是为了同时看几种方向；那代码也应该能用同一种方式被复制和比较。TechCrunch 引述 Figma 首席产品官 Yuhki Yamashita 的说法，code layer 的重点是快速探索，团队在这个阶段「不太在意代码质量」，更在意能不能迅速试出不同方向。3

这解决的是一个经常被低估的痛点：很多设计决策在写进生产代码之前，其实还没有被真正体验过。静态稿能说明布局，代码原型才能暴露状态切换、反馈和操作手感。把代码放回协作画布，产品经理、设计师和工程师可以先围绕「哪个方向更值得做」讨论，而不是先围绕「这段代码该由谁维护」争论。

代价也很明确。code layer 现在仍是逐步开放的能力，官方说明它在 6 月发布时处于封闭测试阶段。它更适合探索、比较和形成共识，不能因为能导入仓库，就把画布里的版本误当成生产代码的唯一来源。2

Figma Motion 直接在设计画布旁提供时间线。设计师可以拖动图层调整时序，用关键帧分别控制位置、缩放、旋转和透明度，也可以叠加预设样式，并在时间线上留下评论。4

更有意思的是，Figma 没有把动效只做成某个文件里的一次性演示。动画可以跟随组件进入其他画面，motion variables 还能为缓动和时序定义不同模式。这样一来，动效和颜色、字体一样，成为设计系统里可以复用和切换的部分。4

这背后的取舍是把「时间」当成设计属性来管理。以前工程师拿到的往往是一段视频或几张关键帧截图，具体时长、缓动和触发关系要靠猜。现在 Dev Mode 可以直接查看完整时间线，并复制 CSS、JSON、React 或 Motion.dev 代码；动效也能导出为 MP4、GIF、SVG 和 WebM。45

这会让动效更容易进入团队流程，也会带来新的约束。只要动效被做成组件、变量和模式，就会获得一致性和复用能力，同时也更容易被团队规范化。对于需要强烈个性的品牌动效，统一的 motion system 可能反过来限制探索；对于产品界面，它则能减少每个页面重新调一遍的重复工作。

Figma 当前把 Motion 标为开放测试，Starter 用户的导出能力有限，完整的设计系统集成和 Motion agent 只在付费计划提供；自定义动画样式和 3D 变换也仍有部分能力在后续开放。45

Figma 这次更新值得看的地方，不是「AI 能不能把页面做出来」，而是页面还没决定时，团队有没有一个能共同试错的地方。code layer 把代码变成可以复制和比较的探索材料，Motion 把时间线变成可以评论、复用和交接的设计对象。

对产品团队来说，这套设计把两个常见的交接点提前了：先在共同画布里验证方向，再把已经形成判断的结果交给生产系统。AI 负责降低创建门槛，画布负责保留选择过程。