Reference your design system
Generate specs that pull from your actual components, tokens, and variables—so documentation reflects your real design system, not placeholder values.
Generate design tokens right on your canvas
Turn colors, spacing, typography, and effects into structured design tokens with AI—directly in Figma Design. No spreadsheets, no manual formatting, no switching between tools to build your system.
Build your design system faster, together
Figma's agent helps you structure and scale your tokens in the same file your team already works in—keeping everyone aligned from the start.
Turn existing styles into tokens
Figma's agent analyzes your current colors, typography, and spacing to generate structured tokens that reflect how your design system actually works—not a generic starter kit you'll need to rebuild.
Cut the busywork, stay in flow
Hand off the tedious work of naming, organizing, and formatting tokens. Focus on the design decisions that matter while the agent handles the systematic scaffolding.
Keep your whole team aligned
Tokens generate in the same file your team works in, so designers and developers see the same source of truth. No separate handoffs or version mismatches to reconcile.
The features behind the generation
A closer look at what sets Figma's agent apart, built for the way design teams actually work.
Parallel prompting
Generate multiple spec variations simultaneously—different component states, breakpoints, or documentation styles—without waiting for one to finish before starting another.
Shareable threads
Share a thread and your team sees the full prompt, context, and iteration history behind any spec. Developers understand exactly what was documented and why.
Refine with follow-up prompts
First pass missing details? Prompt again in the same thread to add component states or adjust formatting, or try a parallel direction without losing progress.
Figma feels like a natural extension of my hand. I do my design ideation on the canvas, and now the agent takes it the last mile. With my design libraries connected, I can move from design to code faster than ever before.
Andy Madrick
Product Designer, Notion
Get started with Figma's agent
Open the agent
Select Agents in the left side rail or hit CMD + Enter. Have your styles, colors, or components ready on the canvas.
Describe your tokens
Tell the agent what to generate—color tokens from your palette, spacing scales, typography tokens—and how you want them structured.
Review on the canvas
Check the generated tokens. Refine in the same thread to adjust naming or structure, or start a parallel one to try a different approach.
Keep iterating
Prompt again to expand your token set or adjust the hierarchy. Turn the workflow into a skill to reuse as your system grows.
Become an agent expert
The Figma design agent is here
Read moreWatch Figma's AI Agent in action and see how to put it to work in your own workflows.
Work with the Figma agent
Get startedHands-on playground to explore Figma agent's capabilities — from bulk edits to feedback implementation — with step-by-step guidance built right in.
How to use Figma agent in your design workflows
Watch nowLearn how to use Figma agent in your design workflows with a step-by-step tutorial from the Figma team.
FAQ
An AI design token generator helps you turn raw design values—colors, spacing, typography, effects—into structured, named tokens that your team can use consistently across products. Figma's agent does this directly on the canvas, analyzing your existing styles and generating tokens that fit how your system actually works. No manual formatting or separate tooling required.
Figma's agent analyzes the styles and values already in your file—colors, type scales, spacing—and structures them into tokens based on your prompt. You can specify naming conventions, hierarchy, or output format. The agent generates options you can review, refine, and iterate on until the structure fits your needs.
In Figma Design, select Agents in the left side rail and describe what you want to tokenize—your color palette, typography system, spacing values. The agent generates structured tokens on the canvas. You can refine with follow-up prompts or run parallel threads to explore different naming conventions simultaneously.
Start by prompting the agent with your preferred structure—semantic naming, component-based grouping, or platform-specific formats. Figma's agent can generate multiple organizational approaches in parallel, so you can compare hierarchies side by side. Iterate in threads until the structure matches how your team thinks about your system.
Figma's agent is available on all paid Figma plans. You'll find it in the left side rail in Figma Design. During the current open beta, it doesn't consume AI credits—so it's a good time to explore, experiment, and share your feedback with us.
Build faster with Figma's agent