代码成了设计的颜料：Figma Config 2026 把一整条工具链塞回了一块画布

把"交接"删掉，换成"同步"

设计行业有一个用了十几年的词叫 design-to-code，设计到代码。它描述的是一条单行道：设计师在左边产出像素，工程师在右边把像素翻译成能跑的程序。这条道上最贵的损耗就是翻译——工程师对着一张 PNG 猜设计师想要的圆角、间距、动效节奏，猜错了来回返工。

Code Layers 要做的事，是把这条单行道改成双向同步的车道。它让你在 Figma 画布上一键、或者一句话，把任意一个设计图层变成一段真正能运行的代码图层。你可以并排摆好几个代码方向比来比去，可以给它评论、和团队一起改，改完还能把它再抽回成可编辑的设计图层。它和 GitHub 仓库是双向同步的——画布这边动一下，代码那边跟着动。

日本 Mercari 团队的设计师在现场报告里写下了这个转变的本质：从"design to code"到"design with code"，从"设计到代码"变成"带着代码一起设计"。差别在于，设计师不再是把活儿扔过墙就走，而是能当场看见自己画的东西到底能不能实现、实现出来是什么样。这位设计师的原话是，这让团队能在更近的距离上去想"怎么设计一个真正跑得起来的产品"。

这不只是省事。它改的是设计师和工程师之间那道墙的物理位置。墙没了，同步没了，剩下的是两拨人对着同一份文件改同一个东西。

不过这里要泼一盆冷水：Code Layers 是六样里唯一还没正式开放的。它走的是封闭测试，2026 年 7 月起才逐步放量，要去 figma.com/config-betas 排队。而它恰恰是六样里最有颠覆性的那一个。Figma 把最能改变行业的牌留在了手里，先发出来的是更安全的那五张。

动效不再是"后期"，是设计系统的一部分

对做视频和动效的人来说，Figma Motion 是这次最该上手的东西，因为它现在就能用。

它是一个直接嵌入设计文件的时间轴动效工具：关键帧、预设、缓动曲线，该有的都有。关键不在功能清单，而在于它待的位置——动画就和你的组件住在同一个文件里。这意味着动效能像填充色、像字体一样跨组件传递、被复用。设计师 Blossom Agard 说得准："动效现在活在画布上，和你的组件在同一个文件里……你的设计从第一天起就能动起来。"动画从"开发后期才补的东西"变成了"设计系统里的一个属性"。

它对工程交接也开了一道口子。Dev Mode 里会显示完整的时间轴和可读的时间、缓动数值，导出能直接给 CSS、JSON、React 代码，也能出 MP4、WebM、Animated SVG、GIF，还兼容 MCP——也就是能被 AI agent 读懂、拿去实现。工程师不用再盯着一段录屏去猜那个弹跳到底是 0.3 秒还是 0.4 秒。

说句公道话，Figma Motion 不等于干掉 After Effects。AE 的合成、粒子、复杂特效仍然在另一个量级。但对绝大多数产品动效——界面转场、按钮反馈、上线小动画——这些占了设计师日常动效活儿的大头，现在不用离开 Figma 了。这就够疼了。

当"造工具"变得和"用工具"一样容易

真正让人后背发凉的，是生成式插件和 shader 这两样背后的逻辑变化。

过去插件是给会写代码的人准备的。现在你用一句大白话描述你想要什么——"帮我把选中的图层按字母顺序重排""把这一组的间距统一成 8 像素""查找替换掉所有这个红色"——agent 就在你文件里现造一个能复用的插件出来，Figma 帮你托管运行，长得就像 Figma 原生的功能。shader 也是同一套：你描述一个效果，或者甩一张参考图，agent 给你生成一段 WebGPU 驱动的视觉效果，像素化、抖动、高级模糊都行，而且默认是参数化的，可以在画布上当场拖动调整、和别的效果叠在一起。

Mercari 那位设计师点破了这件事的分量：设计师的角色从"工具的使用者"变成了"工具的创造者"。这不是修辞。一个不会写一行代码的设计师，现在能给团队造一个自动检查设计系统规范、或者自动验证无障碍配色的小工具。门槛塌了。

塌门槛这件事，Dylan Field 自己有个说法："AI 把门槛拉低了……设计师、创作者、搭建者：天花板要靠你们抬高。"这句话好听，但它藏着一个没说出口的问题——门槛塌了之后，挤进来的人变多了，那么留在牌桌上的人凭什么留下？答案只能是 Field 没明说的那半句：凭判断力。当造一个工具、生成一段动效、调一个 shader 都只要一句话，稀缺的就不再是"会做"，而是"知道该做成什么样"。

这次到底是不是"杀死 Adobe"

发布一出，社交媒体上立刻冒出"Figma 干掉 Adobe"的帖子。判断不准确，而不准确在哪，恰好能看清 Figma 真正的打法。

Blossom Agard 给了一个比"取代"精确得多的词：Figma 做的"与其说是取代 Adobe，不如说是把你原本要切换工具的那些理由都吞了进来"。Adobe 仍然守着印刷、摄影、视频剪辑、插画这些 Figma 根本不碰的地盘。Figma 没在抢这些地盘，它抢的是你每天在 Figma 和别的工具之间来回切换的那些瞬间——切去 AE 调个动画、切去 Midjourney 出张图、切去 Cursor 写段代码。每一次切换都是一次离开，而离开多了，你迟早会想"要不整个搬过去算了"。Figma 把这些离开的理由一个一个堵上。

把这次发布的对手一字排开会更清楚：Code Layers 对的是 Cursor、Lovable 这类"边聊天边写代码"的工具，卖点是把代码探索留在能协作的画布上，而不是闷在一个人的聊天框里；Motion 对 After Effects；Weave 的画布内 AI 出图对 Midjourney；shader 对独立的 shader 编辑器。没有一样是正面强攻，全是"你为什么要走？这里也有"。

这是平台的打法，不是工具的打法。Figma 在做的不是一个更好的设计软件，而是一个让设计、代码、动效、AI 生成在同一份多人协作文件里汇合的地方。它的护城河正在从"最好用的 UI 设计工具"挪到"唯一一个这些东西能在一处碰头的地方"。

盲区：我们不知道的

发布会灯光很亮，但有几块地方是暗的，而且恰好是最该问的。

第一是钱。造 shader、造插件、跑生成式工作流，这些 AI 动作在正式版（GA）上线后都要消耗 Figma 的 AI 积分。但每次消耗多少，不同套餐分多少额度，一个数字都没公布。所有人正浸在免费 beta 的甜头里——免费 beta 从来不是终局。等大家把工作流都搭在这些 AI 功能上、依赖养成，定价才会落下来。

第二是付费墙。几乎所有"创造"能力——造 shader、造插件、用 agent 生成动效关键帧——都锁在 Professional 及以上付费套餐的 Full seat 后面，教育、政府、Starter 版被明确排除。Figma 把最性感的能力和最贵的座位绑在了一起。

第三是 agent 跑在什么模型上，没说。这关系到你的设计数据怎么被处理、生成有多快，但 Figma 没披露底层用的是谁家的模型。

第四是那个被反复转发的"8000 多人到场、95% 的财富 500 强已经在用 Figma"——这个数字只在单一一家二手媒体出现过，官方和其他信源都没有交叉印证。姑且当成行业氛围参考，别当成事实引用。

对设计师和创作者意味着什么

别急着去学某个新按钮。Config 2026 留给设计师的真正功课，是一道更难的题：当造工具和用工具一样容易、当动效和代码都活在同一个文件里，你身上那块不可替代的部分，到底是什么？

具体到下个月怎么动手，有三件事可做。

先上手 Motion 和生成式插件，这两样现在就能用，日常活儿里立刻能省力——产品动效不用再切去 AE，重复性的图层操作让 agent 现造个插件代劳。省下来的时间还给判断和创意，这正是 Agard 说的“把重复的活交出去，你专心做创造那一头”。

盯紧 Code Layers 的 7 月放量。如果你和工程师协作，这一个功能会重写你们之间的交接方式——GitHub 双向同步意味着你画的东西会直接落进代码仓库。提前想清楚：当墙拆了，你和工程师的分工要重新怎么划？谁对什么负责？

最后，把“会用 Figma”这件事的定义往上抬一格。explainX 引用一位设计师的话，2026 版 Figma 学会了，就等于会产品设计、幻灯片、海报营销物料、插画、出图修图、动效、设计系统、插件生成——一个人要罩住的面变宽了。这对个人是机会也是压力：能力被放大，但“专精一样就够吃”的安全感也在消失。动效设计师、生成技术岗这些原本靠专精立身的角色，要尽早想清楚自己在这张更宽的牌桌上坐哪个位置。

Field 把这次发布的内核说得很干净：“工具不该限制一个想法能走多远。”工具确实在松绑。松绑之后，能走多远，就全看握着工具的人了。

本期关键词

• Code Layers（代码图层） —— Figma 画布上一种新的图层，本质是把"设计稿"和"能运行的代码"装进同一个可编辑对象里。一键就能把设计图层转成可交互的代码，改完还能抽回成设计图层，并和 GitHub 代码仓库双向同步。它取消了设计和开发之间"扔过墙再翻译"的交接，换成两拨人改同一份东西。目前封闭测试，2026 年 7 月起逐步放量。

• Figma Motion（动效） —— 进了设计文件的时间轴动效工具。时间轴就是把动画沿时间排开的横条，上面打关键帧（标记某个时刻画面该是什么样），工具自动补中间的过程。最大变化是位置：动效不再是开发后期单独补的东西，而是和组件、字体一样、能在设计系统里被复用的属性。

• shader（着色器） —— 一段在显卡上跑、用来生成视觉效果的小程序，像素化、抖动、各种模糊、光影质感都靠它。过去得懂代码才能写。现在你用大白话描述、或甩一张参考图，Figma 的 AI agent 就能帮你生成，参数还能在画布上当场拖着调。

• 生成式插件（Generative Plugins） —— 插件是给设计软件加功能的小工具。过去得会编程才能做。现在你用一句话描述想要的功能（"把这些图层按字母排序"），agent 就在你文件里现造一个出来，Figma 替你托管运行。它把"造工具"的门槛从"会写代码"降到了"会说人话"。

• Weave —— Figma 里一套节点式的 AI 图像处理工作流。节点式就是把每一步操作（替换背景、加 logo、风格迁移）做成一个个可以连线串起来的方块，搭成一条自动流水线。它让出图和修图不用再切去 Midjourney 这类外部工具。

• Figma agent（智能体） —— Figma 内置的 AI 助手，这次长出了两样新本事：技能（skills），把你团队的工作流和规范打包成可复用的指令喂给它；连接器（connectors），让它通过 MCP 协议接上 Notion、Slack、GitHub 这些外部工具取数据干活。MCP 是一个让 AI 和外部工具对话的统一接口标准，可以理解成 AI 世界的"通用插头"。

• design-to-code / design-with-code —— 前者是用了十几年的老流程：设计在左、代码在右，设计师产出像素、工程师翻译成程序，是一条单行道。后者是 Config 2026 想换上的新范式：设计和代码在同一份文件里双向同步，设计师"带着代码一起设计"，而不是设计完扔给工程师。

引用

1. Config 2026 Recap: New Materials, New Tools and a More Expressive Canvas — Figma 官方博客 —— 一手发布原文
2. What's new from Config 2026 — Figma Help Center —— 各功能套餐/beta/放量细节（一手）
3. Agenda & Schedule — Config 2026 官网 —— 时间地点与 Dylan Field 主讲（一手）
4. "Code is material for design" — Snappr News —— keynote 框架与 Dylan Field 引语。原文："Code is not the opposite of design. Code is material for design."（代码不是设计的对立面，代码是设计的材料）
5. Config 2026 On-site Report: Build with agents — Mercari Design —— 现场设计师视角。原文："AI is no longer a feature, but a part of the canvas."（AI 不再是一个功能，而是画布的一部分）
6. Everything Figma Just Announced at Config 2026 — Jade Agard —— 设计师实操视角。原文：动效"现在活在画布上，和你的组件在同一个文件里"；这次"与其说取代 Adobe，不如说把你切换工具的理由都吞了进来"
7. Figma Config 2026: Code Layers Challenge Cursor — TechTimes —— 竞争对标与"一切收回画布"主线（二手）
8. Figma Config 2026 Complete Recap — explainX —— AI 积分定价缺口、付费墙、岗位影响的质疑（二手）