Workflow lab: Staying in the flow with Figma’s agent

retained text

Workflow lab: Staying in the flow with Figma’s agent
Knowing what work to hand to an agent is a skill of its own. This workflow shows how a designer shapes a new temporary-access feature while the Figma agent handles the library updates, crit feedback, and a first draft of a design system spec.
Share Workflow lab: Staying in the flow with Figma’s agent
Hero illustration by Marine Buffard
Welcome to Workflow Lab, where we present a sample workflow Coding agents are reshaping how developers build, but they’re only as good as the input they’re given. This workflow explores how context keeps code and canvas in sync.
Workflow lab: Moving between design and code with agents
Workflow fact sheet
Figma products: Figma Design
Tools: The Figma agent, annotations and comments, libraries, variables
Skills:  /repair-library-usage, /compliance-review, /document-component-enhancement
Team: Designer, design systems team, security and compliance partners
Question to solve: What if the Figma agent handles the busywork while you focus on the deep design work?
Using AI in a design workflow means constantly asking one question: What needs my judgment, and what just needs doing? This sounds obvious until you’re up against a deadline and you still want every product and design call to be yours. Follow along as a designer at Offtrail—a fictional app for local outdoor meetups—works out how and when to hand something to the Figma agent, from cleaning up outdated components to drafting a spec for the design systems team.
The problem
The Offtrail permission settings don’t currently offer a way to let someone host a single event, so the team wants to add temporary host permissions that expire after the event. The designer picks up the brief: update the permissions experience to let someone join as a host for a limited period, show when that access ends, and give group admins a way to manage it.
The existing permissions experience already needs updating. Some frames use current components and variables, while others carry deprecated instances or values someone overrode by hand. Since the temporary-access flow builds on those screens, the designer needs to bring them up to date before going further.
Inspect and repair with the agent
Zoom out
Maintenance is design work. Replacing an old component or repairing a variable binding isn't as dramatic as generating a new screen. But repeated across a product, those small decisions determine whether a design system stays coherent or slowly becomes several systems sharing a name. The agent can do the focused inspection and repetitive repair. The designer still decides what the exceptions mean.
Before the designer starts working on the flow, they need to know which parts of the existing design file they can trust. Is this component still current? Is that variable binding wrong, or was it meant to work this way? These details help the designer understand which parts of the old flow need to be updated.
Nobody has time to check every frame by hand, which is probably how the file drifted in the first place. That’s where the Figma agent Starting today, work with an agent that is built for Figma—directly on the canvas.
The Figma design agent is here
/repair-library-usage skill in an agent chat to inspect the selected frames, compare component instances and variable bindings against the current library, and replace deprecated ones wherever a clear, updated equivalent exists.
The agent applies those straightforward updates directly. When the right call isn’t obvious—for example, two components in the current library could both work—the agent leaves that case unchanged and annotates the frame with what it found and why it stopped. The goal is to update the part of the experience the new work builds on, not to clean up the entire file. So the designer resolves only the cases that affect this project, then moves into designing the first pass of the temporary-access flow without bouncing between file maintenance and feature design.
Review the flow and work through the feedback
Zoom out
Words are part of the flow. The agent can pull in brand voice guidance, generate alternatives, and try the screen in other supported languages.
With the source file repaired and proposed enhancements designed, the designer takes the temporary-access flow into a design crit. Some feedback is straightforward: clarify the expiration copy, tighten the hierarchy, make the recovery path easier to find. Other comments raise policy questions about whether the UX meets Offtrail’s legal requirements. What happens when an invitation expires before it's accepted, or when a permission update fails? What does a member see if their access ends mid-session?
Right now these are all just comment threads, and it’s hard to tell which carry a clear action and which need a decision. So the designer asks the agent to sort through them. The agent reads the conversations, groups recurring feedback, surfaces contradictions, and highlights any open questions. This gives the designer a short, high-signal brief of what to act on and what still needs thought.
One thread stays open. Some questions about legal requirements remain unresolved, and nobody on the design team is sure how the policy applies here. Instead of guessing, the designer asks the agent to run the team’s /compliance-review skill against the flow. The skill contains a reference to the checks that the company’s security and compliance partners maintain, so the agent arrives with the questions those partners expect designers to ask when access, identity, and permissions are involved. The agent returns its findings in context and annotates the frames each one applies to.
The agent gathers the context it needs from the external document the compliance partners maintain, then reviews the designs and applies guided feedback. As a result, the designer can spend less time reconstructing context and more time deciding what those findings change about the feature.
Generate a new design system spec
Zoom out
The agent can show its suggestions before making changes. The designer prompts “Review the selected frames against the connected library, list outdated components and variables, propose current equivalents, and flag any ambiguous matches. Don’t make changes.” The agent reviews the designs and writes each finding on the canvas, next to the frame it applies to. After reading them, the designer asks the agent to apply only the matches and leave the ambiguous cases unchanged.
The Offtrail design system leverages a component called “item row” that’s a versatile component used in lists to display things like settings, documents, or users. But the /compliance-review skill surfaces a requirement the item row component doesn’t currently support: the design needs to show when a user’s temporary access expires. A new, custom component not only broadens the scope, but also detaches the experience from the Offtrail design system. The more durable route is to enhance the item row design system component itself.
By now, the feature work is nearly complete. Starting a separate design system handoff could potentially delay the project and require the designer to context switch to create a component-level spec document. Instead, the designer asks the agent to draft a spec in a new section of the Figma file using the /document-component-enhancement skill.
Working from the current component finding and the surrounding design context available in the file, the agent outlines what an update to the system may need to support. The spec describes how the component should behave, where the current one falls short, and which states are missing, while highlighting possible changes and open questions.
The designer reviews the spec draft, confirms the open questions, and shares the section with the design systems team. The spec sits in the same file as the frames it describes, the comments that raised the problem, and the components in question. That proximity lets reviewers trace the finding back to the flow that produced it, and it keeps the ownership where it belongs. The designer decides how the feature develops. The design systems team decides what happens to the component. And the agent explains what change is needed and why, so that team can review it while the designer keeps working on the rest of the feature.
The product feature team keeps moving, confident that the design system update is being tracked as a dependency to the temporary permissions work. That kind of coordinated division of labor simplifies each team’s scope and allows them to fully focus on their area of ownership. Feature work continues quickly, and the design systems team knows exactly what is motivating the enhancement request.
A smoother path to production
The one product request the designer started with resulted in four concrete outputs:
- The agent identified design system gaps in the existing screens.
- The temporary-access flow now covers the primary path, plus the expiration, failure, and recovery states it was missing.
- The agent checked the designs against the team’s compliance guidance and flagged every open policy question. It also pulled the team’s scattered design feedback into a usable brief.
- A design system spec now captures the gap in the item row component, with the required behavior, and links back to the reasoning.
A shared, visual, multiplayer canvas keeps those outputs connected. The designed flows, comments, and annotations stay attached to the work they describe, so the designer, reviewers, and agent can refine the same artifact instead of scattering feedback across separate tools or starting over at each handoff. That’s a much bigger job than “the agent made a screen.” The agent inspected, repaired, and distilled the feedback while the designer made the design, product, and policy calls that defined the feature. An agent is most useful when it protects the designer’s attention by carrying context forward, handling repetitive steps, and preparing what comes next, so the designer spends less time managing the path to production and more time deciding what deserves to make it there.
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.
Dive deeper into how to use the agent to maintain your design system, explore how other companies use the agent in their workflows, or read more about how to get started with the Figma agent in our help center.

document fetched 2026-10-24 10:05 · canonical https://figma.com/blog/workflow-lab-staying-in-the-flow-with-the-figma-agent