Skip to content
Start free
System mode

Import and export tokens

Bring design tokens in from DTCG or Tokens Studio JSON, and export your system as CSS variables, TypeScript, JSON, DTCG, Markdown, SwiftUI, Android or Compose.

On this page

Your design system's tokens can come in from a file and go out in the formats your code uses. Both live in the Import & export menu in System mode.

Import

  • Import a token file… accepts DTCG or Tokens Studio JSON, up to 512 KB.
  • Sync with Figma… appears here too; whether it is available depends on how your deployment is set up.

Imported values become a new revision of the system, so you can compare and undo through History.

Export

GroupFormats
Export for the webCSS variables, TypeScript, Flat JSON, DTCG (re-importable), Docs (Markdown)
Export for appsiOS · SwiftUI, Android · colors.xml, Android · dimens.xml, Jetpack Compose
Export iconsIcon manifest (JSON), Icons · TypeScript, Icons · SVG sprite

Export is blocked while any item is marked Needs fixing, so a broken alias or failing contrast check never reaches your code.

What the CSS export looks like

The CSS export is a block of custom properties on :root, named from each token's path. Aliases stay aliases, so a semantic token points at the base token it uses, and a typography token expands into one variable per property. For a system whose prefix is acme, the export contains lines like these (taken from the exporter's tests):

tokens.css
/* Generated by M1rror (@tm/system-compiler). Do not edit by hand. */
:root {
  --acme-color-neutral-ink: #14171c;
  --acme-color-text-primary: var(--acme-color-neutral-ink);
  --acme-space-control-md: 12px;
  --acme-motion-fast: 120ms;
}

If your system has themes, each theme becomes a [data-theme="…"] block that lists only the tokens it changes, and a dark theme also follows the reader's system setting through prefers-color-scheme.

Last updated

Edit this page on GitHub