# Manage variables

> Use the Figma to shadcn/ui plugin to export and import design tokens between Figma and your Tailwind CSS projects.

Canonical: https://www.shadcndesign.com/docs/variables-management

## Managing variables

The plugin features a **Manage Variables** tab for handling design tokens. It reads the file you have open and **detects your kit automatically**, then shows the matching Export and Import options — there is nothing to configure, and older kit files are recognized too.

If you are working in an older kit file, jump to [Older kit files](#older-kit-files) — that flow works exactly as before.

### Export variables

The **Export** tab turns your Figma theme into a `globals.css` you can drop into a shadcn/ui project. You choose three things:

**Style** — pick one of the eight built-in styles (Nova, Vega, Mira, Luma, Sera, Maia, Rhea, Lyra). The export reflects that style's colors, radius ramp, and fonts. There is no longer a kit-version dropdown here — the plugin already knows which kit you are on.

**Color format** — how the color values are written:

- **OKLCH** (default) — the format shadcn/ui ships today.
- **HSL** — classic `hsl()` values.
- **RGB** — plain `rgb()` values.

**Display mode** — how much of the theme is written out:

- **shadcn** — the standard `globals.css` token set (the colors, radius, and fonts every shadcn/ui project expects). Your edits are layered on top of the style's defaults.
- **changed** — only the values you actually changed versus the kit defaults, plus the explicit radius ramp. Handy when you want a small diff to review.
- **all** — everything in **shadcn**, plus the kit's custom semantic tokens emitted as CSS variables and the `--shadow-*` values. Use this when you want the full token surface the kit uses internally, not just the shadcn baseline.

To export:

1. Launch the plugin within your shadcn/ui kit for Figma file.
2. Navigate to the **Manage Variables** tab.
3. Select the **Export** tab.
4. Pick the **Style** you want to export.
5. Choose your **color format** and **display mode**.
6. Click **Generate CSS**.
7. Copy the CSS, or use **Copy CLI** to copy the ready-made command.
8. After a successful export, the plugin also shows the matching base-style hint — run `npx shadcn@latest init` and pick the style with the same name (for example, the `nova` base style).
9. Open your shadcn/ui project, paste the CSS into `globals.css`, or run the copied CLI command in your terminal.

<Callout type="warning" title="Back up your globals.css">
Overwriting or replacing `globals.css` with the exported theme will replace your existing token values. Consider committing or backing up your current `globals.css` before pasting the new one.
</Callout>

### Import variables

The **Import** tab goes the other way: paste a `globals.css` from your codebase and the plugin applies it to the kit. You choose where the theme lands:

- **Add as new style** (default) — creates a brand-new style in the kit's **Style** collection, based on any of the eight built-ins (Nova by default). Name it for your brand (for example, `Acme`) and it lives alongside the built-in styles, so you can switch to it like any other style without touching Nova…Lyra.
- **Overwrite existing style** — replaces the values of a style you pick (for example, Nova) with the pasted theme.

What gets applied: **colors** (light and dark), **radius**, and **fonts**. The kit's Light/Dark modes are left untouched — importing a theme never rewrites the light/dark switch itself.

<Callout type="warning" title="Adding a style requires headroom in your Figma plan">
"Add as new style" creates a new variable mode, and Figma limits modes per collection by plan. Because the Style collection already ships with 8 modes, adding one more may not be available on lower Figma plans — in that case use **Overwrite existing style** instead (you can duplicate the file first to keep a pristine copy). {/* TODO: verify current Figma per-plan mode limits and state them precisely */}
</Callout>

To import:

1. Go to the **Import** tab.
2. Choose **Add as new style** (and its base style + a name) or **Overwrite existing style** (and which style).
3. Paste your `globals.css`.
4. Click **Import Variables**.

Your CSS should follow the standard shadcn/ui shape:

```css
:root {
  --background: oklch(0.9816 0.0017 247.839);
  --foreground: oklch(0.1649 0.0352 281.8285);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.1649 0.0352 281.8285);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.1649 0.0352 281.8285);
  --primary: oklch(0.6726 0.2904 341.4084);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9595 0.02 286.0164);
  --secondary-foreground: oklch(0.1649 0.0352 281.8285);
  --muted: oklch(0.9595 0.02 286.0164);
  --muted-foreground: oklch(0.1649 0.0352 281.8285);
  --accent: oklch(0.8903 0.1739 171.269);
  --accent-foreground: oklch(0.1649 0.0352 281.8285);
  --destructive: oklch(0.6535 0.2348 34.037);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9205 0.0086 225.0878);
  --input: oklch(0.9205 0.0086 225.0878);
  --ring: oklch(0.6726 0.2904 341.4084);
  --chart-1: oklch(0.6726 0.2904 341.4084);
  --chart-2: oklch(0.5488 0.2944 299.0954);
  --chart-3: oklch(0.8442 0.1457 209.2851);
  --chart-4: oklch(0.8903 0.1739 171.269);
  --chart-5: oklch(0.9168 0.1915 101.407);
  --sidebar: oklch(0.9595 0.02 286.0164);
  --sidebar-foreground: oklch(0.1649 0.0352 281.8285);
  --sidebar-primary: oklch(0.6726 0.2904 341.4084);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.8903 0.1739 171.269);
  --sidebar-accent-foreground: oklch(0.1649 0.0352 281.8285);
  --sidebar-border: oklch(0.9205 0.0086 225.0878);
  --sidebar-ring: oklch(0.6726 0.2904 341.4084);
  --font-sans: Outfit, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Fira Code, monospace;
  --radius: 0.5rem;
}

.dark {
  --background: oklch(0.1649 0.0352 281.8285);
  --foreground: oklch(0.9513 0.0074 260.7315);
  --card: oklch(0.2542 0.0611 281.1423);
  --card-foreground: oklch(0.9513 0.0074 260.7315);
  --popover: oklch(0.2542 0.0611 281.1423);
  --popover-foreground: oklch(0.9513 0.0074 260.7315);
  --primary: oklch(0.6726 0.2904 341.4084);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.2542 0.0611 281.1423);
  --secondary-foreground: oklch(0.9513 0.0074 260.7315);
  --muted: oklch(0.2542 0.0611 281.1423);
  --muted-foreground: oklch(0.6245 0.05 278.1046);
  --accent: oklch(0.8903 0.1739 171.269);
  --accent-foreground: oklch(0.1649 0.0352 281.8285);
  --destructive: oklch(0.6535 0.2348 34.037);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.3279 0.0832 280.789);
  --input: oklch(0.3279 0.0832 280.789);
  --ring: oklch(0.6726 0.2904 341.4084);
  --chart-1: oklch(0.6726 0.2904 341.4084);
  --chart-2: oklch(0.5488 0.2944 299.0954);
  --chart-3: oklch(0.8442 0.1457 209.2851);
  --chart-4: oklch(0.8903 0.1739 171.269);
  --chart-5: oklch(0.9168 0.1915 101.407);
  --sidebar: oklch(0.1649 0.0352 281.8285);
  --sidebar-foreground: oklch(0.9513 0.0074 260.7315);
  --sidebar-primary: oklch(0.6726 0.2904 341.4084);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.8903 0.1739 171.269);
  --sidebar-accent-foreground: oklch(0.1649 0.0352 281.8285);
  --sidebar-border: oklch(0.3279 0.0832 280.789);
  --sidebar-ring: oklch(0.6726 0.2904 341.4084);
}
```

<Callout type="info" title="A custom theme is just a new style">
When you **Add as new style**, the plugin creates a new mode in the kit's Style collection based on the built-in you picked. That is exactly how the kit represents brand themes — your theme becomes a first-class style you can switch to. Learn more in the [styles documentation](/docs/styles) and the [theming guide](/docs/theming).
</Callout>

### Typeset export and import

Typeset has its own tab in the plugin, next to Manage Variables — see the dedicated [Typeset export and import](/docs/plugin-typeset) page.


### Settings and kit detection

Open the plugin **Settings** tab to confirm what was detected. A line reads, for example, **"Detected: 2026 kit v2.0 (8 styles)"**.

Detection is automatic, so you normally don't need to change anything. As an escape hatch — for instance, if a collection in your file was renamed — there is a single **Kit structure** override with these options:

- **Auto (detect)** (default, recommended) — let the plugin decide.
- **July 2026 and newer** — the current kit (8 styles in one file).
- **June 2026 and older** — the earlier Tailwind v4 kit.
- **January 2025 and older** — the Tailwind v3 era kits.

Leave it on **Auto** unless you have a specific reason to force a structure.

### Older kit files

If you have an earlier kit open, the plugin shows the classic flow automatically — nothing about it changed.

- Make sure the plugin's detection matches your file (Settings shows what it found).
- On export, choose your **theme** and **color mode**, then **Generate CSS** and **Copy CLI** as before. There is no version dropdown anymore — the plugin picks the matching kit-release defaults automatically.
- For files from **January 2025 and earlier** (Tailwind v3 era), the Tailwind v3 tabs appear automatically — no manual switch needed.
- Import works the same as before: choose an **existing theme** to replace its values, or a **new theme** to add one to the Figma variables panel.

<Callout type="info" title="Migrating from an older kit?">
The exported `globals.css` from any kit generation drops into a shadcn/ui project the same way. If you're moving to the latest kit, open the new file and use the flow above — your brand colors can come across via **Import → Add as new style**.
</Callout>

### Create

The **Create** tab aligns your Figma kit with the presets from [shadcn/ui create](https://ui.shadcn.com/create) — style, base color, theme, chart colors, custom hex, icon library, font, heading font, radius, and menu accent. Create applies your theme choices **across all eight styles at once**, so your base color and typography stay consistent no matter which style is active. Each field shows its name inside the control (for example "Base Color: Neutral"); fields left on "No change" are not touched.

You can currently adjust:

- Style (see below)
- Base color
- Theme
- Chart colors
- Custom hex color
- Icon library
- Heading font
- Font
- Radius
- Menu accent

<LoomEmbed videoId="9dee7516a0ba4d64a65289851aeeac4d" />
{/* TODO: verify — re-record for plugin 2.0 / 2026 kit if the UI changed */}

#### How to use the Create feature:

1. Open the plugin in your shadcn/ui Figma library file.
2. Go to the **Manage Variables** tab.
3. Switch to the **Create** tab.
4. Pick your desired theme options.
5. Click **Create**.

After a short moment, the plugin will update your Figma variables to match the selected settings.

<Callout type="info" title="Choosing a style in Create">
Create includes a **Style** field (Nova, Vega, Mira, Luma, Sera, Maia, Rhea, or Lyra). Choosing one makes it the kit's **default style** — it becomes the first mode in the `Style` collection, so everything that follows the collection default renders in that style. You can still switch styles per page or frame at any time via the Style mode, [as described in the styles docs](/docs/styles). One thing to know: frames where you explicitly pinned a Style mode keep their pinned slot, so making a new style the default swaps what those pins point to.
</Callout>

#### Decode Preset

Paste a shadcn/ui preset code, for example `--preset b6YWkyP8i`, into the preset field and click **Decode**.

The plugin reads the preset and fills the Create settings automatically, including supported values like base color, theme, chart color, icon library, font, heading font, radius, and menu accent.

Decoded values are only applied to the form. To update your Figma variables, review the populated settings and click **Create**. The preset's style is decoded too and fills the **Style** field (on older kit files, which carry a single style, it is ignored).