Styles & Design Tokens

Figma styles and variables are the design-side equivalent of design tokens in code. They centralize visual decisions — colors, typography, shadows, and spacing — so that changes propagate everywhere instantly. Understanding how these work in Figma helps you build accurate, maintainable CSS that stays in sync with the design.

Color Styles

Color styles in Figma are named, reusable color values. Instead of applying #2563EB directly to elements, designers apply a style named "Primary/500." When the brand blue changes, they update the style once and every element using it updates.

A typical color style structure:

Primary/50   → #EFF6FF
Primary/100  → #DBEAFE
Primary/500  → #3B82F6
Primary/600  → #2563EB
Primary/700  → #1D4ED8

Neutral/50   → #F8FAFC
Neutral/100  → #F1F5F9
Neutral/500  → #64748B
Neutral/800  → #1E293B
Neutral/900  → #0F172A

Error        → #DC2626
Success      → #16A34A
Warning      → #D97706

These map directly to CSS custom properties:

:root {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-500: #64748b;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  --color-error: #dc2626;
  --color-success: #16a34a;
  --color-warning: #d97706;
}

When inspecting an element in Figma, note the style name rather than the raw hex value. The style name tells you which token to use in code.

Text Styles

Text styles bundle font family, weight, size, line height, and letter spacing into a single reusable definition. A design file might have:

Translate these to CSS utility classes or style definitions:

.heading-h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 2.5rem;
  letter-spacing: -0.02em;
}

.heading-h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 2.125rem;
  letter-spacing: -0.01em;
}

.body-regular {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
}

Effect Styles

Effect styles define shadows, blurs, and other visual effects. Common examples:

Shadow/SM  → 0 1px 2px rgba(0, 0, 0, 0.05)
Shadow/MD  → 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06)
Shadow/LG  → 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)

In CSS:

:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

.card {
  box-shadow: var(--shadow-md);
}

Figma Variables

Figma Variables are a newer, more powerful system that goes beyond styles. Variables can store colors, numbers, strings, and booleans, and they support modes — most commonly used for light/dark theme switching.

A color variable in Figma might have:

This maps to CSS with custom properties and a class toggle:

:root {
  --bg-primary: #ffffff;
  --bg-surface: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border-default: #e2e8f0;
}

.dark {
  --bg-primary: #0f172a;
  --bg-surface: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border-default: #334155;
}

Number variables define spacing and sizing tokens:

Syncing Design Tokens to Code

The dream workflow is having tokens defined once and consumed by both Figma and code. Tools that enable this:

• Tokens Studio for Figma — A Figma plugin that exports tokens as JSON, compatible with Style Dictionary.
• Style Dictionary — Transforms token JSON into CSS custom properties, SCSS variables, JavaScript objects, or platform-native formats.
• Figma REST API — Programmatically fetch styles and variables from a Figma file.

A synced workflow looks like:

1. Designers update a token value in Figma.
2. Tokens Studio exports the updated JSON.
3. A CI pipeline runs Style Dictionary to generate CSS.
4. Developers pull the updated CSS tokens into their project.

This eliminates manual translation errors and keeps design and code in perfect sync.