From Figma Variables to clean, idiomatic code
Token Export is built for design systems that live in both Figma and a codebase. Here is what it does.
Open the plugin on your file
Token Export reads the Variables already defined in the document — collections, modes and aliases included.
Choose a format and options
Pick CSS, SCSS, LESS, SCSS mixins or Tailwind v4, then tune naming: group separators, casing and how modes map to selectors.
Copy or download
Grab the output as text or a file and drop it straight into your repository. Save the configuration as a preset for next time.
Everything in the box
Alias resolution
References between variables are followed and flattened so the emitted code has concrete, usable values.
Modes to themes
Each mode becomes a theme: CSS selectors / data-attributes for stylesheets, or variants for Tailwind v4.
Five renderers
One source of truth, five idiomatic outputs. Switch formats without re-authoring anything in Figma.
Presets
Persist your export options and reapply them across files and teammates for consistent handoffs.
Runs in-canvas
No external upload step. The export executes inside Figma and stays with your design.
Stable diffs
Deterministic ordering and naming keeps generated files diff-friendly in version control.