Figma Config 2026：代码层与 AI 动效来了

Figma 终于对设计开发一体化下手了。

北京时间 6 月 24 日，Figma 在年度 Config 大会上发布了一系列重磅更新：代码层（Code Layers）让你在设计画布里直接写代码、AI 动效生成用一句话就能做出复杂动画、着色器工具把图形编程带进了设计软件。更激进的是，整个画布被重新设计成「全栈开发优化」模式——团队、AI Agent、工具、素材，全部塞进同一个工作区。

这不是小修小补。Figma 正在试图重新定义「设计工具」这个品类。

代码层：设计师能看懂代码了，开发者也能碰设计了

过去这些年，设计稿到代码的「最后一公里」一直是个老大难问题。设计师用 Figma 画好界面，开发拿到的要么是一堆切图和标注，要么是各种插件导出的「看起来像那么回事但没法直接用」的代码。

这次 Figma 推出的 Code Layers 想从根本上解决这个问题。

它是什么

简单说，Code Layer 是一种新的图层类型。你可以在设计画布里创建一个代码层，直接在里面写 HTML、CSS、JavaScript，甚至是 React 组件。这些代码会实时渲染成可视化的设计元素，和你用传统方式画的矩形、文字框混在同一个画布上。

关键在于「不用离开 Figma」。

以前的工作流是这样的：设计师在 Figma 里画 UI → 导出设计稿 → 开发在 VS Code 里写代码 → 发现效果和设计稿不一样 → 来回沟通修改 → 设计师更新设计稿 → 开发再改代码……循环往复。

现在的工作流可以是这样：设计师画好静态 UI → 开发直接在同一个 Figma 文件里用代码层实现交互逻辑 → 实时预览效果 → 设计师当场确认或调整 → 直接导出可用代码。

对开发者意味着什么

代码层支持的不只是简单的 HTML/CSS。根据 Figma 官方的说法，它针对「全栈开发」做了优化。这意味着你可以在里面写：

• 响应式布局逻辑
• 状态管理代码
• API 调用
• 甚至复杂的业务逻辑

从技术实现上看，这像是在 Figma 里内置了一个轻量级的 CodeSandbox 或 StackBlitz。代码层有自己的运行时环境，可以执行 JavaScript，渲染结果直接映射到画布上。

这解决了一个长期痛点：以前用 Figma 做原型，交互只能用它自带的那套原型工具（点击跳转、简单动画），稍微复杂一点的逻辑就做不了。现在，理论上你能用代码实现的交互，都可以在 Figma 原型里展示出来。

和现有方案比怎么样

市面上做设计转代码的工具不少：

• Anima：能把 Figma 设计导出成 React/Vue 代码，但代码质量一直被诟病，生成的 div 嵌套能有十几层
• Locofy：用 AI 优化导出代码，比 Anima 好一些，但仍然是「导出」思路
• Builder.io：可视化搭建 + 代码生成，但它是独立平台，不在 Figma 生态里
• 各种 Figma 插件（CodeFun、蓝湖等）：能标注尺寸、导出切图，部分支持代码生成，但质量参差不齐

Figma Code Layers 的思路不太一样。它不是「把设计稿翻译成代码」，而是「让代码成为设计的一部分」。设计和代码在同一个文件里共存，实时同步。这从根本上避免了「翻译」过程中的信息损失。

当然，这也带来新的问题：设计师需要理解代码吗？开发需要学 Figma 操作吗？协作边界怎么划分？这些问题 Figma 没有给出明确答案，可能需要各个团队自己摸索。

AI 动效生成：用嘴做动画

第二个重磅功能是 AI 驱动的动效生成（AI Motion Graphics）。

做过 UI 动效的人都知道这活有多烦。After Effects 学习曲线陡峭，Lottie 导出各种兼容性问题，Figma 自带的 Smart Animate 只能处理简单过渡。稍微复杂一点的动画——比如一个按钮点击后的微交互、一个列表项的入场效果——要么找专门的动效设计师，要么开发自己用 CSS/JS 硬写。

现在 Figma 说：你描述一下想要什么效果，AI 帮你生成。

怎么用

操作方式是对话式的。你在 Figma 的聊天界面里输入类似这样的描述：

「这个按钮点击后，先缩小 10%，然后弹回原大小，同时背景色从蓝色渐变到绿色，整个过程 0.3 秒」

或者更抽象一点：

「给这个卡片加一个有弹性的入场动画，感觉要活泼一点」

AI 会理解你的意图，生成对应的动画效果，直接应用到选中的元素上。不满意可以继续用自然语言调整：「再快一点」「弹性感弱一些」「加个轻微的旋转」。

技术细节

从官方演示来看，生成的动效是基于 Figma 原生的动画系统，不是导出成 Lottie 或 CSS 代码。这意味着动画参数（缓动曲线、时长、延迟等）都可以在 Figma 里直接编辑，不需要外部工具。

它支持的动画类型包括：

• 属性动画：位置、大小、旋转、透明度、颜色等基础属性的过渡
• 路径动画：元素沿指定路径移动
• 序列动画：多个元素按时间顺序依次动画
• 交互触发：点击、悬停、滚动等触发条件

值得注意的是，Figma 还同时推出了「着色器工具」（Shader Tools）。着色器是一种用代码定义图形渲染效果的技术，常见于游戏开发和创意编程领域。把它带进设计软件，意味着你可以做出传统设计工具很难实现的视觉效果——动态渐变、噪点纹理、光线折射等等。

这两个功能结合起来，Figma 的动效能力一下子从「勉强能用」跳到了「接近专业工具」的水平。

实际效果待验证

AI 生成动效听起来很美好，但有几个问题需要实际上手才能回答：

1. 理解能力：AI 能多准确地理解「活泼」「优雅」「有科技感」这类抽象描述？
2. 精细控制：复杂动效往往需要精确到毫秒级的调整，自然语言能做到吗？
3. 一致性：同一个描述，每次生成的结果一样吗？团队协作时怎么保证动效风格统一？
4. 导出兼容：生成的动效能顺利导出成开发可用的格式吗？

从行业趋势看，Runway、Pika 等 AI 视频工具已经证明了 AI 在动态内容生成上的潜力。Figma 把这个能力带进 UI 设计领域，方向是对的。但 UI 动效和视频创作不同，对精确性和可控性的要求更高，AI 能不能满足这些要求，还需要时间检验。

AI 插件生成：不会写代码也能做插件

第三个更新是用 AI 生成自定义插件。

Figma 插件生态一直很活跃，社区里有上万个插件，从图标库到自动布局工具应有尽有。但如果你有一个特定需求——比如你们团队的设计规范要求所有按钮圆角必须是 8px，你想做个一键检查工具——要么去找现成插件（大概率找不到完全匹配的），要么自己写（需要会 JavaScript 和 Figma 插件 API）。

现在 Figma 说：你用自然语言描述需求，AI 帮你把插件写出来。

使用场景

这个功能适合处理重复性、规则明确的任务：

• 设计规范检查：检查所有文字是否使用了规定的字体和字号
• 批量操作：把选中的所有图层重命名，加上统一前缀
• 数据填充：从 JSON 文件读取数据，自动填充到设计稿的对应位置
• 格式转换：把设计稿里的颜色值全部转换成 HSL 格式

这些任务如果手动做，枯燥且容易出错；如果写插件，对非开发者来说门槛太高。AI 插件生成正好填补了这个空白。

和 Figma Make 的关系

说到 AI 能力，不得不提 Figma 之前推出的 Figma Make。Make 是一个「从描述到原型」的工具，你输入「帮我做一个电商网站的购物车页面」，AI 会直接生成一个可交互的原型。它底层用的是 Claude 3.7 模型。

这次的 AI 插件生成可以看作是 Make 能力的延伸。Make 是用 AI 生成设计内容，插件生成是用 AI 生成设计工具。两者结合，意味着 Figma 正在把 AI 渗透到设计流程的每一个环节。

更大的野心：全栈画布

如果只看单个功能，代码层是给开发用的，AI 动效是给设计师用的，插件生成是给有特定需求的人用的。但把它们放在一起看，Figma 的野心就清晰了：把画布变成一个全栈开发环境。

官方的说法是，新版画布为「全栈开发优化」，要把「团队、AI Agent、工具、素材」全部整合到一个地方。

这意味着什么？

AI Agent 的角色

注意「AI Agent」这个词。它不只是一个回答问题的聊天机器人，而是能自主执行任务的智能体。在 Figma 的设想中，AI Agent 可能承担这些角色：

• 设计助手：根据设计规范自动调整不符合要求的元素
• 开发助手：自动把设计元素转换成代码组件
• 协作助手：在设计变更时自动通知相关人员，生成变更说明
• 质量检查：自动检测设计稿中的可访问性问题、响应式兼容问题

Figma 已经推出了 MCP（Model Context Protocol）服务器，可以把 Figma 的设计上下文直接接入 VS Code、Cursor、Windsurf、Claude 等编程工具。这说明他们在认真考虑 AI Agent 和设计工具的深度整合。

对设计开发协作的影响

传统的设计开发协作是线性的：需求 → 设计 → 开发 → 测试 → 上线。每个环节之间有明确的「交接」动作，也是产生摩擦和信息损失的地方。

Figma 这次更新试图把这个流程变成「协同」的：设计和开发在同一个环境里工作，改动实时可见，AI 帮忙处理繁琐的转换和检查工作。理想情况下，「交接」这个动作本身就可以被消灭。

当然，这需要团队工作方式的配合。如果设计师还是画完就丢，开发还是拿到设计稿就自己埋头写，再好的工具也发挥不出作用。

竞争格局：Figma 的护城河在哪

设计工具市场这两年变化很快。Adobe 收购 Figma 失败后，各家都在抢地盘：

• Adobe：押注 Firefly 和 AI 生成，试图在创意 AI 领域建立优势
• Canva：从非专业用户市场往上走，收购了 Affinity 系列软件
• Framer：主打设计到网站一键发布，在 landing page 市场很受欢迎
• 各种新工具：Motiff（蓝湖出品）、MasterGo（国产 Figma 替代）、以及一堆 AI-native 的设计工具

Figma 的护城河是什么？协作网络效应。

设计工具不像代码编辑器，一个人用什么顺手就用什么。设计工作天然需要协作：和产品经理确认需求、和开发对接细节、和其他设计师维护设计系统。一旦团队用 Figma 建立了工作流，切换成本就非常高。

这次更新强化了这个护城河。代码层让开发者也有理由打开 Figma，AI 功能降低了使用门槛，全栈画布的愿景是把更多角色拉进同一个协作空间。用的人越多，切换成本越高，竞争对手越难撼动。

国内设计师能用上吗

说完功能，聊点实际的。

首先是网络问题。Figma 本身在国内访问不算顺畅，AI 功能依赖实时的模型调用，延迟和稳定性可能是个问题。

其次是价格。Figma 的定价本来就不便宜，AI 功能大概率会有额外费用或用量限制。对于预算有限的小团队，可能需要权衡性价比。

第三是中文支持。从官方资料看，AI 功能主要针对英文优化。中文描述能不能被准确理解，生成的效果是否稳定，需要实际测试。

好消息是，Figma 的设计转代码思路已经在国内有了不少实践。京东的 JoyCode 团队基于 MCP 协议做了 Figma 到前端代码的转换工具，阿里的 imgcook、58 的 Picasso 等也在探索类似方向。即使 Figma 的 AI 功能暂时用不了，国内的替代方案也在快速成熟。

这意味着什么

回到最开始的问题：Figma 这次更新重要吗？

从单个功能看，代码层不是新概念（WebFlow、Framer 早就有），AI 动效不是新概念（Runway 等工具已经证明了可行性），AI 生成插件也不是新概念（GitHub Copilot 写代码已经很普及）。

但 Figma 的优势在于整合。它是设计领域的基础设施，日活用户数百万，覆盖从个人开发者到大厂设计团队的各种场景。当这些 AI 能力被整合进一个已经占据主导地位的平台，影响就不一样了。

对设计师来说，学习门槛降低了，能做的事情变多了。以前做不了的动效现在可以尝试，以前需要开发配合的原型现在可以自己搞定。

对开发者来说，协作效率可能提高。设计师能更准确地表达意图，交接时的信息损失减少，甚至可以直接复用设计稿里的代码。

对整个行业来说，「设计」和「开发」的边界正在模糊。这不是说设计师要变成程序员或者反过来，而是两种工作之间的协作摩擦在减少。AI 充当翻译和助手的角色，让不同背景的人更容易相互理解。

这个趋势会持续下去。几年后回看，2026 年的 Config 可能是一个标志性节点——设计工具开始认真把「代码」和「AI」当作一等公民。

---

Config 2026 的其他更新还包括 Figma Sites（设计稿一键发布为网站）、Figma Buzz（面向品牌和营销团队的工具）、Figma Draw（矢量绘图工具）等，本文聚焦于代码和 AI 相关的核心更新。