2026年10月23日如何让 Figma agent 用上你的设计系统Wayne LinFigma 产品经理

你的设计系统可以帮助 Figma agent 理解定义你产品的原则和指南。以下是如何让这些上下文对 agent 有用。

分享 如何让 Figma agent 用上你的设计系统

    主视觉插图由 Cynthia Alfonso 绘制

    Figma agentExample prompts hover over a mobile screen

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

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

    是一个强大的协作者。但和任何协作者一样，它的价值取决于你给它的信息。它掌握的关于你的设计系统和当前工作的上下文越具体，就越有能力做出反映你团队实际构建方式的决策。有了正确的上下文，agent 就能产出真正看起来、感觉起来像你产品的成果，这样你就能少花时间纠正通用或偏离品牌的工作。

    这些上下文大部分已经存在于你的设计系统中，从 agent 应该使用的组件和 token，到展示它们如何组合的成文规则和示例。挑战在于确保 agent 在需要时能够访问所有这些内容。以下是如何给它完整的全貌。

    从你的唯一可信来源开始

    你的设计库包含 agent 所需的最基本构建块。将你已发布的库连接到 agent，就为它提供了这个基础。连接后，agent 就能识别哪些资产已获你团队批准，并在其输出中使用这些组件和 token。

    通过打开 agent 聊天、在提示框中选中“Libraries”，并选择你希望在此项目中使用的已发布库，让 Figma agent 访问你的库。

    假设你的团队正在开发一个新的结账流程。如果你让 agent 构建一个订单摘要卡片，它可以从你库中已定义的组件和变量中提取。它可能会使用你现有的 Card/OrderSummary/Default 组件、已批准的按钮变体，以及你的间距和颜色变量来组装设计，而不是用自带的样式和结构从头创建一张新卡片。

    当你希望 Figma agent 更改产品中特定部分的特定资产时，比如替换屏幕上的一个按钮，你可以 @-提及你希望它使用的组件或 token。

    你的库对组件及其行为方式的定义越清晰，它对 agent 就越有用。 这意味着 使用有意义的组件名称、定义属性和变体、应用变量，并构建可复用的模式来展示较小部件如何组合在一起。这些细节为 agent 提供了更强的信号，说明每个资产的用途及其应有的行为方式。

    用 Guidelines 明确体现团队的判断

    Guidelines 中应包含什么？

    → Figma agent 应始终遵循的规则

    → 这些规则的例外情况

    → 应避免的错误以及应采取的替代做法

    → 如何在相似的组件、变体或模式之间做选择

    一旦 agent 拥有了你的库，它就知道有哪些构建块可用。但有些决策无法从库本身明显看出，比如何时使用某些组件，或者何时存在该用法的例外。 Guidelines——附加到你已发布设计库的书面说明文件——正是你编码这些判断的地方。对于任何启用了库的提示，它们都会被自动包含，为 agent 在创建新设计时提供可遵循的指导，而无需每次都有人重新说明。

    当 agent 从零开始创建设计时，Guidelines 效果最好。我们正在努力改进它在编辑现有设计时应用 Guidelines 的一致性。

    要添加 Guidelines，请打开你的设计库。然后前往 Library → Manage guidelines，上传包含你 Guidelines 的文件，并点击 Apply changes。

    例如，假设你的库同时包含主要按钮和次要按钮，但你的团队在结账屏幕上始终为“Place order”CTA 使用主要按钮。你可以把这条规则写进 Guideline，让 agent 知道在这种情况下该选哪一个。你还可以为“Back”等操作指定次要按钮，让 agent 有具体的规则可循。这些 Guidelines 会一直附加在库上，让你的团队在使用 agent 创建新设计时复用这些指导。

    向 Figma agent 展示你系统的实际应用

    关于 Figma agent 各类上下文的 tl;dr：

    Guidelines 是你的团队如何使用设计库的常设规则。它们附加在库上，并适用于新工作。

    Library examples 展示你的团队在实践中如何组合组件和模式。

    Add context 为 Figma agent 提供与当前任务相关的参考，比如特定的 Figma 文件或画框。

    Skills 记录你希望 Figma agent 遵循的可重复流程。

    给 agent 一个工作成果应该是什么样子的示例，可能比通过提示来解释更有力。就像你可能会给同事一个现有的结账屏幕作为起点一样，你也可以给 agent 一个设计让它改编。

    Examples 和 _example 区分大小写。对于组件集，请将命名或页面放置应用于父级集，而不是单个变体。参见 Material 3 Design Kit 作为参考。

    要将设计添加到提示中，请点击 + → Attach Figma files，然后选择或粘贴相关设计。

    对于你希望 agent 在未来的工作中复用的模式，请将完整设计作为组件发布到 Examples 页面，或在名称末尾添加 _example 。如果该示例特定于你当前所做的工作，但不一定是你将来会重复的模式，请将其作为上下文添加到当前提示中。你也可以直接将画框或图片粘贴到聊天中，或让 agent 将截图转换为可编辑的设计。

    For example, you might be adding a shipping address form to the checkout flow. Your library provides the form fields and checkboxes. But those components alone don’t communicate how your team puts shipping address forms together, like which fields share a row or how optional fields such as apartment numbers are presented. An example from a previous design can show how your team groups fields and handles spacing. That gives the agent a starting point it can adapt for this checkout experience.

    Turn recurring instructions into skills

    To create a skill, tell the Figma agent what you want the skill to do and give it the steps or instructions it should follow. You can then preview and edit the skill, including directly in the markdown editor.

    You can also use skills from the Figma Community or share your own for others to use.

    Many of us find ourselves repeating the same processes again and again, whether that’s auditing your screens for accessibility standards or running frequent checks to make sure you’re using the most up-to-date components. Now, instead of rewriting the same instructions each time, you can turn that process into a skill Abstract geometric artwork on a dark red background featuring bold orange, green, black, blue, yellow, and magenta shapes, including a curved ribbon, flower-like form, stacked circles, and a striped ring.

    Try these 10 skills—and show off your own

    Now you can author skills for our agent, directly in Figma, to put your point of view to work. Here are 10 of our favorites to get you started.

    the agent can reuse. Skills are sets of instructions that you teach the agent once and can trigger in any chat with a forward slash (/). Rather than rewriting the same prompt or walking through the same process each time, you can publish a skill for your team or organization to use.

    For example, a /design-system-audit skill could check selected screens against your libraries and flag detached instances, hardcoded values, misused components, and accessibility gaps. An /analyze-components skill could review your components for duplicates, naming errors, and components that have lost their connection to the library. Both can flag potential issues and recommend a path forward, which your team can ask the agent to carry out or handle themselves.

    Learn from the Figma agent’s output

    Ask the Figma agent to fix an error on the canvas by telling it what to change in a prompt or @-mention the exact component or token you want it to use.

    Like any time you’re working with AI, it’s still important to double check the output. When you’re reviewing its work, if you spot an issue, you can use the agent to correct those mistakes immediately, right on the canvas. If you notice it consistently makes the same mistake, that’s a signal that you might need to go back and update your guidelines, revisit your design library, or give it better examples to work from.

    The Figma agent is available for Full seat users on Professional, Organization, Enterprise, and some Education plans, and limited availability on the Starter plan. Collab, Dev, and View seats can use the agent in their drafts.

    Learn more about the Figma agent in our help center.

    Wayne is a product manager at Figma focused on enabling AI to use design systems effectively. Before Figma, Wayne was a product lead in payments and marketplace companies such as Airbnb.

    LinkedIn

    Create and collaborate with Figma

    Get started for free