Figma 的演进:代码图层、AI 插件与动效支持

Figma 通过其最新的重大更新,正在从根本上重新定义设计与开发之间的边界。通过将代码图层和生成式 AI 能力直接集成到其协作画布中,该平台正在从一个静态的原型设计工具转型为一个动态的多学科协作环境。

通过代码图层弥合差距

为了向“设计与代码对等”(design-to-code parity)迈出重要一步,Figma 在其多人协作画布上直接引入了代码图层。这一功能允许工程团队克隆代码库,并将现有的代码流提取回设计图层,以便进行快速测试和迭代。

与设计师向开发人员交付静态文件的传统工作流不同,Figma 首席产品官 Yuhki Yamashita 强调,这一环境是为了“探索”而非“生产就绪的完美”而构建的。通过允许设计师、产品经理和工程师以空间化、非线性的方式与代码进行交互,Figma 旨在加速产品开发的探索阶段,减少交付过程中常见的摩擦。

高级动效、着色器与 3D 变换

多年来,高保真动效设计要求设计师在 Figma 和专业的动画软件之间来回切换,这往往会导致复杂的转换过程。Figma 正在通过增加对动画、过渡和 3D 变换的原生支持,来消除这种复杂性。

此次更新还通过引入对着色器(shader)效果和填充的支持,扩展了视觉工具箱。这使得在工具内部即可对更复杂、高性能的视觉元素进行原型设计,从而确保在产品生命周期的更早期阶段就能捕捉到产品的“感官体验”。

生成式 AI 与自定义插件创建

Figma 正在通过将画布转变为可编程的工作区,加大对其 AI 路线图的投入。用户现在可以使用文本提示词为 AI Agent 创建可重复使用的“技能”,使 AI 助手成为定制化的协作伙伴,而非通用的工具。为了提高准确性,AI 现在可以从 Notion、Excel、GitHub、Granola 等外部工具以及各种上传的文件中获取上下文信息。

对开发者社区而言,或许最具突破性的是通过简单的提示词创建自定义插件的能力。无论用户需要特定的布局生成器还是复杂的矢量路径追踪器,他们现在都可以在不编写传统代码的情况下,在 Figma 内部构建定制化的功能工具。

集成 Weavy 以实现模型驱动的工作流

基于对基于节点的工具 Weavy 的收购,Figma 正致力于集成先进的模型驱动工作流。今年晚些时候,用户将能够在 Figma 界面内直接生成 Weavy 工作流。这将允许设计团队通过不同的 AI 模型运行复杂的工作流以比较输出结果,从而确保所选的设计方向在各种生成参数下都得到了优化。

核心要点

  • 设计与代码的对等性: 新的代码图层允许团队将代码库数据拉取到画布中,使设计环境成为工程师和设计师真正协作的空间。
  • 原生动效与着色器: Figma 现在支持 3D 变换、过渡和着色器效果,减少了对外部动画软件的需求。
  • AI 驱动的可扩展性: 用户现在可以通过文本提示词生成自定义插件和可重复使用的 AI “技能”,并与来自 GitHub 和 Notion 的外部数据集成。