Figma新增AI动效、着色器和代码图层

关键信息

代码图层允许用户不离开 Figma Design 画布就调整项目代码，包括克隆仓库、借助 Figma 代理生成新方向、将流程提取为可编辑的设计图层，并把修改同步回代码。动效和着色器功能也很重要，因为动效支持通过提示词创建动画并在时间轴上手动调整，而着色器则利用 WebGPU 在画布内直接生成抖动、像素化和新的模糊效果。

资讯摘要

Figma 在年度 Config 大会上发布了一系列产品更新，目标是帮助创作者“把想法推进得更远”，并借助 AI 自动化繁琐工作。公司表示，画布已经重新设计，以支持全栈开发，把团队、AI 代理、工具和素材“放在同一个地方”。其中一个重点是代码图层，用户无需离开 Figma Design 画布就可以直接处理代码。Figma 说，用户可以克隆仓库、让代理生成新的方向、把流程提取成可编辑的设计图层，并将修改同步回代码。另一个重点功能是 Motion，它允许团队协作设计动画、转场和 3D 变换。

用户可以通过 Figma 的聊天机器人提示 AI 生成动画，也可以应用预设风格，或者在时间轴上手动微调，最终结果与设计系统和可交付代码相连。Figma 还推出了 Shaders，允许用户通过提示词使用 WebGPU 构建着色器效果和填充，包括此前在 Figma 中无法直接创建的抖动、像素化和多种模糊效果。公司还宣布了 Figma Weave 工作流，它把 20 多个集成的 Weave 工具整合起来，帮助用户在画布上简化复杂的 AI 工作流，而更完整的整合预计将在今年晚些时候推出。最后，Figma 介绍了代理技能、更深的上下文支持、第三方连接器、网页搜索和文件附件，以及生成式插件功能，后者可以把提示词变成可复用工具，而且不需要开发环境搭建或技术背景。

资讯正文

Figma 在其年度 Config 大会上公布了一些新的设计与编码产品更新，旨在帮助创意工作者借助 AI“把想法推进得更远”，并自动处理那些繁琐的任务。其中一部分是重新构想的画布，据 Figma 介绍，它现在针对全栈开发进行了优化，将团队、AI 代理、工具和素材“汇聚在一个地方”。

其中值得关注的功能包括 code layers，它允许你在不离开 Figma Design 画布的情况下调整项目代码；以及 AI 生成的 motion graphics 特效，只需向 Figma 的聊天机器人界面描述动画和转场效果，就能创建它们。你可以前往 Figma 的网站，了解更多关于这些新产品更新的信息。

[Media: https://www.youtube.com/watch?v=wpGI6BmhbJU]

此外，以下是 Figma 对此次全部发布内容的概述：

> 用于表达创意的新素材

> ● Code layers：直接在 Figma Design 画布上处理代码。克隆代码仓库，用 Figma 的 agent 生成新的方向，将流程提取为可编辑的设计图层，并将更改同步回代码。

> ● Motion：直接在 Figma 中协同设计动画、转场和 3D 变换。通过提示词用 AI 创建动画，应用预设样式，或在时间轴上手动调整。Motion 已连接设计系统、具备代码支持，并且已准备好交付。

> ● Shaders：通过提示词构建 shader 效果和填充，这些由 WebGPU 支持的自定义视觉处理。以往在 Figma 中无法实现的效果，如 dither、pixelate 以及各种模糊类型，现在都可以直接在画布上创建。

> ● Figma Weave workflows：借助 20 多个集成的 Weave 工具，在 Figma 中生成一致且高质量的视觉效果，把复杂的 AI 工作流转化为画布上的简单工具。这是 Figma 与 Figma Weave 深度整合的第一步，完整整合预计将在今年晚些时候推出。

> 面向团队和代理协作的新智能工具

> ● Agent skills and deeper context：把重复性工作转化为整个团队都能使用的技能，以便更精确、更一致地使用 Figma 的 agent。通过第三方连接器、网页搜索和文件附件，引入更多上下文。

> ● Generative plugins：通过 agent 构建自定义、可复用的插件，扩展 Figma 的能力。把提示词转化为可调整、可分享的工具——无需开发者环境配置，也不需要技术技能。

来源与参考

1. 原始链接
2. Figma now has AI motion graphics and shader tools