AI-ready design tokens in a couple of hours
Product Designer’s workflow for turning legacy Figma styles into a scalable design token system, using AI to structure and validate variables, then bringing them into Claude Code for rapid prototyping
Step 1
Analyse
Analyse
How is it working right now? What is still valid? What is duplicated? Are themes or multiple brands required? Which design decisions already exist in production?
If I joined a product with just a brand book, old Figma styles, or messy tokens, as a product designer, I’d start by understanding the existing design system, product context, and engineering constraints before rebuilding anything.
I would talk to developers to understand what they currently use and discuss whether the project requires any visual changes. Should the system be scalable or support multiple brands? I would then share all the existing materials and context with AI and ask for its perspective.
I would talk to developers to understand what they currently use and discuss whether the project requires any visual changes. Should the system be scalable or support multiple brands? I would then share all the existing materials and context with AI and ask for its perspective.
An example of a system to change
Step 2
Talk to developers
Talk to developers
Ask developers before you build hundreds
of tokens
of tokens
Design system collaboration with developers starts while the architecture is still cheap to change, not when you export it. A short alignment on naming and scope can prevent a large migration later.
Further, a few examples of questions during devs' interviews.
Further, a few examples of questions during devs' interviews.
- We have a lot of colors and styles in Figma. How is this handled in the product today? Do you already have a token system?Not really. We have some CSS variables and reusable styles, but no structured token system. Some values are hardcoded in components.Outcome: Understand the starting point. I know whether I’m aligning with an existing token system or helping introduce one.
- I’m proposing names like background/primary, content/secondary, spacing/sm. Will these work for you?For colors, add word palette, so we just copy-paste it without any additional typing. So it will be: palette-content/primaryOutcome: Make naming code-friendly. Ideally developers can map or transform token names without manually renaming everything.
- Are there token categories we can skip for now?Yes. We don’t need tokens for every width, height, layout value, or one-off measurement.Outcome: Reduce unnecessary tokens. Tokenize reusable design decisions, not every number that appears in a design.
Key Idea
The goal of this conversation isn’t to ask developers to design the token system for me. It’s to understand the product reality before I design it: what already exists, what needs to stay, what can change, and how my Figma architecture can map to code with as little friction as possible.
The goal of this conversation isn’t to ask developers to design the token system for me. It’s to understand the product reality before I design it: what already exists, what needs to stay, what can change, and how my Figma architecture can map to code with as little friction as possible.
Step 3
Token architecture
Define a simple, scalable, code-friendly design token architecture
Now combine the product design reality with engineering constraints to create a scalable design system. Keep the architecture small, use the team's vocabulary, and make names predictable enough to map into code without manual renaming.
There is not a universal naming rule. The point is to agree on a convention with the team before AI generates hundreds of Variables.
There is not a universal naming rule. The point is to agree on a convention with the team before AI generates hundreds of Variables.
Anatomy of Design Tokens
An example of variable structure and token naming conventions.
An example of variable structure and token naming conventions.
Step 4
Put Figma Agent to work
Put Figma Agent to work
You define the system. AI builds the structure.
Once the architecture is intentional, ask Figma Agent to create collections, Variables, naming structure, and aliases. You define the system; AI accelerates the repetitive setup.
Provide a prompt with the architecture you created, or give as a reference a token system, and describe changes you want to make.
In my case, I have earlier created a token system that can perfectly work with another project, but it missed some important tokens, so I'm asking AI to fix it.
Provide a prompt with the architecture you created, or give as a reference a token system, and describe changes you want to make.
In my case, I have earlier created a token system that can perfectly work with another project, but it missed some important tokens, so I'm asking AI to fix it.
Example of chat with Figma Agent, working on tokens
Step 5
Review AI work
Review AI work
Are variables ready? I would open it and check one more time!
Check source values, naming, semantic intent, and whether AI used the correct brand references. Consider whether the system really needs all the created primitives. At this stage, it’s also useful to run a lightweight design system architecture check: naming consistency, primitive/semantic separation, aliases, obvious duplicates, and modes; keeping in mind insights and advice gotten from developers. This ensures the token architecture is clean and predictable before Claude Code starts using it through Figma MCP.
I ask ChatGPT to help me create a prompt for the architecture check. However, it can sometimes overcomplicate things, so I wouldn’t blindly copy and paste its suggestions.
I ask ChatGPT to help me create a prompt for the architecture check. However, it can sometimes overcomplicate things, so I wouldn’t blindly copy and paste its suggestions.
Example of chat with Figma Agent, reviewing created variables
Step 6
We still need styles
We still need styles
Typography, shadows and gradients combine multiple properties.
I asked Figma Agent to create these Styles and connect them to the new Variables where possible. There is no need to rebuild them manually.
Token based Font styles created by Figma Agent
Step 7
Test variables!
Test variables!
The best way to test tokens is to use them in a real design.
After AI creates the Variables and Styles, I apply them to a real page to see how the system behaves in practice: what works, what feels missing, and what fails accessibility and usability checks.
I can use Figma Agent to help identify issues and suggest improvements, but I make the final design decisions based on the product context and my own design judgment.
I can use Figma Agent to help identify issues and suggest improvements, but I make the final design decisions based on the product context and my own design judgment.
Step 8
The token system is ready!
The token system is ready!
Built in about an hour 🥹
excluding the discovery phase
excluding the discovery phase
The foundation is ready. I do one final human review, fix anything AI missed, and move on to testing the system in a real design.
Step 9
Bring tokens to Claude
At this stage, I bring my tokens and styles into Claude as the foundation for the project.
I asked Claude to inspect the design system and create a DESIGN_SYSTEM.md file. For now, it documents how to use the tokens and styles. Later, I can extend it with component usage and other design-system rules.
I keep DESIGN_SYSTEM.md separate from CLAUDE.md on purpose. I prefer to organize project guidance by topic rather than putting everything into one large file. This makes the rules easier to find, maintain, and update as the project grows. CLAUDE.md acts as a simple entry point that tells Claude which project guidelines to follow.
At this stage, I’m not creating a developer-ready JSON export. The design system is still evolving, so that would be premature. For now, Figma remains the source of truth, while DESIGN_SYSTEM.md gives Claude enough context to use the system consistently when working with Figma or creating AI-assisted, vibe-coded product prototypes.
I keep DESIGN_SYSTEM.md separate from CLAUDE.md on purpose. I prefer to organize project guidance by topic rather than putting everything into one large file. This makes the rules easier to find, maintain, and update as the project grows. CLAUDE.md acts as a simple entry point that tells Claude which project guidelines to follow.
At this stage, I’m not creating a developer-ready JSON export. The design system is still evolving, so that would be premature. For now, Figma remains the source of truth, while DESIGN_SYSTEM.md gives Claude enough context to use the system consistently when working with Figma or creating AI-assisted, vibe-coded product prototypes.
Olha Stavilova
A Senior Product Designer working across B2B SaaS, complex products, design systems, and AI-powered features. I build scalable product experiences and work closely with product and engineering teams from early ideas to launch and iteration.
What is next
Taking the design system further with AI. From tokens to components, and eventually to code.
- Updating components with new tokensExperimenting with Figma AI to migrate an existing component library to the new token system and seeing how much manual work it can actually save.
- Get the design system out of FigmaExploring how to move tokens, components, and design-system rules into code, making the system easier for both developers and AI to use.