Figma Design Tokens: How to Set Up, Sync, and Use Them in Code

Figma Design Tokens: A Practical Guide

Design tokens are the bridge between Figma and code. When they work, your designer changes a color in Figma and the update flows to your React components automatically. When they don't work (or don't exist), designers and developers spend hours in Slack arguing about whether that gray is #6B7280 or #71717A.

This guide covers how to set up design tokens in Figma, sync them to code, and build a workflow where your design system stays consistent across both environments.

If you're new to design tokens, start with our explainer on what design tokens are before diving into this guide.

What Are Figma Design Tokens?

Design tokens in Figma are named values for colors, spacing, typography, border radii, shadows, and other visual properties. Instead of using raw hex codes or pixel values, you reference tokens by name:

• color.primary.500 instead of #3B82F6
• spacing.4 instead of 16px
• radius.lg instead of 12px
• font.size.base instead of 14px

Figma introduced native Variables in 2023, which function as design tokens within Figma. Before that, designers used plugins like Tokens Studio. Both approaches work, but native Variables are now the standard path.

The real value of tokens shows up when you need to:

• Rebrand. Change color.primary from blue to purple, and every component updates.
• Support dark mode. Swap the token set so color.background changes from white to dark gray.
• Keep Figma and code in sync. Both reference the same token names, so the handoff is exact.

Setting Up Tokens in Figma

Step 1: Define Your Token Categories

Start with these categories (you can expand later):

Colors

color.primary.50 through color.primary.950
color.neutral.50 through color.neutral.950
color.success, color.warning, color.error
color.background, color.foreground
color.card, color.border, color.input
color.muted, color.accent

Spacing

spacing.0 (0px)
spacing.1 (4px)
spacing.2 (8px)
spacing.3 (12px)
spacing.4 (16px)
spacing.6 (24px)
spacing.8 (32px)
spacing.12 (48px)
spacing.16 (64px)

Border Radius

radius.sm (4px)
radius.md (6px)
radius.lg (8px)
radius.xl (12px)
radius.full (9999px)

Typography

font.size.xs (12px)
font.size.sm (14px)
font.size.base (16px)
font.size.lg (18px)
font.size.xl (20px)
font.size.2xl (24px)
font.size.3xl (30px)

Step 2: Create Variables in Figma

1. Open your Figma design file
2. Go to the Variables panel (right sidebar or via the canvas menu)
3. Create variable collections for each category
4. Add modes for light and dark themes

For colors, create two modes: "Light" and "Dark." Each token name stays the same, but the value changes per mode:

Token	Light	Dark
color.background	#FFFFFF	#0A0A0A
color.foreground	#0A0A0A	#FAFAFA
color.card	#FFFFFF	#1C1C1C
color.border	#E5E7EB	#2E2E2E
color.primary.500	#3B82F6	#60A5FA

Step 3: Apply Variables to Components

Replace every hardcoded color, spacing, and radius value in your Figma components with variables. This is tedious the first time but pays off permanently:

• Select a component
• In the fill/stroke picker, switch to the Variables tab
• Choose the appropriate token

Do this for every component in your library. Once done, switching between light and dark mode is instant, and rebranding means changing token values, not editing 200 components.

Syncing Figma Tokens to Code

This is where most teams struggle. You have tokens in Figma, you have CSS in your codebase, and they need to stay in sync. Here are the three main approaches:

Option 1: Tokens Studio Plugin (Most Popular)

Tokens Studio (formerly Figma Tokens) is a Figma plugin that manages design tokens and syncs them to a Git repository as JSON. Your build process then transforms the JSON into CSS custom properties, Tailwind config, or whatever format your code needs.

Workflow:

1. Define/edit tokens in the Tokens Studio plugin
2. Push token JSON to your GitHub repo
3. CI pipeline transforms JSON to CSS using Style Dictionary
4. Developers pull the updated CSS

Pros: Full control over token structure, supports complex token relationships (aliases, math), large community.

Cons: Adds a plugin dependency, requires CI setup, doesn't use Figma's native Variables.

Option 2: Figma Variables + REST API

Figma's REST API can read Variables from your design file. You can build a script that fetches variables and generates CSS:

// fetch-tokens.js
const FIGMA_TOKEN = process.env.FIGMA_ACCESS_TOKEN;
const FILE_KEY = 'your-figma-file-key';

async function fetchTokens() {
  const response = await fetch(
    `https://api.figma.com/v1/files/${FILE_KEY}/variables/local`,
    { headers: { 'X-Figma-Token': FIGMA_TOKEN } }
  );
  const data = await response.json();

  // Transform to CSS custom properties
  let css = ':root {\n';
  for (const variable of Object.values(data.meta.variables)) {
    const name = variable.name.replace(/\//g, '-');
    // Get the value for the default mode
    const modeId = Object.keys(variable.valuesByMode)[0];
    const value = variable.valuesByMode[modeId];
    if (typeof value === 'object' && value.r !== undefined) {
      css += `  --${name}: rgb(${Math.round(value.r * 255)}, ${Math.round(value.g * 255)}, ${Math.round(value.b * 255)});\n`;
    }
  }
  css += '}\n';
  return css;
}

Pros: Uses native Figma Variables, no plugin dependency.

Cons: Requires Figma Enterprise or Professional plan for API access, more custom code to maintain.

Option 3: Manual Sync (Simplest)

For smaller teams, manually maintaining a tokens file in both Figma and code works. Define your tokens in a CSS file, and ensure your Figma variables use the same values:

:root {
  /* Colors */
  --color-primary-500: #3B82F6;
  --color-neutral-100: #F3F4F6;
  --color-neutral-900: #111827;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-4: 16px;

  /* Radius */
  --radius-md: 6px;
  --radius-lg: 8px;
}

[data-theme="dark"] {
  --color-primary-500: #60A5FA;
  --color-neutral-100: #1F2937;
  --color-neutral-900: #F9FAFB;
}

Pros: No tooling required, easy to understand.

Cons: Tokens can drift between Figma and code if someone forgets to update one side.

Using Tokens in Your Code

With Tailwind CSS

Map your CSS custom properties to Tailwind's theme config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: 'var(--color-primary-500)',
          600: 'var(--color-primary-600)',
        },
        background: 'var(--color-background)',
        foreground: 'var(--color-foreground)',
        card: 'var(--color-card)',
        border: 'var(--color-border)',
      },
      borderRadius: {
        md: 'var(--radius-md)',
        lg: 'var(--radius-lg)',
      },
      spacing: {
        1: 'var(--spacing-1)',
        2: 'var(--spacing-2)',
        4: 'var(--spacing-4)',
      },
    },
  },
};

Now you use tokens through Tailwind classes:

<div className="bg-background text-foreground rounded-lg p-4">
  <button className="bg-primary-500 text-white rounded-md px-4 py-2">
    Get Started
  </button>
</div>

With shadcn/ui

shadcn/ui already uses CSS custom properties for theming. If you're using shadcn, you're halfway to a token system. The default globals.css includes:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... more tokens */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... dark mode tokens */
}

You can extend this with additional tokens for your specific needs. The thefrontkit SaaS Starter Kit builds on this approach with a more comprehensive token set that includes spacing, radii, and typography tokens alongside colors, all synced with its Figma file.

With Plain CSS

If you're not using Tailwind, reference tokens directly:

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.card-title {
  color: var(--color-foreground);
  font-size: var(--font-size-lg);
}

Dark Mode with Tokens

Tokens make dark mode straightforward. Instead of writing separate dark mode styles for every component, you swap the token values:

:root {
  --color-background: #FFFFFF;
  --color-foreground: #0A0A0A;
  --color-card: #FFFFFF;
  --color-border: #E5E7EB;
}

[data-theme="dark"] {
  --color-background: #0A0A0A;
  --color-foreground: #FAFAFA;
  --color-card: #1C1C1C;
  --color-border: #2E2E2E;
}

Every component that uses var(--color-background) automatically gets the correct value for the current theme. No component-level dark mode overrides needed.

In Figma, this maps to Variable modes. Your Light mode and Dark mode use the same token names with different values. Designers see exactly what the dark mode looks like by switching modes, and the code behavior matches.

Common Mistakes

Too many tokens. You don't need a token for every possible value. Start with colors, spacing scale, border radii, and font sizes. Add more only when you find yourself repeating values across components.

Tokens without naming conventions. blue-500 is a raw value, not a semantic token. Use semantic names like color.primary or color.destructive that describe purpose, not appearance. This makes rebranding possible.

Figma and code diverging. Set a process. When a designer changes a token in Figma, there needs to be a way for that change to reach the code. Automated sync is ideal. Manual updates work for small teams if someone owns the process.

Skipping dark mode tokens. If you plan to support dark mode (and you should for dashboards), define both modes from the start. Adding dark mode tokens after building 40 components means revisiting every one.

For a deeper look at how tokens fit into a larger design system, read our guide on how design tokens keep SaaS and AI products cohesive.

Getting Started

If you're starting from scratch:

1. Define your base color palette, spacing scale, and radii in Figma Variables
2. Create Light and Dark modes
3. Apply variables to all Figma components
4. Export tokens to CSS custom properties (manually or via Tokens Studio)
5. Map CSS properties to your Tailwind config
6. Use token-based classes in your components

If you want to skip steps 1-5, the thefrontkit SaaS Starter Kit ships with a complete token system already synced between Figma and code. You get the token architecture, both theme modes, and 50+ components built on those tokens. For design engineers looking at the broader Figma-to-code workflow, our Figma to code workflow guide covers the full pipeline.

FAQ

What are Figma design tokens? Design tokens are named values for visual properties like colors, spacing, typography, and border radii. In Figma, they're implemented as Variables. Instead of using raw hex codes (#3B82F6), you reference tokens by name (color.primary.500). This makes your design system consistent and easy to update. Read our full explainer on what design tokens are.

How do I export design tokens from Figma? Three main ways: (1) Tokens Studio plugin exports to JSON, which you transform with Style Dictionary. (2) Figma REST API reads native Variables programmatically. (3) Manual copy where you maintain matching CSS files. Tokens Studio is the most popular for teams that need automated sync.

Can I use Figma design tokens with Tailwind CSS? Yes. Export your tokens as CSS custom properties, then reference them in your tailwind.config.js theme section. This way, Tailwind utility classes like bg-primary-500 resolve to your token values, and changing a token updates every component that uses it.

What's the difference between Figma Variables and Tokens Studio? Figma Variables are native to Figma (no plugin needed) and support modes (light/dark). Tokens Studio is a plugin that predates Variables, offers more features (math, aliases, multi-file output), and syncs directly to Git repos. Many teams now use Figma Variables for design and Tokens Studio for the code sync pipeline.

How do design tokens help with dark mode? Tokens let you define two sets of values (light and dark) under the same token names. Your components always reference var(--color-background), and the value changes based on the active theme. This means zero component-level dark mode overrides. In Figma, this maps to Variable modes so designers can preview both themes instantly.

Do I need a design system to use design tokens? No. You can start with tokens for just colors and spacing in a small project. Tokens scale from a simple CSS file with a few custom properties to a full design system with hundreds of tokens synced between Figma and code. Start small and add tokens as your project grows.