Design Tokens from Figma: Turning Visual Decisions into Code

By Current Labs · March 5, 2026 · Tags: design-tokens, Figma, design-systems, AI.D

Every design system encodes hundreds of visual decisions. The blue used for primary actions. The 16px of padding inside a card. The 700-weight font for headings. These decisions are made once in Figma — and then re-made, by hand, every time a developer writes CSS.

Design tokens fix this by turning those decisions into named, portable variables. And extracting them from Figma is now easier than ever.

What Are Design Tokens?

A design token is a named value that represents a single design decision. Instead of writing color: #2A6AF6, you write color: var(--color-primary). Instead of padding: 16px, you reference var(--spacing-md).

Tokens are platform-agnostic. The same token can resolve to a CSS custom property, a SCSS variable, a Swift constant, or a Tailwind class — depending on the target platform.

The W3C Design Tokens specification (now in Community Group Draft) formalizes this concept, defining a standard format for token files that tools can read and write. This is the direction the industry is heading, and it's a good foundation to build on.

Why Tokens Matter

Consistency

When every component references --color-primary instead of a hex code, a rebrand goes from a multi-week project to a single token update. Every instance updates at once.

Maintainability

Tokens make your codebase searchable and auditable. You can find every usage of a spacing value, see which components use which colors, and detect inconsistencies before they reach users.

Design-Development Alignment

Tokens create a shared vocabulary. When a designer says "use the medium spacing" and a developer reads --spacing-md, they're talking about the exact same value. No interpretation, no drift.

Multi-Platform Support

If you ship web, iOS, and Android, tokens give you one source of truth with multiple outputs. Update the token, regenerate the platform-specific files, and every platform stays in sync.

The Token Types

Design tokens generally fall into five categories:

Colors

The most common tokens. These include fills, strokes, text colors, background colors, and semantic aliases (like color-success, color-danger, color-interactive).

Figma source: Fill styles, Figma variables, and component-specific overrides.

Typography

Font family, size, weight, line height, letter spacing, and text decoration — bundled as composite tokens. A single heading-lg token might resolve to Plus Jakarta Sans / 32px / 700 / 1.25.

Figma source: Text styles and individual text layer properties.

Spacing

Padding, margins, and gaps. These are typically extracted from auto layout properties in Figma: the padding on a frame, the gap between child elements.

Figma source: Auto layout padding and gap values, frame constraints.

Border and Shape

Border radius, border width, border style. Shape tokens define the geometry of interactive elements — pill buttons, rounded cards, sharp-edged containers.

Figma source: Corner radius, stroke weight, and stroke style.

Effects

Shadows, blurs, and opacity. These are often the trickiest to extract faithfully because Figma's shadow model doesn't map 1:1 to CSS box-shadow in all cases — but it's close enough for most production use.

Figma source: Drop shadow, inner shadow, layer blur, and background blur effects.

How Current Labs Handles Token Extraction

The Atomic Design Extractor takes a structured approach to token extraction:

Scan — The plugin traverses your selected components and catalogs every visual property.
Deduplicate — Identical values are merged into single tokens. If five components use #0C0D0D as a background, one color-bg-primary token is created.
Name — Tokens are named using a consistent convention. If you've already named your Figma styles or variables, those names are preserved. Otherwise, the plugin generates semantic names based on context and usage.
Map — Each component's code output references tokens instead of raw values. The generated CSS uses var(--token-name), not #hex.
Export — Tokens are exported in your chosen format: CSS custom properties, SCSS variables, JSON (W3C format), or all three.

Practical Example

Consider a simple button in Figma with these properties:

Fill: #2A6AF6
Text color: #FFFFFF
Font: Plus Jakarta Sans, 16px, 600 weight
Padding: 12px vertical, 24px horizontal
Border radius: 8px

After extraction, the token file might look like this:

:root {
  --color-cta: #2A6AF6;
  --color-text-on-cta: #FFFFFF;
  --font-family-primary: 'Plus Jakarta Sans', sans-serif;
  --font-size-md: 16px;
  --font-weight-semibold: 600;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --radius-sm: 8px;
}

And the generated component references them:

.button-primary {
  background-color: var(--color-cta);
  color: var(--color-text-on-cta);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
}

Change the brand blue in your tokens file, and every component that uses --color-cta updates instantly.

Getting Started

If you're working with Figma and want to bring design tokens into your workflow:

Audit your Figma file. Use Figma variables and named styles wherever possible — they produce cleaner tokens.
Start with colors and typography. These have the highest impact and are the easiest to validate.
Try the Atomic Design Extractor. Sign up for early access and run an extraction on a small component set. Review the token output and see how it maps to your existing code.

Tokens are the foundation of a scalable design system. Once they're in place, everything else — code generation, theming, multi-platform support — becomes dramatically easier.