Figma plugin

Tokens to Code

Export Figma variables to CSS and Tailwind.

Open on Figma Community

Tokens to Code: project interface, view 1

For whom

Teams moving Figma Variables into frontend code

Scope

Plugin · CSS Custom Properties · Tailwind

Tools

Figma Variables / CSS Custom Properties / Tailwind

The idea

Bring tokens into code, with their themes and references intact.

When moving Figma variables into code, I wanted to preserve their collections, modes, and relationships. I developed Tokens to Code to generate CSS and Tailwind configuration from that structure, with control over naming and an output that can be reviewed before integration.

Modes

Preserve modes in CSS.

I generated one block per mode with :root[data-theme]. The default mode is written to :root, and aliases stay as var() references.

Light

Release notesVersion 2.0 · 3 min read

Read

:root, :root[data-theme="light"] {
  --accent: var(--blue-500);
  --surface: var(--white);
  --surface-raised: var(--gray-50);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
}

Dark

Release notesVersion 2.0 · 3 min read

Read

:root[data-theme="dark"] {
  --accent: var(--blue-400);
  --surface: var(--gray-900);
  --surface-raised: var(--gray-800);
  --text-primary: var(--gray-50);
  --text-secondary: var(--gray-400);
}

High contrast

Release notesVersion 2.0 · 3 min read

Read

:root[data-theme="high-contrast"] {
  --accent: var(--blue-700);
  --surface: var(--white);
  --surface-raised: var(--white);
  --text-primary: var(--black);
  --text-secondary: var(--gray-900);
}

Selection

Control the export scope.

I let users choose collections, modes, and formats, including web Code Syntax or Figma names. Exporting does not alter source variables.

Tokens to Code: Control the export scope., view 2

Aliases

Preserve token references.

I kept semantic-to-primitive references through var(). External aliases are resolved to values with a comment identifying their origin.

Tailwind

Connect Tailwind to CSS variables.

I made Tailwind configuration reference CSS custom properties to preserve theme switching and opacity modifiers.

tailwind.config.js

theme: {
  extend: {
    colors: {
      "accent": "rgb(var(--accent) / <alpha-value>)",
      "surface": {
        "DEFAULT": "rgb(var(--surface) / <alpha-value>)",
        "raised": "rgb(var(--surface-raised) / <alpha-value>)"
      },
      "text": {
        "primary": "rgb(var(--text-primary) / <alpha-value>)",
        "secondary": "rgb(var(--text-secondary) / <alpha-value>)"
      },
    }
  }
}

release-notes.html

<article class="bg-surface text-text-primary">
  <h3>Release notes</h3>
  <p class="text-text-secondary">Version 2.0</p>
  <button class="bg-accent/10 text-accent">Read</button>
</article>

data-theme="light"

Release notesVersion 2.0 · 3 min readRead

data-theme="dark"

Release notesVersion 2.0 · 3 min readRead

Implementation

How I built it.

Validate the full export

I built the generator to traverse collections and modes, resolve aliases, and group values by type. I added warnings for anything that needs review before integrating the output into a project.

Token generator

Tokens to Code

Export Figma variables to CSS and Tailwind.

Figma Variables: Collections, modes, and aliases.
CSS Custom Properties: One :root block per mode.
Tailwind: theme.extend references CSS variables.
Code Syntax: Web or Figma names, with an optional prefix.
Figma UI3: Offline, local variables only, keyboard accessible.

Figma plugin

The Tailwind output produces theme.extend for tailwind.config.js. This version does not generate Tailwind v4's @theme directive.

View on Figma Community View source on GitHub

Next projectProperties Copycat