2026 年 6 月 24 日，Figma 在 Config 2026 上一口气发了六项更新。单看像一次例行发布会，一家设计工具公司又出了新功能。但把 Code Layers、Figma Motion、Shader Fills、Generative Plugins、Weave Tools 和 Figma Agent 六个名字摆在一起看，会发现另一件事正在发生：Figma 想重新定义「设计文件」这个用了三十年的概念。
在过去的工作流里，设计师在 Figma 或 Sketch 里画静态视觉稿，再通过 Zeplin、Inspect 或者干脆截图丢给开发。这个叫「设计交接」的环节，是数字产品开发里最脆弱的一段。信息在这里衰减，意图在这里走样，迭代在这里卡住。二十年来行业一直想补上这条裂缝，从 PSD2HTML 到 Sketch 加 Zeplin，从 Dev Mode 到 Storybook，每一次都在缩小差距，但没人真正抹掉它。
Config 2026 想做的不止是缩小差距。Code Layers 意味着代码不再是设计做完之后的产物，而是跟矩形、文本、组件平起平坐的原生材料。当设计师能在画布上直接放一段能跑的 React 代码，当这段代码能跟旁边的视觉元素实时联动，当动效和着色器都变成可组合、可复用的设计系统资产，「设计文件」的定义就从「静态像素画布」变成了「能执行的活文档」。
一、设计工具三十年的那条裂缝
要理解 Config 2026 的分量，得先看这条裂缝是怎么长出来的。
1990 年代，Photoshop 和 Illustrator 定下了数字设计的基本范式：设计师在「画布」上摆「图层」，调属性做效果。这套东西继承自平面设计，设计师像在纸上画画，只是画笔换成了数字工具。PSD 文件说白了是一张「有结构的位图」，它描述的是屏幕上每个像素该是什么颜色。
2010 年代，Sketch 带来了矢量和符号系统，Figma 又加上多人协作和组件变体。设计文件从「像素描述」进化成「结构化的组件树」，设计师终于能像搭积木一样拼界面。但它骨子里还是一份声明式文档：它说「这里有个按钮，宽 120px，蓝色」，却不说「点下去会发生什么」。
同一时期，前端从 jQuery 走到了 React 和 Vue 的组件化时代。开发者的代码是一份能执行的文档，它不光描述界面长啥样，还描述界面怎么响应交互、怎么取数据、在不同状态下怎么变。
设计师的声明式画布，和开发者的可执行代码，从一开始就在两个平行宇宙。设计文件表达不了交互逻辑，代码文件表达不了视觉意图。中间必须有一层翻译，就是设计交接。
这层翻译烧掉了行业巨大的成本。Figma 2024 年的内部调研说，设计师平均花三成时间在交接准备上，标尺寸、导资源、写交互说明、回答开发的疑问。开发这边实现设计稿时，又要多花约四分之一的时间去猜设计意图：这个动效该多久？状态切换的过渡是什么样？响应式在断点处怎么变？
更麻烦的是，这个翻译是单向的、一次性的。开发在实现途中发现某个设计不合理要改，他得回 Figma 改稿再重新交接。这个循环的摩擦太大，大到很多团队索性跳过设计稿更新，结果设计稿和线上产品慢慢对不上。这就是设计系统里那个臭名昭著的「设计-代码漂移」。
Figma 2023 年推出的 Dev Mode 想缓解这件事，让开发直接在设计文件里看代码片段和标注。但它本质还是翻译方案，Dev Mode 做的是从设计稿「生成」代码，而不是让代码成为设计稿的一部分。Config 2026 的 Code Layers 换了个方向，它不是在设计和代码之间架桥，而是直接把那堵墙拆了。
二、Code Layers：代码成了画布上的一等公民
Code Layers 的核心一句话讲得清：代码不再是设计的下游产物，而是跟矩形、文本、组件并列的原生设计材料。
传统工具里，画布上的元素类型就那么几种：矩形、椭圆、文本、图片、组件、实例。设计师靠组合它们拼界面。Code Layers 加了一种新类型，能执行的代码块。它可以是 React 组件、CSS 动画、SVG 生成器，或者任何能在浏览器里跑的 Web 代码。
这里有个值得琢磨的决定：Figma 并没让设计师「写代码」。Code Layers 的创建方式是提示词驱动的，设计师选中一层或几层，用自然语言描述想要的交互，Figma 的 AI 就生成对应的代码层。比如选中一个按钮，输入「悬停时轻微放大并显示阴影，点击后出现加载动画」，Code Layers 会生成一个带完整交互逻辑的 React 组件，作为新的一层放到画布上。
这个决定很聪明。它没要求设计师变成程序员，而是让 AI 当那个翻译，把设计意图翻成能跑的代码。但跟老式交接不同的地方在于，这次翻译是实时的、双向的、能反复改的。设计师随时改提示词就能调代码行为，代码跑出来的结果也实时反映在画布上。
Figma CPO Yuhki Yamashita 在接受 Dataconomy 采访时讲了这套东西的底色：Code Layers 促进设计师、产品经理和程序员之间的迭代，让他们专注于探索想法，而不是打磨生产代码。关键词是「探索想法」。Code Layers 不是要设计师产出生产级代码，而是让他们能在画布上先把交互想法试一遍，不用等开发实现完再回来验证。
技术上，Code Layers 引入了几个新东西。每个代码层跑在一个隔离沙箱里，能通过 Figma 的设计 API 读写画布上的其他元素，所以它不只定义自己的样子和行为，还能跟周围的视觉元素互动。这种互动是双向的：设计师改了旁边按钮的尺寸，代码层能感知并跟着调；代码层的状态从「默认」切到「加载中」，周围的视觉元素也能跟着响应。
还有一点被 Dataconomy 和 The Next Web 都点了名，就是仓库集成。团队可以克隆代码仓库，把里面的组件直接提取到 Figma 的设计层里。这意味着设计文件能跟代码仓库保持同步，设计师在画布上改的代码层，能直接合回仓库。配合内置的类 Git 版本管理，每次修改留一个快照，能回溯、能对比。
这些特性加起来，设计文件的性质就变了。老的设计文件是一张快照，记录某个时间点的视觉状态。带 Code Layers 的设计文件是一个活系统，它能接收输入、产生输出、在不同状态之间来回切。
从技能这个角度看，Code Layers 没要求设计师学编程，但确实要求他们换一种思路：从「组合视觉元素」转向「描述交互意图」。精确抠像素和颜色这件事可以交给 AI，设计师的核心变成了讲清楚「这个界面该怎么回应用户」。
这对设计教育的冲击不小。很长时间里，设计教育的核心是视觉素养，色彩、版式、信息层级。这些还重要，但正在被 AI 快速拉平。Code Layers 暗示的未来是，设计师的护城河会从「视觉表达」往「交互思维」和「系统设计」那边挪。
三、Figma Motion：动效从甜点变成主食
如果说 Code Layers 重新定义了设计文件的内容，那 Figma Motion 重新定义的是设计系统的行为。
在这之前，动效在设计系统里的位置一直很尴尬。从 Material Design 到 Ant Design，几乎所有设计系统都把动效当附录，在组件文档最后加一页「动效规范」，定一下过渡时间和缓动曲线，然后指望开发照着做。但实际上动效规范是最容易被忽略的那部分，开发赶工期的时候往往用最省事的线性过渡，或者干脆跳过。
原因不复杂：在老工具链里，动效的设计和实现是完全分开的。设计师用 Principle、After Effects 或者 Figma 的 Smart Animate 做个原型，录屏发给开发，再附一句「这个过渡 300ms，ease-out，先放大再缩小」。开发对着视频凭感觉实现，做出来跟设计稿常常有点微妙但看得出的差别。
Motion 把动效时间线直接塞进了 Figma 的组件编辑器，设计师定义组件长相的同时就把行为一起定了。一个按钮组件不光有「默认」和「悬停」两种视觉，还带上了从默认到悬停的过渡动效。而且 Motion 能导出 CSS、JSON、React 组件、MP4、WebM，动效不再是一段参考视频，而是能直接进代码库的资产。开发不用再看视频猜，直接导入设计师定义好的动效。
这对设计系统的影响是结构性的。以前设计系统的组件是静态的，一个按钮在 Figma 里是一组变体（默认、悬停、按下、禁用），但组件在变体之间怎么过渡，不归设计系统管。Motion 让过渡本身成了组件的一部分，有点像状态机，组件不光定义「有哪些状态」，还定义「怎么在状态之间切」。
对维护设计系统的人来说这是质变。过去要更新一个组件的动效，设计师得改 Principle 或 After Effects 文件，再挨个通知用这个组件的团队去更新实现。现在只要在 Figma 里改一次 Motion 定义，所有引用这个组件的地方自动更新。Figma 官方博客把 Motion 定位成「设计系统基础设施」，而不是「高级动画工具」，这个说法挺准。它的价值不在能做多炫的动画，而在让动效变成能被系统化管理、能版本控制、能跨团队复用的资产。
四、Shader Fills 和 Generative Plugins：AI 把复杂效果拉平了
Config 2026 的第三组突破来自 AI 生成的效果。
Shader Fills 让设计师用自然语言就能生成复杂的着色器效果。过去要做高质量着色器，得懂 GLSL 或 HLSL，还得有图形学底子，门槛高到绝大多数设计师根本迈不过去。Shader Fills 用 AI 把门槛降到了零，设计师输入「一个带轻微彩虹折射的玻璃材质，表面有细微磨砂纹理」，AI 就生成对应的着色器代码，实时渲染在画布上。
Generative Plugins 更进一步。据 The Next Web 报道，这个功能让人用自然语言就能造自定义 Figma 插件，完全不用开发环境。设计师输入「做一个插件，把所有文本层的字体从 Helvetica 换成 Inter，并自动调字间距让视觉密度不变」，Figma 就生成一个能用的插件，直接在画布上跑。
这两个功能的共同点，是用 AI 抹掉了「知道怎么做」和「真能做到」之间的那道坎。老工具链里有很多效果理论上能实现，但实操成本高到没人做，着色器要图形学知识，自定义插件要写 JavaScript。AI 把这些成本压到接近零，设计师可以只管「想要什么效果」，不用管「怎么做出来」。
Weave Tools 是第三块拼图，它是 Figma 的 AI Agent 系统。跟 Code Layers 和 Generative Plugins 不一样，Weave Tools 不是盯着单个任务的工具，而是一个能读懂整个设计文件上下文、执行多步骤任务的代理。设计师可以说「检查这个文件里所有按钮，确保最小触摸区域符合 WCAG 2.1 的 44x44px 要求，不达标的自动调」，Weave Tools 会遍历整个文件，找出所有按钮实例，逐个查尺寸，需要的地方自己改。
Shader Fills、Generative Plugins、Weave Tools 三个加在一起，撑起了 Figma「AI 即设计材料」的想法。在这套设想里，AI 不是像 Midjourney 那样在外面生成图片的独立工具，而是嵌进设计流程每一环的能力增强层。设计师不用离开 Figma 去用 AI，AI 就在画布上、组件里、插件中。
五、设计工具的终局会是什么样
Config 2026 让我想到一个更大的问题：设计工具的终局形态到底是什么？
把设计工具的演进拉成一条时间线，趋势很清楚，它一直在吞噬上下游的工具链。1990 年代 Photoshop 只管画图；2010 年代 Sketch 和 Figma 加了组件系统和设计系统管理，吞掉了「设计规范文档」；2020 年代初 Dev Mode 加了代码查看和标注，吞掉了 Zeplin 那类「设计交接工具」；到 2026 年，Code Layers 加 Motion 加 Shader Fills，开始吞「交互原型工具」（Principle、Framer）和一部分前端开发。
Framer 的例子挺有启发。它最早是个高保真交互原型工具，后来转型成「设计即网站」平台，设计师在 Framer 里设计的页面能直接发布成网站。Framer 押的是：设计工具的终局是「设计即产品」，不需要开发介入，设计师直接产出成品。
Config 2026 走的是另一条。Figma 没打算取代开发，而是想让设计师和开发在同一个文件里协作。Code Layers 不是让设计师写代码去顶掉开发，而是让设计师在画布上用代码表达交互意图，开发在这个基础上接着完善。
两条路代表了对「终局」的两种想象。Framer 押「零代码」，设计师用可视化界面定义一切，代码被完全藏起来。Figma 押「代码即材料」，代码不藏，而是变成设计过程里能摸、能拼的原生材料。
我更看好 Figma 这条。零代码方案有天花板，一旦需求复杂度超过工具的表达能力，设计师就卡死了。而代码即材料的天花板取决于代码本身的表达能力，那几乎是没有上限的。
这里有个微妙的地方：Code Layers 让设计师「可以」在画布上用代码，但并不逼他们「必须」用。Figma 的 AI 层（提示词生成代码、Weave Tools 代理）保证设计师可以只用自然语言表达意图，不必亲手写代码。于是它自然长出了一种分层的能力模型：初级设计师完全靠提示词用 Code Layers，不碰任何编程；中级能读懂并微调 AI 生成的代码；高级能直接写代码实现复杂交互。这种分层不是强制的，设计师按自己的兴趣和能力挑一层待着就行。
六、500 亿美元估值背后的棋局
Config 2026 得放到 Figma 的商业处境里看。据 CMSWire，Figma IPO 后估值接近 500 亿美元，FY2025 收入 10.56 亿美元（同比增 41%），Q1 2026 收入 3.334 亿美元（同比增 46%），月活到了 1300 万。这些数字说明 Figma 早就不是一个设计工具，而是一个平台。
500 亿的估值需要一个平台级的故事撑着。如果 Figma 只是一个「更好的 Sketch」，估值不可能过 100 亿。Config 2026 的六项功能凑在一起，讲的是一个「数字体验平台」的故事。在这个故事里，Figma 不再是设计师的工具，而是整个数字产品团队的协作平台，设计师在上面画界面，开发在上面写和调代码，产品经理在上面定交互逻辑，AI Agent 在上面跑自动化。所有人在同一份活文档里工作，不用在不同工具之间来回倒信息。
这个方向给竞品的压力很大。Sketch 的市场份额早被 Figma 甩开，Config 2026 只会拉大差距。Adobe XD 在 2023 年被放弃，Adobe 转头想收 Figma（没成）。Framer 走的是另一条路，但在团队协作这个维度上跟 Figma 差得远。
对设计教育同样有冲击。代码变成设计材料后，课程设置得重想。视觉设计课还得留，但要补上交互逻辑思维、系统设计、AI 协作这些新模块。设计师要学的不是「怎么写代码」，而是「怎么用代码思考」。
七、设计这件事，正在被重新定价
Config 2026 最大的意义不在某个单一功能，而在它给「设计」这件事重新定了价。
过去大家默认设计是「让东西好看」的活，设计师的价值在审美、色感、版式。这些当然有价值，但定价有限，因为「好看」相对主观，而 AI 正在飞快地学会好看。
Config 2026 暗示的未来是，设计是「定义体验」的活。设计师不光定义界面看起来什么样，还定义它怎么响应行为、怎么在状态之间切换、怎么跟后端交互。这些能力的市场定价远高于纯视觉，因为它们直接决定产品的功能和体验。
当设计从「画图」变成「定义体验」，设计师从视觉工作者变成体验架构师，这个市场的天花板才算真正被打开。
500 亿美元的估值，本质上是对这个新定义下的注。从像素画布到可执行文档，从设计交接到实时协作，从静态视觉到动态系统，Config 2026 改写的不只是设计工具的底层逻辑，还有「设计师」这个职业的定义。那堵立了二十年的设计-开发之墙，正被代码、动效和 AI 一点点消掉。
墙塌之后是什么样，也许我们很快就会知道。
---
参考来源：
1. Figma Blog — Config 2026 Recap
2. CMSWire — Figma Launches Code Layers, Motion at Config 2026
3. TechCrunch — Figma Adds Code Layers, Support for Animations
4. Dataconomy — Figma Update Code Layer AI Tools
5. The Next Web — Figma Config Code Layers, AI Skills, Plugins, Animations
6. Jade Agard Design — Figma Config 2026
7. UWarp Design — Figma Config 2026 Recap
8. 优设网 — 设计素材 2.2