Figma 新推出的设计 Agent 不再只是生成图片交付给你，而是会在团队正在工作的画布中共同编辑真实图层。不过，结果质量与其说取决于提示词技巧，不如说更取决于组件、变量和文档是否整理得足够清晰。
变化的重点是工作场所，而不只是生成功能
Figma 设计 Agent 的核心在于，AI 和人可以查看同一个文件、同一批图层和同一套设计系统来协作。这个 Agent 于 2026 年 5 月发布，位于 Figma Design 的画布和左侧栏中，可从选定图层直接开始输入提示词。Agent 工作期间，设计师也可以自行修改其他部分，或并行运行多个提示词来比较不同方向。
因此，它相比从空白画面产出一个成品，更适合用于探索和迭代。你可以针对同一个结账页面生成三种信息架构，或同时铺开标题位置和图片构成不同的方案进行比较。找到喜欢的方向后，不必持续追加提示词，直接在画布上调整图层即可。Figma 也说明，在某些场景中直接编辑会更自然，并且能节省 AI 使用量。
| 类别 | Figma 设计 Agent | Figma Make | Figma MCP |
|---|---|---|---|
| 主要工作空间 | Figma Design 画布 | 基于代码的原型编辑器 | 外部编码 Agent 和终端 |
| 主要结果 | 可编辑的设计图层 | 可验证行为的原型 | 设计与代码之间的读写 |
| 适合的工作 | 方案探索、批量编辑、吸收反馈 | 验证交互与行为 | 在代码与画布之间往返 |
| 额外设置 | 可直接在画布中使用 | 在 Figma 产品内使用 | 需要连接 MCP 服务器 |
这三个工具并非竞争关系，而是分别承担不同的工作阶段。你可以用 Design Agent 整理界面的流程、状态和文案，发送到 Make 验证行为后，再带回 Design。如果从代码开始，也可以借助 MCP 的 use_figma 工具创建使用真实组件和变量的图层，再在画布中细化。
好的设计系统现在也是 AI 的界面
要让 Agent 产出符合品牌的结果，设计系统不能只是给人看的漂亮陈列，而应成为机器难以误解的工作规则。Figma 表示，库越结构化、越完整，Agent 就越能准确地理解和应用设计。你可以直接选择要连接的库，也可以在提示词中用 @提及特定 token、变量和组件来缩小使用范围。
尤其是，如果只收集按钮、输入框这类小型原子组件，Agent 就必须猜测组合规则。提供卡片、页头、功能行这类已包含间距、排版和颜色规则的高层级模块会更有利。同时也需要自动布局、有意义的图层名称、明确的 variant 和 state，以及颜色、间距和排版变量。最近修改过的库必须发布，Agent 才能引用最新版本。
属性说明可能比精美的说明页面更重要
人可以一眼理解画布上摆放的使用示例和禁止标记，但 Agent 必须从框架、文本和形状构成的树中推断含义。若在组件说明中用纯文本写明用途、与相似组件的差异、状态和无障碍要求，意图会传达得更直接。
文档整理本身也可以交给 Agent。你可以选择现有模板，让它起草组件说明、将图层名称统一为 kebab-case、查找缺失的 state 和 variant，或把界面中重复出现的模式整理为新组件候选。官方帮助文档还提供了一种工作流：将 CSS 变量列表放到画布上，找出实际代码与 Figma 变量之间缺失的项目。
快速生成与安全交接是两回事
把当前 beta 当作成品自动制作器是有风险的。Entify Design 使用自有设计系统进行的公开测试显示，在指示 Agent 使用已连接的库后，结果确实有所改善；但仍观察到按钮内部使用了语义错误的颜色变量，或将用于文本的变量应用到了分隔线上。画面即使看起来很像样，token 引用也可能是错的。
同一测试中还出现了在浅色背景上使用低对比度颜色的情况。由于这只是单个团队的测试，不能推广到所有环境；但至少足以警示我们，不能把生成速度视为已可交接的证据。Figma 也建议在发布库之前，单独检查错误的颜色、来自其他库的组件、变量和样式，以及应该改为变量的硬编码值。
不要只看画布就批准
即使视觉上的颜色和间距都正确，实例也可能已分离，或连接了语义不同的变量。交接给开发之前，应分别检查组件连接、变量来源、variant、自动布局和对比度。
测试前也应确认访问条件和费用。截至 2026 年 8 月，该 Agent 处于开放 beta 阶段，面向 Professional、Organization 和 Enterprise 计划提供。共享文件中的聊天功能可由 Full seat 使用；在 drafts 中，Full、Dev、Collab 和 View seat 都可以试用。beta 期间，Agent 的提示词和工作不会消耗 AI credits，但正式发布后预计将适用常规 AI credits 政策。
用一个界面安全测试的 4 个步骤
- 复制一个小而可验证的目标。
将登录、搜索结果或结账等状态明确的一个界面复制到单独页面。应从副本而非原件开始，并写下成功标准，例如“包含错误、空白和加载状态”“只使用现有库”。 - 在提示词中固定库和规则。
从 Figma Design 左侧栏打开 Agent，并选择目标框架。指定要使用的库后，@提及所需的组件和变量。也要同时写明允许范围，例如：“将此框架复制为三种信息架构，但不要创建新颜色或分离的组件。” - 将生成与批量修改分开。
先让它在不同框架中创建三种方向，再由人选定其中一个。只在选中的方案内，请求输入实际文案、统一 padding、变更组件状态等重复性工作。不要把探索和整理混在同一个提示词里，这样更容易找到规则在哪个阶段被破坏。 - 仅在结构审查后交接。
在图层面板和 Variables 面板中检查实例连接、语义 token、硬编码值和自动布局。还要检查 hover、focus、error、disabled 状态及颜色对比度。只要出现一个错误，就不要整体重新生成；应只选择相应框架和变量进行修改，然后再次确认。
这项实验要看的指标不只是“几分钟生成了一个界面”。还应记录初次结果中保留的图层比例、错误连接的变量数量、分离实例的数量、无障碍错误，以及人工审查和修正花费的时间。即使生成时间缩短了，如果审查时间增加，生产工作流就还没有变快。
如果想深入了解
The Figma design agent is here — 可以了解画布 Agent 的发布背景、并行提示词、批量编辑和利用反馈的示例。 figma.com
Get started with Figma AI — 适合查阅当前 beta 提供计划、不同 seat 的使用范围，以及与 Figma Make 的差异的官方帮助文档。 help.figma.com
AI workflows collection: Best practices to help Figma AI understand your design system — 介绍如何整理组件名称、高层级模块、变量和说明字段，让 Agent 更容易理解。 help.figma.com
AI workflows collection: Use the Figma agent to improve your design system — 汇总了可直接用于文档化、批量修改、模式提取和发布前审查的提示词。 help.figma.com
We Tested Figma Agent on a Real Design System. — 一项独立测试，展示了在真实设计系统中发现的语义 token 偏离和无障碍问题。 entifydesign.com
