- 如何为 Figma Agent 配置设计库与编写使用指南
- 利用案例（Examples）和上下文（Context）指导 Agent 进行设计
- 创建与使用技能（Skills）自动化重复性设计系统任务
- 运用 Agent 进行设计审计、文档生成与组件对齐
背景：为什么需要 Figma Agent 来管理设计系统？
在高速迭代的产品团队中，设计系统的维护与一致性问题日益凸显。清理命名、检查令牌使用、更新文档、发现产品与设计库的偏离……这些工作必要却容易被搁置。
Figma Agent 是一个直接构建在 Figma 画布中的 AI 智能体，它能够理解你的设计系统，并基于此执行任务。它的核心价值在于将设计系统的维护与应用自动化，让设计师能专注于更有创造性的工作，同时确保产出物符合团队规范。
资料显示，Uber、Granola 和 Atlassian 等团队已利用 Figma Agent 来支持高质量、快节奏的工作。对于中国的设计团队而言，学习使用 Figma Agent 是提升设计系统 ROI（投资回报率）和团队生产力的关键一步。
准备：开始使用 Figma Agent
要充分发挥 Figma Agent 的潜力，你需要准备好设计系统资产并了解其访问权限。
所需账号与权限
Figma Agent 面向 Professional、Organization、Enterprise 及部分 Education 计划中的 Full seat（完整席位）用户开放，Starter 计划功能有限。Collab、Dev 和 View 席位用户可以在他们的草稿中使用 Agent。具体权限和价格请以 Figma 官方最新说明为准。
核心资产准备
你需要一个已发布（Published）的 Figma 设计库（Library），这是 Agent 工作的基石。同时，准备好你的设计指南文档、典型的界面案例文件，并思考团队中哪些重复流程可以自动化。
- 一个已发布的设计库（包含组件、变量）
- Markdown 格式的设计指南文件
- 体现设计系统最佳实践的示例 Figma 文件或帧
- 明确需要自动化的重复性任务清单
1连接设计库与编写指南
这是让 Agent “认识”你设计系统的第一步，包括提供基础组件和明确使用规则。
连接设计库：在 Agent 聊天框中，点击提示框内的“Libraries”，然后选择你为此项目准备的已发布库。连接后，Agent 就能识别团队批准的资产，并在其输出中使用这些组件和变量。例如，当你要求 Agent 构建一个订单摘要卡片时，它会从库中提取已有的 Card/OrderSummary/Default 组件、批准的按钮变体以及间距和颜色变量来组装设计。
编写指南（Guidelines）：组件库告诉 Agent“有什么”，而指南则告诉它“怎么用”。指南是附加在已发布设计库上的 Markdown 文件，用于编码那些无法从组件本身看出的团队决策。例如，你的库里有主要（primary）和次要（secondary）按钮，但团队规定结账屏幕上的“下单”CTA 必须使用主要按钮。你可以将这条规则写入指南。
- 打开 Agent 聊天框，在提示框中选择“Libraries”并连接你的库
- 打开你的设计库，进入 Library → Manage guidelines
- 上传包含指南的 Markdown 文件，点击 Apply changes
指南内容示例：
- 规则：结账流程中的最终确认按钮始终使用 `Button/Primary` 变体。
- 错误避免：禁止将红色仅用于装饰，红色仅用于“删除”等破坏性操作。
- 选择建议：在表单中，成功状态提示使用 `Toast/Success`，而非 `Banner/Success`。2提供案例与添加上下文
有时，展示一个例子比用文字描述更有效。你可以通过案例（Examples）和添加上下文（Add context）来指导 Agent。
发布可复用的模式案例：对于你希望在未来工作中重复使用的模式，可以将完整设计作为组件发布在名为“Examples”的页面，或在名称末尾添加“_example”。Agent 能够识别这些命名约定。例如，一个展示了地址表单如何分组字段和处理间距的 ShippingForm_example 组件。
为当前任务添加上下文：如果某个设计仅对当前工作有参考意义，并非通用模式，可以直接将其作为上下文附加到当前提示中。点击聊天框的“+”号，选择“Attach Figma files”，然后选择或粘贴相关的设计帧。你甚至可以直接将截图粘贴到聊天中，让 Agent 将其转换为可编辑的设计。
| 方法 | 目的 | 操作 |
|---|---|---|
| 指南 (Guidelines) | 定义跨项目的通用规则 | 上传 Markdown 文件到设计库 |
| 案例 (Examples) | 展示可复用的完整模式 | 发布为带 _example 后缀的组件或放在 Examples 页面 |
| 添加上下文 (Add context) | 提供当前任务的特定参考 | 在提示中附加 Figma 文件、帧或图像 |
3创建与使用技能（Skills）
技能（Skills）是可重复使用的指令集，用于封装团队的特定工作流程或专业知识。它们能将重复性手动操作转化为一键式自动化任务。
你可以创建自己的技能，也可以使用 Figma 社区分享的技能。例如，Uber 的 Ian Guisard 创建了 /create-anatomy 技能来展示组件结构，以及 /create-color 技能将填充、描边等映射到设计令牌，用于自动化生成开发文档。
技能与设计系统相辅相成：设计系统提供组件和模式，技能则叠加团队的其他专业知识，如品牌语调、合规指南、评审流程等。
- 告诉 Agent 你希望技能做什么，并给出步骤
- 预览并编辑技能（支持直接在 Markdown 编辑器中编辑）
- 保存后，你与团队成员都可以在未来的对话中调用该技能
技能示例：
/design-system-audit: 检查所选屏幕是否符合设计库，标记分离的实例、硬编码值、误用的组件和可访问性差距。
/analyze-components: 审查组件是否存在重复、命名错误以及与库失去连接的组件。4利用 Agent 进行维护与对齐
配置好 Agent 后，你可以主动用它来减轻设计系统的维护负担，并确保产品设计与系统同步。
自动化文档工作：让 Agent 帮助你起草或更新组件文档，阐述使用方式、行为准则，展示不同变体的视觉示例，甚至推荐用于交接的组件 API（例如将布尔值合并为枚举）。这能帮助团队专注于改进系统，而非手动更新每份规范。
检查与对齐设计：Agent 可以筛查屏幕，创建所用组件和令牌的清单，并将其映射到相应的库。例如，如果设计师在结账屏幕上从头创建了一个“稍后保存”按钮，Agent 可以检查并标记出它重复了系统中的 Button/Secondary 组件，并指出是否使用了硬编码的颜色值。
批量更新与清理：你可以通过 @-提及 组件，要求 Agent 在整个设计中批量替换特定的组件或令牌。对于命名不一致（如 hover, hovered, mouse-over）或使用通用名称（如 icon_1）的资产，Agent 可以帮助你盘点、标准化并应用新的命名规则。
案例分析：来自 Uber、Granola 和 Atlassian 的实践
Uber：规模化设计系统文档
Uber 的设计系统团队需要管理横跨七个平台的组件。Staff Product Designer Ian Guisard 利用 Figma Agent 和一套自定义技能（如 /create-anatomy, /create-color, /create-api）来自动化生成开发就绪的文档。过去需要多人耗时数月完成的文档，现在一名设计师一个下午就能发布，在提升质量的同时大幅缩短了时间。
Granola：自信设计并保持同步
Granola 的产品设计师 Paavan Buddhdev 使用 Figma Chrome 扩展将应用现有屏幕导入 Figma，但导入的按钮等元素会与设计系统断开连接。他不再手动替换，而是选择导入的按钮，要求 Agent 换入设计系统中的对应按钮。此外，他还利用 Granola 连接器，让 Agent 直接从会议笔记和转录中提取反馈并标注在画布上，使他能在会议中更专注地参与。
Atlassian：将动效操作化
Atlassian 的动效团队将动效资产转化为 Figma 中的可复用组件。设计师在为 onboarding 弹窗选择动效插图时，可以从库中挑选。如需定制，Agent 可以帮助他们在符合 Atlassian 设计系统变量的前提下，迭代调整缓动曲线和持续时间。这使不精通动效的设计师也能产出既富有表现力又符合品牌的作品。
对比与选择建议：何时以及如何有效使用 Agent
Figma Agent 并非万能，理解其强项和局限能帮助你更有效地应用它。
适用场景：
- 基于设计系统进行创作：当你的设计库和指南准备充分时，Agent 是快速生成符合规范设计的强大助手。
- 重复性维护任务：如文档生成、设计审计、命名规范化、令牌使用检查等。
- 设计对齐与修复：将偏离系统的设计批量更新回正确组件，或检查新设计的一致性。
- 封装团队工作流：通过技能将最佳实践（如评审流程、文案检查）固化下来。
当前局限与注意事项：
- 指南在编辑现有设计时应用的一致性仍在改进中。
- 输出仍需人工复核。如果发现 Agent 持续犯同样错误，这可能是一个信号，提示你需要更新指南、复查设计库或提供更好的示例。
- 对于高度创新、尚无先例或系统外的新颖设计，Agent 可能不是最佳起点。
进阶技巧：发挥技能与连接器的最大价值
要最大化 Figma Agent 的效用，需要超越基础提示，深入利用技能和连接器。
创建高价值技能：思考你团队中那些“只可意会”的流程。例如：模拟特定利益相关者的反馈风格；执行符合品牌标准的 UX 文案检查；以新用户视角审视体验以发现摩擦点；创建“快速同步”技能来汇总文件近期活动，帮助休假归来的成员快速跟上进度。
利用 MCP 连接器融入现有工具链：技能可以通过 MCP 连接器与 Slack、Notion、Asana、Amplitude 等工具交互。这意味着 Agent 可以在工作时带入产品需求文档（PRD）、用户研究笔记、项目讨论或产品数据等上下文。例如，一个技能可以在设计评审后，将评论反馈转化为项目管理工具中的任务；或者从研究库中提取相关用户洞察来支持设计决策。
- 从 Figma 社区探索现成技能，获取灵感
- 将经常使用的复杂提示流程转化为技能，方便复用
- 为技能连接外部数据源，让设计决策更有依据
总结
Figma Agent 的出现，标志着设计系统管理从“人工巡检”向“智能协作”的转变。成功的关键在于将你的设计系统——包括组件库、使用规则、实践案例和团队流程——有效地“翻译”给 Agent。
通过系统性地连接库、编写指南、提供案例、创建技能，你可以让 Agent 承担起设计审计、文档维护、对齐检查等繁重工作，从而解放设计师，让他们更专注于解决核心用户体验问题和进行创新探索。
开始行动吧：选择一个你团队中最耗时、最重复的设计系统维护任务，尝试用 Figma Agent 来解决它。从实践中学习，逐步将 Agent 深度整合到你的设计工作流中。
要点速览
- Figma Agent 的强大基于清晰的设计系统，务必先发布库并编写指南。
- 通过案例（Examples）和上下文（Context）提供视觉参考，比纯文字描述更有效。
- 将重复流程封装为技能（Skills），是实现设计工作自动化的核心手段。
- 主动使用 Agent 进行设计审计和文档生成，能大幅减轻系统维护负担。
- Agent 的输出仍需人工复核，其错误往往是改进设计系统资产的信号。
- 利用 MCP 连接器，让 Agent 融入现有工具链，获取更丰富的设计上下文。
