Variables
become code.
A rendering engine for your design tokens — not another dump to JSON. Aliases resolved across collections, modes delivered as themes, and eight output formats that each look like someone wrote them by hand.
- Output formats
- 8
- Free formats
- 2
- Pro, per month
- $6
What actually lands in your repository
The same document, rendered eight ways. Every shape below is what the engine emits — file extension, selector strategy and all.
- color/brand/500#2F6BFF
- color/brand/600#1E57E6
- space/md16
- radius/sm2
- color/surface→ color/brand/50
- color/ink→ color/neutral/900
Aliases are followed across collections and cycles are detected, so the emitted code never contains a dangling reference.
@import "tailwindcss";@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *)); @theme { --color-brand-500: oklch(0.581 0.229 263.9); --color-brand-600: oklch(0.518 0.224 263.7); --color-surface: oklch(0.975 0.004 264); --color-ink: oklch(0.210 0.020 264); --spacing-md: 16px; --radius-sm: 2px;}Three steps, and the third one is 'paste'
- 01
Open it on the file you are already in
The plugin reads the Variables that exist in the document — collections, modes, aliases. Nothing to tag, rename or restructure first.
- 02
Choose a format, then stop choosing
Naming, separators, casing, indentation and how modes map to selectors are all settings. Save them once as a preset and every later handoff is the same export.
- 03
Take the file to your repository
Copy the output or download it. Ordering and naming are deterministic, so the next export produces a diff your reviewers can actually read.
Where the difference actually is
Exporting variables is a solved, free problem. What is not solved is the quality of what comes out the other side.
- Aliases resolved, cycles caught
- References are followed across collections and flattened to concrete values. A reference that loops back on itself is reported instead of silently producing a broken file.
- Modes arrive as themes
- Each mode becomes a selector, a data-attribute or a Tailwind variant — light and dark land in your stylesheet as themes rather than as two unrelated exports.
- Diagnostics, not silence
- An export that hits a problem still returns what it could render, together with the notices explaining what was dropped and why. Partial success beats a blank file.
- Curated per format
- Tailwind v4 gets a real @theme with scope-driven namespaces. SCSS mixins get mixins. Native variables get $ and @. One source, eight idiomatic outputs — not one output with the extension changed.
- Deterministic by construction
- Stable ordering and stable naming. Re-running an unchanged document produces a byte-identical file, so version control shows design changes and nothing else.
- Presets that travel
- Export configuration saves as a named preset, syncs across your devices on Pro, and can be shared with a team so everyone ships tokens the same way.
There are free exporters. Here is when to use one.
If you need a JSON file out of Figma once, take a free plugin — genuinely. Token Export earns its price on the export you run every week and have to review.
| Free exporters | Token Export | Token platforms | |
|---|---|---|---|
| Price | Free | $6 / month | From €17 / month |
| What you get out | Raw JSON or plain CSS | Eight curated renderers | A full token pipeline |
| Tailwind v4 @theme | Not curated | First-class | Via custom transforms |
| When something is wrong | Whatever came out | Notices + partial success | Validation built in |
| What you have to adopt | Nothing | Nothing | Their whole workflow |
Your tokens are already written.
This just reads them properly.
Install from the Figma Community, open it on any file with Variables, and export. CSS and SCSS are free, with no account and no run limit.