# Get your tokens into code

> Export opens five destinations and Sync adds two more. Which one to use depends on how often your tokens change and who reviews them.

- Source: https://flashdsm.com/blog/export-tokens-to-code
- Published: 2026-09-11
- Author: Flash DSM Team
- Track: Learn Flash
- Reading time: 6 min read

---

## Every way out of Flash

Almost everything leaves through one button: **Export** in the editor header. It opens a panel with five destinations down the left side. Two more exits live in the Sync view rather than the Export panel: the GitHub App and the live sync link.

| Destination | What you get | Plan |
|---|---|---|
| [[Export > Copy code]] | CSS, SCSS, a Tailwind config or JSON, copied or downloaded | Free |
| [[Export > Figma > Tokens only]] | A Figma tokens `.json` | Free |
| [[Export > Figma > Full file]] | The Flash plugin as a .zip that builds variables, styles and pages | Pro and up |
| [[Export > Code package]] | A runnable project for React, Next.js, Vue, Svelte or Angular | Pro and up |
| [[Export > GitHub]] | Tokens, components and a Tailwind theme pushed to a repo | Pro and up |
| [[Export > Cursor / Claude]] | A `.mdc` rules file and an MCP server | Pro and up |
| GitHub App, in Sync | Automatic pull requests to a repo and path you choose | Pro and up |
| Live sync link, in Sync | A public `tokens.css` URL that always serves current values | Any plan (saved system; an admin publishes it) |

If you only need values in a stylesheet today, Copy code is all you need. Everything below it exists so that you don't have to repeat the copy every time a token changes.

## Copy code, in four formats

[[Export > Copy code]] has a switch at the top: **CSS**, **SCSS**, **Tailwind**, **JSON**. The panel shows the file, you copy it or download it. It is the same output the code package writes, so a copied file and a downloaded project never disagree.

- **CSS** downloads as `design-tokens.css`. When your system has both themes, dark values sit on `:root` and light values go under `[data-theme="light"]` and `prefers-color-scheme: light`. Semantic aliases stay as `var()` references, so changing a primitive cascades through everything that points at it.
- **SCSS** writes the same tokens as Sass variables.
- **Tailwind** writes a `tailwind.config.js` that maps token names to the CSS variables. It needs the CSS file beside it.
- **JSON** is the W3C design-tokens format. Style Dictionary reads it without a custom parser.

On Free, the CSS and Tailwind files open with a short Flash attribution comment. Pro removes it. It is a comment, so it has no effect on what the browser does.

### Colours as HEX, RGBA, HSL or OKLCH

For CSS and SCSS there is a second row, **Colours as**, with four notations. Solid colours are rewritten in the notation you pick. References, gradients and shadows stay exactly as they were.

Pick the one your codebase already speaks. HEX is the safe default. RGBA is handy when a team writes alpha everywhere. HSL reads nicely but lies a little: `hsl(60 100% 50%)` and `hsl(240 100% 50%)` share a lightness value and look nothing alike.

OKLCH deserves a closer look. Its L channel tracks how bright a colour looks, so `oklch(0.62 0.19 250)` tells you something at a glance. It also pays off when your CSS mixes colours itself, with `color-mix()` or relative colour syntax. Mix two hues in sRGB and the midpoint passes through grey. `color-mix(in oklch, var(--primary-500), var(--danger-500))` keeps its colour all the way across. Current Chrome, Safari and Firefox all support it. If you still support browsers from before 2023, stay on HEX.

### Also derive

With CSS selected you get two checkboxes under **Also derive**. Both add blocks to the file and leave your base values untouched.

- **High contrast** moves each foreground to the step on its own ramp that reaches 7:1. Nothing else changes. The block applies under `@media (prefers-contrast: more)` and also when you set `data-contrast="more"` on the root, so you can offer a toggle as well as honour the OS setting.
- **Density** writes spacing at 0.85x under `[data-density="compact"]` and 1.15x under `[data-density="comfortable"]`.

## Wiring it into an app

Here is roughly what the CSS looks like, trimmed. Your token names will be your own.

```css
/* Dark mode (default) */
:root {
  --primary-500: #3d6bf5;
  --neutral-900: #1b1f20;
  --surface: var(--neutral-900);

  /* Spacing */
  --space-4: 16px;

  /* Border Radius */
  --radius-md: 8px;
}

/* Light mode - explicit opt-in */
[data-theme="light"],
.light {
  --surface: var(--neutral-50);
}
```

Import it once, at the root of the app, before anything that reads the variables:

```tsx
// main.tsx
import "./styles/tokens.css";
import "./styles/app.css";
```

The Tailwind config then points utility names at those variables. Scale prefixes are stripped, so you write `rounded-md` and `p-4`, not `rounded-radius-md`:

```js
module.exports = {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        "primary-500": "var(--primary-500)",
        surface: "var(--surface)",
      },
      spacing: { 4: "var(--space-4)" },
      borderRadius: { md: "var(--radius-md)" },
    },
  },
};
```

The `content` globs follow the stack you picked when you generated, so a Vue project gets `.vue` in the pattern. On Tailwind v4, keep the file and load it from your CSS with `@config "./tailwind.config.js";`.

Theme switching is then just an attribute: set `data-theme="light"` on `<html>` and every `bg-surface` follows, because the class never held a colour in the first place.

## Figma, as tokens or a whole file

[[Export > Figma]] has two modes. **Tokens only** gives you a `.json` (**Download .json**) for any tool that imports token files, and it is free. **Full file** hands you the Flash plugin as a .zip (**Download plugin (.zip)**) with your system baked in. Run it in Figma and it builds variable collections with Light and Dark modes, text and effect styles, and pages for Foundations, Components and Modules. That one is Pro and up. If you want the file to keep following Flash after the first build, the plugin's live sync covers that: see [Sync Figma with the plugin](/blog/figma-plugin-live-sync).

## Code package and library themes

[[Export > Code package]] is a runnable .zip for the framework you pick. The **Includes** list tells you what is inside: `tokens/` with CSS, SCSS, JSON and the Figma plugin, `src/styles/tokens.css` already imported at the app root, a token-aware `tailwind.config.js`, your components written the way that framework writes them, a `package.json` that installs and runs, and a README. It is built in your browser and nothing is uploaded.

If your stack is a component library rather than bare CSS, the package carries a theme file for it too, so the library's own buttons and inputs pick up your tokens. The supported libraries are MUI, Vuetify, Angular Material, Ant Design (React and Vue), NG-ZORRO, Chakra, Mantine, shadcn/ui and Bootstrap.

> [!TIP]
> The appearances you ticked under **Also derive** in Copy code land in the package's tokens.css as well. Set them before you download.

## GitHub pull requests

There are two routes into a repo, and they suit different teams.

[[Export > GitHub]] is a push you trigger. You sign in with GitHub's device flow, pick a repo, and Flash writes `tokens/`, `components/`, `tailwind.config.js`, a generated README and CHANGELOG, and `.flash-dsm/manifest.json`. That manifest is what lets the next export open a pull request with a readable diff rather than a wall of new files.

The GitHub App lives in [[Sync > Sources]] under "GitHub app: automatic pull requests". Choose **Install the Flash app**, then the account, repo and path where `tokens.json` and `tokens.css` should live. You can have it open a PR automatically whenever a Figma change is approved in Review. Choose this one if you'd rather review token changes in GitHub than remember to click Export.

## A tokens.css you can import

The simplest option skips files altogether. Turn on the live sync link in [[Sync > Agents]] and your system gets a public, read-only URL. One of its feeds is plain CSS:

```css
@import url("https://flashdsm.com/api/v1/shared/<your-slug>/tokens.css");
```

Every request serves the current values, so a prototype or a CodePen follows your system without anyone re-exporting. Anyone with the URL can read the tokens, so leave this off for a system you'd keep private. A production app is usually better off with a copied or PR'd file it can version and cache, because a network `@import` blocks rendering until it loads.

## Which one to pick

- Trying things in a prototype: the `tokens.css` URL.
- One app, one developer: Copy code, then paste it again when tokens change.
- Starting a fresh project: the code package.
- A team with a real repo: the GitHub App, so every token change arrives as a PR someone reviews.
- AI agents writing your UI: [Keep Cursor and Claude Code on your tokens](/blog/cursor-design-tokens-on-brand-ai).