Design tokens are supposed to be the bridge between design and code. In theory, tokens live in one place and flow into both Figma and your codebase, keeping everything in sync.
In practice, small teams end up with:
- Colors defined manually in Figma (not connected to code)
- Slightly different values in the codebase
- A reference website that "inspired" the design but was never actually formalized
This guide covers the reverse workflow: going from a live production website → extracted tokens → usable in Figma and your codebase. No enterprise APIs required.
Why Go From Website to Tokens?
Most token workflow guides assume you start in Figma and push tokens to code. But several real situations flip this:
You inherited an existing product. There's no Figma file. The design lives in the CSS. You need to document what's actually there before you can improve it.
A client approved a reference website. You want to start from those exact values, not guess at them. Extract the tokens, feed them into Figma, and your design and code stay aligned from day one.
Your Figma and production are out of sync.
The Figma file shows #7c3aed but the site ships #6d28d9. Extract from production. You now know what's actually live.
You're building a new design system from scratch. Extract from a site you admire, use it as a foundation, and customize from there. Far faster than starting from zero.
Step 1: Extract Tokens from the Live Website
Using the MiroMiro web extractor
Go to miromiro.app/app/design-tokens, paste the URL of the website you want to extract from, and wait about 10 seconds.
You'll get a structured output of:
- Colors - Every unique color, deduplicated and grouped by usage pattern
- Typography - Font families, size scale, weights, line heights
- Spacing - Margin/padding values organized into a scale
- Border Radius - Corner rounding values in use across the UI
- Shadows - Box-shadow tokens at each elevation level
Using the MiroMiro Chrome extension
If the site requires authentication (a logged-in dashboard, a SaaS product), use the Chrome extension instead-you'll already be logged in when you inspect the page.
The extension overlays token detection on top of any page you're viewing, extracting from the actual rendered DOM including authenticated states.
Step 2: Export in the Right Format
Once extracted, you need to get the tokens into the right format for your destination. MiroMiro exports in four formats:
For your codebase: CSS Variables
:root {
/* Colors */
--color-primary: #7c3aed;
--color-secondary: #2563eb;
--color-success: #16a34a;
--color-danger: #dc2626;
--color-text: #18181b;
--color-text-muted: #71717a;
--color-bg: #ffffff;
--color-bg-secondary: #f4f4f5;
/* Typography */
--font-sans: Inter, system-ui, sans-serif;
--font-mono: JetBrains Mono, monospace;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
/* Spacing */
--space-2: 0.5rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
}
Drop this into your project's global stylesheet and start using the variables immediately.
For Tailwind projects: Config extension
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#7c3aed',
secondary: '#2563eb',
success: '#16a34a',
danger: '#dc2626',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
borderRadius: {
'xl': '1rem',
'2xl': '1.5rem',
},
boxShadow: {
'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
'elevated': '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
}
}
}
}
For design system tooling: JSON (W3C format)
{
"color": {
"primary": {
"$value": "#7c3aed",
"$type": "color"
},
"secondary": {
"$value": "#2563eb",
"$type": "color"
}
},
"spacing": {
"4": {
"$value": "1rem",
"$type": "dimension"
},
"8": {
"$value": "2rem",
"$type": "dimension"
}
},
"fontFamily": {
"sans": {
"$value": ["Inter", "system-ui", "sans-serif"],
"$type": "fontFamily"
}
}
}
This W3C Design Tokens format is compatible with Style Dictionary, Theo, and Token Transformer.
Step 3: Import Tokens into Figma
This is where most tutorials stop. But getting tokens into Figma as a usable library is the key step for designer-developer alignment.
Method A: Manual Figma Library (free, fast)
- Create a new Figma file called "Design Tokens" or "Brand Foundation"
- Create a Color Styles page: for each extracted color, create a color style with the exact hex value and a semantic name (
primary,text-muted,bg-secondary) - Create a Text Styles page: use extracted font families and sizes to create named text styles (
Heading/XL,Body/Base,Label/SM) - Create an Effect Styles page: add shadow effects matching your extracted shadow tokens
Anyone on your team can now use these from the Figma styles panel. They'll match production exactly.
Method B: Variables (Figma's native token system)
Figma Variables (available in the paid plan) let you store tokens as native Figma primitives:
- Open your Figma file → Variables panel
- Create a Color variable collection
- For each extracted color, add a variable:
color/primary = #7c3aed - Create a Number collection for spacing and font sizes
Figma Variables are the closest thing to "real" design tokens in Figma-they support theming (light/dark), aliasing (semantic → primitive), and are being adopted as the foundation for the official design token standard.
Method C: Tokens Studio plugin (advanced sync)
For teams that want true two-way sync between Figma tokens and code:
- Install the Tokens Studio for Figma plugin
- Import your extracted JSON tokens into Tokens Studio
- The plugin creates Figma styles and variables from your token JSON
- When you update tokens in code, sync back to Figma via the plugin
This is the full "single source of truth" setup-but it requires a Tokens Studio license and some initial configuration. Worth it for growing teams; overkill for solo designers.
The Sync Problem (and How to Think About It)
Once you've imported tokens into both places, you have two copies of the truth. Here's how to keep them aligned:
Small teams / solo: Accept that you'll need to manually update when tokens change. Keep a tokens.json file in your repo that you also import into Figma when things change. Simple, pragmatic, works.
Growing teams: Use Tokens Studio or a similar plugin as the source of truth. Tokens live in a JSON file (in your repo or a shared drive). Figma reads from it. Code reads from it. Updates flow both ways.
Enterprises: You already have this figured out (Style Dictionary, Theo, custom pipelines). MiroMiro helps you extract the initial state of production to bootstrap or audit that pipeline.
Real-World Workflow: Rebuilding a Client Site
Here's how this plays out on a real project:
Day 1 - Extract: Paste the client's current website URL into MiroMiro. Export the tokens as JSON and CSS variables.
Day 1 - Figma setup: Import tokens into Figma as color styles, text styles, and effect styles. Now your design file and their production site share the same visual values.
Day 2 - Codebase setup: Drop the CSS variables into your new project's global stylesheet. Import the Tailwind config extension. Your new codebase starts from the exact same token values.
Going forward: When you deviate from the original tokens (new brand color, updated type scale), update the JSON file, re-import into Figma, and update the CSS variables. Design and code stay in sync because they share the same source.
FAQ: Design Token Export Workflow
Can I extract tokens from a Figma file directly?
Not directly from Figma files-MiroMiro extracts from live websites. But if your Figma design is published to the web (e.g., as a prototype or a Figma Community file), or if the product is deployed, you can extract from the live URL.
What if the site uses Tailwind? Will I get the Tailwind config?
Not the original config (that's in the source code). But you'll get the computed values-the actual colors, sizes, and spacing that Tailwind rendered in the browser. You can use those to reconstruct a matching Tailwind config.
Will extracted tokens work with Style Dictionary?
Yes. Export in JSON format from MiroMiro, then use Style Dictionary to transform into any platform format (CSS, iOS, Android, etc.).
How do I handle dark mode tokens?
Extract separately. Run MiroMiro on the light mode version of the site, then switch to dark mode and extract again. You'll get two token sets that you can structure as light and dark collections in Figma Variables or Style Dictionary.
What about semantic vs. primitive tokens?
MiroMiro extracts primitive values (actual hex colors, px/rem values). The semantic layer-mapping color/primary to button/background-is something you define based on your design system's architecture. The extracted primitives give you the raw material; semantics are your responsibility to layer on top.
Conclusion: Tokens Without the Enterprise Toolchain
You don't need a complicated setup to start working with design tokens. The workflow is:
- Extract - Paste a URL into MiroMiro, get structured tokens in 30 seconds
- Export - Download as CSS, JSON, SCSS, or Tailwind config
- Import into Figma - Color styles, text styles, or Figma Variables
- Use in code - Drop CSS variables or Tailwind config into your project
Design and code are now synchronized on the same foundation-and it didn't require an enterprise design system team to set up.
Extract Design Tokens from Any Website →
Have questions about token workflows? We'd love to hear from you on Twitter or check out our design tools.
Keep Reading
- Design Tokens: The Complete Guide: Everything you need to know about design tokens
- Design Token Extractor: Extract tokens from any live website with MiroMiro
- Color Palette Extractor: Extract brand colors from any website
