loading
loading
3 ways product designers use the Figma agent for craft, speed, and creative expression Here’s how teams at Uber, Granola, and Atlassian support high-quality, fast-moving work with the Figma agent, now generally available. Share 3 ways product designers use the Figma agent for craft, speed, and creative expression Since we first launched the Figma agent Starting today, work with an agent that is built for Figma—directly on the canvas. Prompting 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. Starting today, you’ll have more creative control over generative plugins and shaders, and a way to share what you’ve made with the community. Product Designer Rogie King tells the story of how we got here. The Figma design agent is here Figma’s design agent, now with custom tools and greater context Behind the build: Generative plugins and shaders at Figma Use guidelines to tell the agent how your team uses its design system. For example, you might say, “Only use red for actions like Delete, never just for decoration.” When a product builder asks the agent to design something using that library, it automatically gets those instructions. Today, the Figma agent moves out of beta with a number of improvements, including to output quality. The new agent is better at following instructions and handling longer-running tasks. In fact, it wins in ~60%+ of our human-graded evals with professional designers. In addition to improved quality, we’ve launched new capabilities that let you: - Add guidelines—markdown files that library owners can upload to a Figma library to give the agent additional context about how to use their design system. - Use the agent to find and insert Figma context from across the platform, like FigJam stickies, Figma Slides copy, or Figma Design frames. - Follow your collaborators’ agents as they work on the canvas, for a multiplayer experience that reflects the way we work now. As we’ve heard from teams at Uber, Granola, and Atlassian, having the agent where they already work means they don’t need to reinvent processes or toggle between tools, allowing them to move faster while elevating craft. Try these skills to scale your design system /create-color: Map fills, strokes, shadows, and gradients to their tokens /create-anatomy: Diagram the anatomy of components and subcomponents /create-api: Get an API overview and configuration examples /component-handoff: Build a documentation frame for selected components /analyze-components: Audit all components on a screen for issues How Uber scales design systems documentation Uber’s design systems team delivers components across seven platforms. The challenge isn’t just building them, but communicating them: When a single component can carry dozens of states, variants, slots, booleans, and enums, misreading the scope means rework down the line. So Staff Product Designer Ian Guisard and Senior Product Designer Niloo Bakhshi built a workflow that uses the Figma agent to document and maintain their design system—creating the precision that’s a precursor to speed. Niloo’s work is deeply visual and “extremely focused on details,” she says. “I spend a lot of time in Figma making prototypes to show the vision for new components.” In the past, translating this work into actionable component specs was a slow and manual process. Now, Ian partners with her to create dev-ready documentation using the Figma agent and a suite of skills he built to help automate the work. 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./create-anatomy, for example, exposes component structure, while /create-color Try these 10 skills—and show off your own “These skills are published in Figma Community, so anyone can run them on their own components,” says Ian. “You create a task, let it run in the background, and keep designing. Beyond just engineers, the skills are useful for me as well: When I accidentally modified a hard-coded color, the agent clearly pointed out the issues. It’s a win-win not only for the handoff process, but for us as designers as a point of reference.” Automating this work has helped the team make big efficiency gains. Documentation that once took multiple people months now gets published by a single designer in an afternoon. “It’s made us a lot more efficient, and allows us to ship higher-quality components in a fraction of the time,” says Ian. “With the agent in Figma, skills run where the work already happens. The component and its context are already in the file, so there’s no need to move the work into another tool or learn a separate workflow. That makes the skills intuitive to use and easy to share across a team.” Try these skills to automate busywork /do-try-consider: Sort comments on the page into a prioritized framework /ui-state-expander: Expand a screen, component, or flow into a full set of states How Granola designs with confidence Pro tip: Add connectors to tools you already use like Amplitude, Asana, Atlassian, Granola, Notion, and Slack. The small, nimble team behind the AI-powered notetaking app Granola is defined by a culture of experimentation. “When you’re exploring, it’s so useful to be in Figma and have 10 versions of a design spread around on the canvas,” says Product Designer Paavan Buddhdev. Figma’s agent helps him rapidly iterate and incorporate his team’s feedback, allowing him to shift his focus to big-picture work. “It’s been a massive time saver,” he says. With the Granola connector, Paavan asks the Figma agent to directly annotate the canvas with feedback pulled from meeting notes and transcripts. This is just as useful in routine design crits as it is in focused “Taste the Soup” sessions, when the whole team tests and gives feedback on working prototypes. “Before, I would be frantically typing notes during the meeting to keep a running to-do list,” says Paavan. “The magic of using the Granola connector with the agent is that I can be more present during the meeting and respond effectively. I’m still doing the design work, but it’s given me more confidence to know that I won’t miss anything important.” Paavan’s workflow also leverages automation to maintain momentum while designing. Using the Figma Chrome extension, he pulls in existing screens from the Granola app onto the canvas. Then, he asks the agent to clean up connections to Oats, their component library. Other times, he’ll ask for copy variations, like “Give me 30 ways to phrase this button text." “It helps you do the things that you don’t really want to do,” he says. With the agent reducing tactical friction, Paavan has more time to explore different solutions, talk to users, and pressure-test his work. “The quicker you can get a design in front of a user, the better,” he says. “So everything I do with the agent is in service of that.” Try these skills to make your designs expressive /shader-starter: Build a shader fill or effect with guided prompts /ease-like-miggi: Replace every easing with a matching “Mig” easing curve /find-animation-opportunities: Scan designs for ways to add motion with exact values How Atlassian operationalizes motion Motion is core to Atlassian’s brand expression and user experience, but it doesn’t always get shipped. By turning motion assets into reusable components in Figma, Atlassian’s small motion design team scaled their expertise, with the Figma agent acting as an extension of that system. “It turns animated illustrations from a specialist handoff into a system capability for us, and helps us preserve the craft of motion,” says Senior Product Designer Alexandra Pereira. Now, a designer working on an onboarding modal can choose from a library of animated illustrations to fill a component slot. If the context calls for something custom, the agent helps them iterate on easing and duration to match the design intent, while making sure the result uses the Atlassian Design System variables. “Being able to generate within guardrails really matters for enterprise systems,” says Alexandra. “It allows for consistency, accessibility, and implementation quality as much as speed.” Pro tip: Beyond upleveling your team’s motion skills, the agent can help you create and share generative plugins and shaders for custom, reusable effects and styles. Watch this video to see how Figma Education Designer Jamie Haberman created a kinetic type plugin with the agent. This means that designers less fluent in motion can produce work that’s both expressive and on brand. When Product Designer Davy Fung needed to animate a Slack communication banner, he told the agent what he wanted, then asked for feedback on what was working, and what wasn’t. “I wouldn’t normally be able to do this at all,” he says. “For designers working with static designs, our skillsets have increased.” With the broader team beginning to use motion tools on the canvas, it’s easier for everyone to get to a good starting point. “I think a lot of people are going to be able to refine their taste when it comes to motion by using these new tools on the Figma canvas, where they’re already used to making design decisions,” says Lead Motion Designer Maxwell Hathaway. 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. For an example of how to use the agent in your process, check out our latest Workflow Lab—then jump in and try it yourself.
document fetched 2026-10-24 10:05 · canonical https://figma.com/blog/3-ways-product-designers-use-the-figma-agent