跨国深谈← 返回←Figma Config 2026:当代码、AI 与动效都变成画布上的设计材料

Figma Config 2026:当代码、AI 与动效都变成画布上的设计材料

关联

人物 Nico · Dylan Field

公司 Figma

概念 智能体 · 提示词 · 代码 · 代码层 · Make · 生成式插件 · 着色器 · Figma Motion

「设计与代码」根本不是一道非此即彼的选择题——代码就是设计的材料,以前是工具逼你二选一。说出这话的人是 Figma 的 CEO Dylan Field,在 Config 2026 大会上,他宣布 Figma 要彻底打破设计与代码之间的假对立 。

这一集整整一个多小时的演讲里,Figma 团队讲了四件事:怎么让真实的代码库像设计图层一样在画布里协同探索;怎么让设计师用大白话就造出自己专属的插件和高级视觉特效(着色器);以及怎么让曾经只有动效工程师能施展的魔法,变成一个所见即所得的时间轴。最后,他们还展望了当 Figma 智能体全面接管设计、演示文稿和画板的零散想法时,创作的天花板会被推到多高。

先说最根本的观念转变:代码也是一种材料。长期以来,设计圈一直被「设计 vs 代码」的伪命题困扰,但 Figma 的 Nico 在台上直截了当地说,代码并不是设计的对立面,它就是一种用于设计的材料 。

工具以前强迫人们做选择,但人不应该被材料困住。于是他们推出了 CodeLayers(代码层)——你可以直接把代码放到熟悉的 Figma 画布上,像拖动设计图层一样拖动它 。

这个做法解决了当下 AI 编程的一个大痛点:虽然智能体(能自主执行任务的 AI)让写几千行代码变得很容易,但大家其实都在各自为政地单干,每个人都对着自己的 AI 敲几百个提示词(给 AI 下指令的话),最后互相扔几个原型录像,根本不是在合作 。现在,代码直接进了多人协作的画布。

更关键的是,它还能和 GitHub(著名的代码托管平台)双向同步——你可以直接把 GitHub 仓库或者本地文件夹拖进画布做探索,改完之后一键把更新推回代码库 。在这套体验背后提供支撑的,是 Figma 的代码工具 Make。Make 最近几个月加入了计划模式、语音转文字等新功能,最重磅的更新是它现在能让你在本地电脑上,直接对生产环境的真实代码库进行操作 。

说完了把代码变成直观的材料,接下来的问题是:那些重复性的小需求怎么办?这正是生成式插件要解决的。

这款新工具的杀手锏在于:它完全不需要写代码,也不需要用桌面版应用,你只需要用大白话向 Figma 智能体描述你的需求,它就能当场给你造出一个插件来 。比如你的设计师朋友每天都要手工调整几十个便当盒风格的排版,他只要让智能体记住这种特定的风格偏好,以后选中图层点一下,就能瞬间生成符合他审美的排版 。

最有趣的是,这些生成出来的插件会停留在文件里,如果其他同事想知道这个插件是怎么做的,他们可以直接点开当时的智能体聊天记录,不仅学到做法,还能直接拿去改造成自己的版本 。哪怕你只是想设计个指甲图案这种看似「太傻」的小需求,也能立刻让智能体帮你做一个专属的美甲生成器 。

除了生成插件,智能体还能搞定极其硬核的视觉特效,这就是他们推出的另一张王牌:着色器。

如果你没听过这个名字也不用慌,你平时看到的那些高级的渐变、玻璃质感和模糊效果,底层全都是着色器干的事 。以前想自己做着色器,可能得苦学四年数学;但现在,只要你能找一张参考图扔给 Figma 智能体,并说一句「给我弄个类似这样的静态效果」,它就能直接帮你造出来 。

Figma 把着色器做成了两种类型:一种叫着色器填充,就像是材质和底色,你可以通过拖拽画布上的手柄来随意调整光影和色彩;另一种叫着色器效果,它是叠加在材质之上的,可以产生镜头畸变、融化或者粒子追踪鼠标的奇妙视觉 。最让人大脑融化的是,这些特效可以任意堆叠和重排,产生无穷的组合。

既然已经有了会写代码的智能体、随叫随到的插件和各种高级视觉特效,那动态效果呢?这正是前动效团队 Modify 加入 Figma 一年后交出的答卷:Figma Motion。

过去,那些极其精妙的动画往往只有专业的动效设计师能做出来,他们能创造出别人甚至无法用语言解释的魔法 。但现在,Figma 把时间轴变成了一个基础的设计原语(构成界面的基本元素),带有关键帧和缓动控制,嵌进大家早已熟悉的设计系统中 。

你只要选中一个对象,按下快捷键拖动它,时间轴上就自动生成了动画。就算你不想自己手搓动画,也可以直接用大白话命令智能体:「让这三张图同时淡入,然后形成一个完美循环」,智能体就能瞬间铺好关键帧 。而且,这些生成的动画是完全可编辑的,智能体还能顺手帮你写出一个用来批量调整时间轴错位节奏的插件 。

当所有这些全新的工具集合在一起时,最绝妙的化学反应发生了:不同的材料可以在同一个画布里组合。Figma Motion 生成的动画,可以直接叠加前文提到的着色器效果。

你可以在播放动画的同时,实时调整扭曲、色差等视觉特效的参数,甚至把这些特效的变化也做成动画。更夸张的是,这不仅是能看不能动的演示文件——它是真正的 Figma 图层,在画布里编辑文字,画面会实时更新;等定稿了,还能直接提取代码,或者通过 MCP 协议发给大语言模型去开发 。

最后,这套体验的大脑是昨天刚向所有人全面开放的 Figma Agent(智能体)。它现在能通过连接器(把外部数据拉进画布的桥梁)接入 Notion、Slack、GitHub 等外部工具,把零散的信息直接拉进设计里 。

它还加入了「自定义技能」功能,你可以把自己经常反复用的提示词,变成一键触发的斜杠命令 。未来,Figma 智能体还会进一步接管 FigJam 画板和幻灯片,比如直接帮你把杂乱的点子提炼成排好优先级的时间表,或者把客户需求文档转成一套符合品牌风格的演示文稿。

本集带走

最后收个尾,这一集值得带走的是这么几句话。第一,「设计与代码」是个伪命题,代码就是设计的材料,它不应该被工具困在画布之外的孤岛里;现在有了智能体加持,代码层可以像普通设计图层一样在画布里被多人探索、比较、甚至一键推回 GitHub。

第二,技术的门槛已经被彻底拍平了,曾经需要几年数学功底的着色器,或者繁琐重复的插件开发,现在只需要一句大白话指令或者一张参考图,Figma 智能体就能当场为你造出来。第三,最强大的魔法在于材料的组合,Figma Motion 让原本高深莫测的动效设计变成了时间轴上直观的拖拽,它还能与着色器、插件无缝叠加,让动画的精修变得随心所欲。最终,所有这些新工具都不会消耗 AI 积分,它们的目的只有一个:AI 负责降低下限,而在座的各位设计师,负责去把创意的上限推向平流层。

多年来设计界无休止地讨论设计与代码这个话题,我现在就直说了,这是一场虚假的辩论。
For years the design industry has endlessly discussed this topic of design versus code and I will just say it flat out right now this is a false debate.
—— Dylan Field · [09:29]

虽然智能体让写数千行代码变得容易得多,但围绕代码的工作流根本不是为共同探索而构建的。
while agents have made it so much easier to write thousands of lines of code, the workflows around code are not built for exploring together at all.
—— Nico · [12:20]

最好的着色器将是你自己梦想出来的那些。
The best shaders are going to be the ones that you dream up on your own.
—— 嘉宾 · [45:39]

他们能够创造出其他人甚至无法表达或解释的东西,更不用说复制了。
they are able to create things that others cannot even articulate or explain, let alone replicate.
—— Dylan Field · [65:08]

去创造那些只有你能创造的东西吧。
Go make something that only you can make.
—— Dylan Field · [70:39]

你今天看到的一切,代码、动画、你自己的工具、你自己的素材,它们都共存于画布之中。
Everything you saw today, code, motion, your own tools, your own materials, it all lives together in the canvas.
—— Dylan Field · [69:43]