Design tokens are named, reusable design decisions stored as key-value pairs — for example, color-primary: #2563EB, font-size-lg: 1.125rem, or spacing-4: 1rem. In code, they live as CSS custom properties, a JSON token file, or a platform-specific config. In Figma, they live as Variables (for primitive values) and Styles (for composite values like text styles and shadows). html2design bridges the gap by reading the browser's computed output — where all token references have been resolved to their final values — and generating Figma layers that accurately reflect your token-based design.
The Token Gap Problem
Every mature design system has the same tension: tokens are defined once in code (a JSON file, a Tailwind config, CSS custom properties, a Style Dictionary source), but Figma has its own separate token system. Unless there's an active sync process, they drift.
The drift looks like this: developers update --color-primary from #1D4ED8 to #2563EB in a system-wide update. The code ships. Figma still has the old blue everywhere. Now every mockup shows the wrong brand color. Designers notice the discrepancy in the next design review. Someone spends half a day manually updating every Figma Style.
This isn't a failure of process — it's a structural mismatch. Code tokens and Figma tokens are two independent systems with no native connection. The question isn't whether they'll drift but how to minimize drift and recover quickly when it happens.
Key principle: The browser is the single source of truth for what your token-based design actually looks like. If you render your tokens in a browser and import that rendered output into Figma, you're guaranteed to capture the resolved values — not what the token names suggest they should be, but what they actually produce at runtime.
What Design Tokens Look Like in Code vs. Figma
Understanding the mapping between code tokens and Figma constructs helps you build an accurate sync workflow.
| Token type | In code | In Figma |
|---|---|---|
| Color | --color-primary: #2563EB |
Color Variable (primitive) or Color Style |
| Font size | --font-size-lg: 1.125rem |
Number Variable or part of a Text Style |
| Font weight | --font-weight-bold: 700 |
Part of a Text Style (Bold variant) |
| Line height | --line-height-relaxed: 1.75 |
Part of a Text Style |
| Spacing | --spacing-4: 1rem (16px) |
Number Variable, applied as padding/gap |
| Border radius | --radius-lg: 0.75rem |
Number Variable, applied to corner radius |
| Shadow | --shadow-md: 0 4px 6px rgba(...) |
Effect Style (Drop Shadow) |
| Breakpoint | --breakpoint-md: 768px |
No direct equivalent — document in a frame annotation |
The Token Reference Page Pattern
The most reliable way to extract tokens from code into Figma is to render all tokens visually on a dedicated reference page, then import that page using html2design. This gives you the computed values for every token in a format Figma can inspect.
A token reference page is a simple HTML file (or a route in your app) that renders every token category as a visual grid:
When you load this page in a browser, all var(--token-name) references resolve to their computed values. DevTools → Inspect panel on any element shows the exact pixel or hex value. Import this page with html2design and you have a Figma frame you can use as the source for registering Variables and Styles.
Framework-specific note: If you're using Tailwind CSS, your token reference page should render each utility class as a colored swatch. If you're using CSS Modules or Styled Components, your tokens likely live as CSS custom properties on :root — load any page in your app and use DevTools → Computed tab to see all resolved custom properties.
Extracting Tokens into Figma Variables Step by Step
Step 1
Render your token reference page in the browser
Open the token reference page in Chrome. If you don't have one, create a simple HTML file that renders your CSS custom properties as visual elements. Load it with python3 -m http.server or your dev server — localhost works fine with html2design.
Step 2
Import the token reference page with html2design
Copy the outerHTML of the token reference page from DevTools. In Figma, run html2design → Paste HTML. You get a Figma frame with all your tokens rendered as colored rectangles, text samples, and spacing guides.
Step 3
Read computed values from Figma's Inspect panel
Select a color swatch in the imported frame. Figma's Inspect panel (right sidebar) shows the fill color as a hex value. This is the resolved token value. Use this to register or update your Figma Color Variable or Style.
Step 4
Register tokens as Figma Variables or Styles
Open the Figma Variables panel (Edit → Variables or the gear icon). Create a Collection named after your token set (e.g., "Brand Tokens"). For each color token, create a Color Variable using the value you read from the Inspect panel. For typography, create Text Styles using the font/size/weight/line-height you observed in the imported text layers.
Step 5
Apply variables to your component library
Once your Figma Variables are registered, apply them to components: select a button, change its fill from the hardcoded hex to the color-primary Variable. Now updating the variable propagates to every instance. This is the Figma equivalent of your components referencing CSS custom properties instead of hardcoded values.
How html2design Handles Token-Based Styles
html2design reads the browser's computed CSS, not the authored CSS. This means:
- CSS custom properties are resolved —
color: var(--color-primary)becomescolor: #2563EBin the computed output. You see the resolved hex, not the variable name. - Relative units are converted —
font-size: 1.125rembecomes18pxif the root font size is 16px. Figma works in pixels, so this conversion is necessary and automatic. - Inherited values are explicit — If a text element inherits
font-familyfrom a parent, the computed output includes the actual font family string. html2design sets the Figma layer's font correctly without needing the inheritance chain. - Compound values are decomposed — A CSS
bordershorthand (1px solid #E5E7EB) is decomposed into width, style, and color in computed output. html2design maps these to Figma's stroke properties.
The practical implication: html2design gives you the visual truth of your token system — what tokens produce in a real browser, not what you intended them to produce. This catches token inconsistencies that are invisible in the token source file but visible in the rendered UI.
Token Sync Strategies for Design System Teams
There's no single right approach to keeping code tokens and Figma tokens in sync. The right strategy depends on your team size, token change frequency, and engineering capacity.
Manual sync on cadence (most teams)
Establish a quarterly or sprint-based sync: whenever tokens change significantly (a rebrand, a major palette update, a type scale revision), re-render the token reference page and update Figma Variables/Styles from the imported output. Document the sync date and version in a Figma cover page. This is low-overhead and sufficient for teams where tokens are stable.
Rendered-output snapshot on token PR
Set up a lightweight CI step: when a PR modifies token files, generate a screenshot of the token reference page and post it as a PR comment. Designers review it visually before the PR merges. After merge, they know to update Figma Variables. This adds visibility without requiring full automation.
Automated Figma Variables API sync (advanced)
For large design systems, a programmatic approach is possible: export tokens to JSON via Style Dictionary, transform them into Figma Variables API format, and push updates via the Figma REST API on every token change. This requires significant engineering setup but eliminates manual sync entirely. Only invest here if tokens change frequently and many designers depend on pixel-perfect accuracy.
Frequently Asked Questions
What are design tokens in Figma?
Design tokens in Figma are named values stored as Figma Variables (for primitive values like colors, numbers, booleans) or Styles (for composite values like text styles and shadows). They're the Figma equivalent of CSS custom properties — single definitions that can be applied across many components, so changing one value updates everything that references it.
Does html2design preserve CSS variable names?
No. html2design reads computed CSS values — all variable references are resolved before html2design sees them. You get the resolved hex, pixel, or font value, not the variable name. To map back to token names, cross-reference your token source file with the computed values you see in Figma's Inspect panel after import.
Can I keep Figma and code tokens in sync automatically?
Fully automated sync requires the Figma Variables API (currently in beta for REST access) and a token transform pipeline like Style Dictionary. For most teams, a periodic manual sync cadence using the token reference page pattern is more practical. See the sync strategies section above for a decision framework.
Token Sync Checklist
- ✓ Build a token reference page covering colors, typography, spacing, shadows, and border radius
- ✓ Import the token reference page with html2design at each sync cycle
- ✓ Read computed values from Figma's Inspect panel — not from source token files
- ✓ Register tokens as Figma Variables (primitives) and Styles (composites)
- ✓ Apply Variables to components — replace hardcoded fills with variable references
- ✓ Document the sync date and token version in a Figma cover page
Key Takeaways
- ✓ Design tokens (color, type, spacing) in code map to Figma Variables (primitives) and Styles (composites) — the goal is a one-to-one mapping, not a rebuild
- ✓ Build a token reference page (color swatches, type scale, shadow ramp), render it in the browser, then import via html2design — the browser resolves all token references to their final computed values
- ✓ Read computed values from the imported Figma layers, not from source token files — use Inspect panel values to populate Figma Variables accurately
- ✓ Apply Variables to imported components — replace hardcoded fills with variable references to connect the design system to Figma's theming layer
- ✓ Document the sync date and source token version in a Figma cover page — token drift happens; the cover page makes it visible
Related Articles
The Complete Guide to HTML to Figma Conversion (2026) →
The pillar guide covering every framework, every method, and every use case — all in one place.
Tailwind to Figma: Build a Design System from Your Tailwind Components →
The token reference page pattern in detail for Tailwind CSS — extract utility classes as Figma Variables and Styles.
Design System Migration: From Code to Figma Components →
Migrate your entire design system — tokens, component inventory, and all — from code into a native Figma library.
How to Convert HTML to Figma: A Developer's Guide →
The foundational workflow — DevTools, code paste, and output cleanup in Figma.
How to Convert React Components to Figma Designs →
Import React components (with their token-based styles applied) as native Figma layers.
Tailwind + React to Figma: Token Extraction Workflow →
Build a Figma component library from a Tailwind + React codebase — from token export to a fully token-connected library.
Try it now
Extract your design tokens into Figma today
Build a token reference page, import it with html2design, and register your color and type tokens as Figma Variables — the fastest path from code tokens to a Figma design system.
Install from Figma Community →$12/mo · $96/yr · Cancel anytime