Figma Agent 如何减轻设计系统维护负担

Inside Figma; Design systems; Figma agent; Product updates

Figma’s agent can take on repetitive work across your design system, from maintaining your library to automating how designs adhere to it. Here, we share a few ways to put the Figma agent to work.

Share How to lighten design system upkeep with the Figma agent

Hero illustration by Cynthia Alfonso

Every design system depends on maintenance that’s necessary but easy to put off, like cleaning up naming, checking token usage, updating stale docs, and finding where your product has drifted from the library. As teams move faster than ever, it’s hard to see where designs have fallen out of sync with the system. Output from an agent is only as good as the context it’s givenWhy you should care about design contextAs developers increasingly use agentic coding tools, the structure and clarity of design files matters more than ever. By thoughtfully organizing your work, you can help your developer counterparts build more efficiently and accurately.

Now, the Figma agentThe Figma design agent is hereStarting today, work with an agent that is built for Figma—directly on the canvas.

Use the agent to automate documentation

Design system documentation serves different audiences across product development, from designers trying to choose the right component to developers looking for what they need for handoff. At its core, documentation clarifies how the system is meant to be used, which allows teams to apply it consistently and maintain a high quality bar. The agent can help you create that documentation and update it as your design system evolves.

Document how components work

Documentation is one of the easiest things to fall behind on. Once you’ve settled on how a component should work, the agent can help draft documentation that explains how it should be used and behave.

Ask the agent to:

Spell out do’s and dont’s for using a component; Show visual examples of different variants, properties, and configurations; Recommend component APIs for handoff, like merging booleans into enums, dropping unnecessary hover states, or promoting buried child properties

For example, Uber Product Designer Ian Guisard uses the agent and a set of skillsTry these 10 skills—and show off your ownNow 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.

That gives developers the details they need without having to dig through the Figma file or come back to designers for clarification. Automating parts of the documentation work helps the team focus on improving the system rather than spending valuable time updating every spec by hand.

Keep product work aligned with your design system

As product building gets faster it gets harder to see where designs have fallen out of sync with the system. The agent can help find those gaps and update designs to use current components and tokens before inconsistencies spread.

Audit designs for adherence

Checking designs against your design system can be time consuming. A single screen can use components and tokens from several libraries, leaving you to trace where each one comes from. The agent can help point out those instances so you don’t have to do a manual review.

Ask the agent to:

Create an inventory of the components and tokens used in a screen; Map those components and tokens to their respective libraries

For example, say a designer building a checkout screen creates a “Save for later” button from scratch rather than using the design system’s existing button component. The agent can check that screen against the design library, flag that the button duplicates the system’s existing Button/Secondary component, and point out if it’s using a hard-coded color or spacing value instead of the current token. That gives the designer a chance to swap in the production component and token before the design moves forward.

Match your design system

Both existing product screens and AI-generated designs can fall out of sync with product components and tokens. Updating that work to match your design system can mean replacing parts by hand. The agent can help.

Ask the agent to:

Replace a specific component or token across a design in bulk by @-mentioning it in your prompt; Ask the agent to find and replace components from a specific library, then review the changes

At Granola, the AI notetaking app, Product Designer Paavan Buddhdev uses the Figma Chrome extension to bring an existing screen from the Granola app into Figma. When he does, buttons and other elements become disconnected from Granola’s design system. Instead of replacing each one by hand, he’s able to select an imported button and ask the agent to swap in the matching button from the design system.

Give the agent context to use your system as intended

Once you’ve brought existing work back onto the system, the next question is how to keep new work on-system as it gets created. You can add guidelines to a published library to capture the intent, rules, and patterns behind your design system for the agent to use. Because that context is included automatically when the library is attached, designers don’t have to spell out the same instructions in every prompt.

Let the agent help with cleanup

Small inconsistencies in a design system pile up quickly, are tedious to fix by hand, and can erode trust in the system, making product builders more likely to work around it instead of use it. The agent can take on some of that upkeep, from applying naming changes across a library to checking whether components are using the tokens they should.

Standardize naming across your system

Renaming one component is easy. Cleaning up an entire library where the same state is called hover, hovered, and mouse-over is a different job entirely. You may also have generically named assets that don’t clearly communicate what they’re for. The agent can help you find those inconsistencies and apply your naming decisions across the system.

Ask the agent to:

Take stock of the names currently used across your system; Surface names that have drifted apart, like small and sm, then reconcile them to a single convention, like small; Apply a naming decision you’ve already made across the whole library at once; Replace generic asset names like icon_1 or icon_2 with descriptive names like linkedin_icon or tiktok_icon; Create a record of what was renamed so those changes can be carried into code

Check that components are using design tokens

As a library grows, it gets harder to know whether every component is still using the right tokens. The agent can inspect a component’s values and check whether they’re tied to design tokens, making it easier to spot where something is off.

Ask the agent to:

Check token adoption across components; Create annotations that show which tokens a component is using

For example, it can surface where one button component uses 8 px for icon spacing instead of the shared spacing token used by the rest of the library. If your team wants to run that same check regularly, you can use a skill Got skills? Make the Figma agent a better collaboratorFrom sharing your best thinking to learning from your team’s go-to prompts, here’s what skills unlock in the Figma agent.

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.

Related articles

The Figma design agent is hereMay 20, 2026By Rodrigo Davies, Tammy TaabassumStarting today, work with an agent that is built for Figma—directly on the canvas.Inside Figma; Product updates; Figma agent; Figma Design; AI; Design systems; Design; News; How to supercharge your design system with slotsMarch 5, 2026By Zoë Adelman, Sarah KellySlots give you the ability to customize components without breaking the system. We’re sharing five field-tested tips from early users to help you unlock more freedom without giving up control.Inside Figma; Design; Design systems; Figma Design; News; Product updates; Productivity; Tips & inspiration; Figma’s design agent, now with custom tools and greater contextJune 24, 2026By Georgia Rust, Rodrigo DaviesPrompting gets you started. Custom tools, real context, and skills take the design agent further—so what ends up on the canvas actually looks like you.Inside Figma; Product updates; Figma agent; Figma Design; Config; AI; News

Create and collaborate with Figma