Four stages between your canvas and your repository
Token Export runs its engine on a server, not in the plugin sandbox. The plugin sends the variables it read and gets rendered files back — which is what makes alias resolution, collision reporting and eight distinct renderers possible at all.
- 01
Read
Collections, modes, aliases and scopes are read from the open document exactly as authored. No plugin-specific metadata is written back into your file, and nothing needs renaming first.
- 02
Resolve
References are followed across collections and flattened to concrete values. A reference that eventually points at itself is detected and reported rather than expanded forever.
- 03
Render
One typed intermediate representation feeds every renderer. That is why the Tailwind output is a real @theme and the mixin output is real mixins, instead of one file with eight extensions.
- 04
Report
Anything the engine had to drop or reinterpret comes back as a notice with a severity. An export with problems still returns the tokens it could render.
Eight renderers, one source of truth
CSS and SCSS are free with no account and no run limit. The rest are Pro — that is where the plugin earns its price rather than at the door.
| Format | File | Plan | What it emits |
|---|---|---|---|
| CSS | .css | Free | Custom properties under :root, with each mode as a selector or data-attribute. |
| SCSS | .scss | Free | The same custom properties, delivered as a Sass partial you can @use directly. |
| Tailwind v4 | .css | Pro | A real @theme block with scope-driven namespaces, plus @custom-variant for each mode. |
| SCSS mixins | .scss | Pro | One mixin per mode, so themes are applied by including them where you need them. |
| SCSS variables | .scss | Pro | Native $variables for codebases that resolve tokens at compile time. |
| LESS | .less | Pro | Custom properties in LESS syntax, for stylesheets that have not migrated. |
| LESS variables | .less | Pro | Native @variables, the LESS counterpart to the SCSS variable renderer. |
| DTCG | .json | Pro | W3C design token format with aliases kept as references, ready for Style Dictionary. |
Opinionated defaults, adjustable where it matters
The defaults produce a file most codebases can take as-is. Everything that would otherwise force a find-and-replace is a setting.
- Naming
- Group separator, casing and prefixes are yours to set. The engine reports collisions rather than quietly overwriting one token with another.
- Mode strategy
- Modes can render as classes, data-attributes or Tailwind variants — whichever your stylesheet already uses to switch themes.
- Formatting
- Indentation, line endings and comments are options, so generated files match the rest of your repository and stop fighting your formatter.
- Presets
- Every setting above saves as a named preset. Pro syncs presets across your devices; a team shares one set, so two people exporting the same file get the same file.
Try it on a file you already have.
Nothing to configure before the first export, and nothing written back into your document.