Figma推出AI动效与着色器工具，Canvas全面优化

背景

在年度开发者大会 Config 上，UI/UX 设计协作平台 Figma 发布了一系列旨在通过 AI 帮助创意人员“进一步拓展想法”并自动化繁琐任务的新产品更新。此次更新的核心在于对 Figma 画布（Canvas）进行了重新构想，据 Figma 官方介绍，新的画布已针对全栈开发（full-stack development）进行了优化，旨在将团队、AI 智能体（agents）、工具和素材“集中在一个地方”。

关键要点

• 代码层（Code Layers）：允许设计师在不离开 Figma Design 画布的情况下直接处理项目代码。功能包括克隆代码仓库、利用 Figma 智能体生成新方向、将用户流程提取为可编辑的设计层，并将更改同步回代码。
• Motion（动态效果）：支持在 Figma 内部协作设计动画、过渡效果和 3D 变换。用户可以通过提示词（Prompt）让 AI 创建动画，应用预设样式，或在时间轴上手动调整。该功能与 Figma 的设计系统相连，由代码支持，并具备直接交付（ready to ship）的能力。
• Shaders（着色器工具）：基于 WebGPU 技术，允许用户通过提示词构建着色器效果和填充，实现自定义视觉处理。此前 Figma 无法实现的效果，如抖动（dither）、像素化（pixelate）以及各种模糊类型，现在可以直接在画布上创建。
• Figma Weave 工作流：集成 20 多种 Weave 工具，帮助用户在 Figma 中生成一致且高质量 visuals。这标志着 Figma 与 Figma Weave 之间全面整合的第一步，预计将在今年晚些时候完成。
• 智能体技能与更深层次的上下文：将重复性工作转化为团队可共享的“技能”，使团队能更精准、一致地使用 Figma 智能体。通过第三方连接器、网络搜索和文件附件，为智能体提供更丰富的上下文信息。
• 生成式插件（Generative Plugins）：允许用户利用智能体构建自定义、可复用的插件，从而扩展 Figma 的功能。无需开发者设置或技术背景，只需通过提示词即可将想法转化为可调整、可分享的工具。

核心内容

Figma 此次更新的重点在于弥合设计与开发之间的鸿沟，特别是通过引入 AI 驱动的动态效果和着色器工具，以及增强对代码的直接支持。

首先，代码层（Code Layers） 的引入是此次更新的一大亮点。它打破了传统设计工具仅处理视觉元素的局限，允许用户直接在 Figma Design 画布上工作于代码层面。用户可以克隆代码仓库，利用 Figma 的智能体（agent）生成新的设计方向，将复杂的用户流程提取为可编辑的设计层，并将设计变更同步回代码库。这一功能旨在让设计师和开发者在同一个界面中无缝协作。

其次，Motion（动态效果） 和 Shaders（着色器） 工具极大地丰富了 Figma 的视觉表达能力。

• 在 Motion 方面，用户现在可以直接在 Figma 中设计动画、过渡效果和 3D 变换。通过简单的提示词描述，AI 即可生成动画效果，用户也可以应用预设样式或在时间轴上进行手动微调。重要的是，这些动画不仅限于设计预览，它们与 Figma 的设计系统紧密连接，由代码支持，并可以直接用于生产环境（ready to ship）。
• 在 Shaders 方面，Figma 引入了基于 WebGPU 的着色器效果。用户只需通过提示词即可构建复杂的视觉填充效果。此前在 Figma 中难以实现的高级视觉效果，如抖动、像素化和多种模糊类型，现在都可以直接在画布上创建，为设计师提供了更强大的视觉控制力。

此外，Figma Weave 工作流 的集成也是重要一环。通过集成 20 多种 Weave 工具，Figma 能够将复杂的 AI 工作流简化为画布上的简单工具，帮助用户生成一致且高质量的视觉内容。这是 Figma 与 Figma Weave 全面整合的第一步，预计将在今年晚些时候完成更深入的融合。

最后，Figma 还增强了其 AI 智能体（Agent） 的能力。通过引入“智能体技能”，团队可以将重复性的工作流程转化为可共享的技能，提高工作的精确性和一致性。同时，通过支持第三方连接器、网络搜索和文件附件，智能体能够获取更深层次的上下文信息，从而提供更准确的辅助。配合 生成式插件 功能，非技术人员也能通过提示词构建自定义插件，进一步扩展 Figma 的功能边界。

意义与影响

Figma 此次更新标志着其从单纯的“设计工具”向“全栈设计与开发协作平台”的转型。通过引入代码层、Motion 和 Shaders 等工具，Figma 正在消除设计与开发之间的传统壁垒，使设计师能够更直接地参与代码逻辑和动态效果的实现，而开发者也能更紧密地与设计意图对齐。

AI 的深度融合（如通过提示词生成动画、着色器和插件）不仅提高了工作效率，降低了技术门槛，还赋予了创意人员更大的表达自由。特别是 Motion 和 Shaders 的“ready to ship”特性，意味着设计成果可以更无缝地转化为前端代码，减少了从设计到开发的转换损耗。

总体而言，Figma 的这些更新旨在构建一个更加一体化、智能化的工作空间，让团队、AI 智能体和工具能够在同一个环境中高效协作，从而推动创意想法更快、更准确地落地。