2026年10月29日我们如何训练一个精通 Figma 的编辑模型Josh Clemm,Figma 软件工程副总裁Abstract illustration of a large green mechanical wheel threaded with winding golden ropes, surrounded by green and pale yellow circles.

我们越来越发现,专门的后训练可以与前沿模型相竞争。在这里,我们分享将这一思路转化到设计编辑工作流背后的研究。

分享 我们如何训练一个精通 Figma 的编辑模型

    插图由 Pete Gamlen 绘制

    设计师使用 Figma 完成各种各样的工作,从探索一个新想法到构建完整的产品。但大量日常工作更琐碎、更具迭代性,而且往往无法验证。调整间距。更改颜色。在有人留下反馈后重做布局。每一次更改都建立在沿途所做的决策之上。这就是为什么当我们着手构建 Figma agent

    Figma 设计 agent 来了

    从今天起,与一个专为 Figma 打造、直接运行在画布上的 agent 协作。

    时,我们从一个聚焦的任务开始:帮助设计师对画布上已有的作品进行编辑。

    “Open space” card featuring a peach armchair, low wooden table, vase, circular wall light, and an arrow icon at top right.
    提示:将位置标签组件插入照片左上角
    1. “Open space” card featuring the same interior, with a white “Location” badge at top left and an arrow icon at top right.
    输出:所请求的位置标签已存在、对齐良好、清晰可读且被包含在内;无关内容得到保留

    我们希望我们的 agent 既更擅长设计,又更快完成这些编辑。而且由于设计师全天都在进行这些编辑,速度很重要。一次耗时过长的编辑可能会打断它本应帮助的工作流。

    教模型在 Figma 中编辑

    当我们开始这项工作时,前沿模型无法理解 Figma 语法,而要让其奏效需要大量系统提示,会极其消耗 token。于是,我们转而投入监督微调(SFT)。每个训练样本都将一个起始设计与一个生成的合成编辑请求以及一个成功的更改示例配对。我们以 Figma 的原生文件格式表示设计,因此模型学会了生成可以应用回画布的更改。当任务需要设计系统资产时,我们生成涵盖主题和组件更改的合成提示。

    随后,我们使用更大的教师模型尝试这些编辑,用确定性验证器和视觉模型评判器检查候选结果,包括检查输出是否有效以及请求是否得到满足。生成流水线可以自我修复,并利用评估器反馈修订编辑。

    这种方法让我们走得比预想中远得多。我们 甚至 能够让我们早期的一个 Llama 3.3 70B 模型(在超过 250,000 个样本上训练)在当时与顶级模型在编辑任务上相竞争!

    Training pipeline diagram linking user content, interaction history, and design systems to training data generation, evaluator construction, model training, and LLM judge training informed by designer annotations.
    我们最早的 SFT 流水线

    但自那以后,我们转向了能力更强的基座模型,包括更新的 Qwen 模型、Muse Spark Open、Inkling 等。我们也遇到了仅靠 SFT 实现这一特定目标的局限。模仿学习教会模型生成与训练中所见非常相似的设计,代价是泛化能力的丧失。此外,它的样本效率较低,这意味着训练需要大量覆盖任务各个方面的样本。因此,在我们最新的训练配方中,我们也在投入强化学习(RL)。我们的重点是更好的设计领域 RL 环境、提升训练样本的整体多样性、塑造我们的奖励模型,并扩展专家编写的标准,使这些奖励反映设计师真正关心的事情。

    我们如何评估设计编辑

    为了判断一个模型是否是一个好的起点,我们会让它通过我们的内部评估。我们不仅关心它在 Figma 中工作得如何、遵循指令、对现有设计做出有用的更改,还关心完成这项工作的速度和成本。

    优秀的设计往往是主观的,但这并不意味着我们必须将质量视为一个无法衡量的东西。一个设计可能对齐良好但对比度差。一次编辑可能看起来精致却仍未满足请求。一个按钮可能看起来正确却使用了错误的组件。

    下面的示例展示了 AI 生成设计的常见错误:

    Clothing product cards for a $120 angora cardigan and $120 quilted jacket, with heart icons overlapping the brand names.
    图标与文字重叠
    Right-aligned shipping and policy panel with estimated delivery dates, truck and policy icons, and partially clipped dropdown arrows.
    箭头被裁剪
    Hotel booking card showing $200.7 per night, overlapping location and description text, room previews, and a purple “Booking Now” button.
    文字元素重叠

    我们分别评估这些维度。我们将对设计结构的检查与视觉评判器相结合,然后使用专家设计师来校准和审查结果。这有助于我们了解模型在哪些方面成功,以及它还需要学习什么。

    例如,以下是几个顶级模型在我们内部 Figma 编辑评估中的得分。再次说明,这只是我们用来决定在产品中考虑使用哪些模型的众多输入之一。

    Horizontal bar chart comparing Figma design edits v3 at 77.8% with Sol 6.1 at 76.9%.
    比较最新的未发布 Figma 编辑模型(基于 Qwen 3.8 27B 后训练)与其他第三方模型在设计编辑任务上的表现

    这个模型在 Figma agent 中的定位

    本月早些时候,我们 向所有用户推出了 Figma agentExample prompts hover over a mobile screen

    产品设计师使用 Figma agent 提升工艺、速度与创意表达的 3 种方式

    以下是 Uber、Granola 和 Atlassian 的团队如何借助现已全面可用的 Figma agent 支持高质量、快节奏的工作。

    ,其中包含我们的第一方编辑模型。该 agent 同时运行这个专门模型和领先的第三方模型,将它们用于工作的不同部分。对于图像生成、矢量或全新设计探索等某些任务,我们使用可用的最佳第三方模型。对于我们的模型处理良好的精确编辑和迭代,我们使用自己的模型。

    周围的画布也很重要。agent 需要来自画布和设计系统的上下文,以及能够做出所请求更改的工具。后训练帮助模型更好地完成其在这项工作中的部分。

    Figma's agent

    了解更多关于 产品设计师如何使用 Figma agent 提升工艺、速度与创意表达的信息。

    我们对 Figma agent 的早期结果感到鼓舞。即使在从 beta 到全面可用之间的这段时间里,典型任务也快了约 20%。在与专家设计师的正面对比测试中,新 agent 有 62% 的情况优于或持平上一版生产 agent。用户评分高出 33%,用户撤销 agent 工作的频率降低了 60%。

    由我们自研的后训练设计模型驱动的工作占比已经翻了一倍多。同时,我们还降低了每条消息的平均成本。这些收益来自 agent 各方面的改进,包括模型、工具和运行框架。我们的编辑模型是这一进展的一部分,它为我们提供了一条持续改进设计师最常重复任务的途径。

    我们下一步的方向

    这项工作表明,经过后训练的模型可以在 Figma 编辑这类专门任务上与前沿模型竞争。从一个聚焦的问题入手,让我们能够把进展转化为对用户有意义的 product updates,使他们能够减少管理单个编辑的时间,把更多时间用于将构想变为现实。

    如果你对面向不可验证领域的设计与后训练模型感兴趣, 查看我们的开放职位——我们正在招聘。

    我们以尊重客户隐私和偏好的方式进行训练。你可以在这里了解更多关于我们的方法。 这里.

    Josh Clemm 是工程副总裁,负责监管 Figma 的 AI 平台和上下文层。在 2026 年加入 Figma 之前,Josh 是 Dropbox 的工程副总裁,负责 AI 工程。在此之前,他长期领导 Uber Eats 的工程工作。

    LinkedIn

    免费开始使用

    免费开始使用