← Back to all guides
Figma Design Systems

How to Set Up Figma Color Variables & Design Tokens in 2025

Figma Variables & Modes deep dive · 5 min read

Figma Variables revolutionized how design systems are structured. Instead of creating hundreds of detached color styles, variables allow you to establish semantic tokens and switch entire UI themes (e.g., Light Mode, Dark Mode, High Contrast) in one click.

In this guide, we will cover the proven 2-tier token architecture used by top design teams at Stripe, Linear, and Vercel.

The 2-Tier Variable Architecture

Tier 1: Primitives (Global Palette)

Raw hex values with numeric scales (e.g., Brand/Orange-500: #FF6A00, Neutral/Gray-900: #1A1A1A). These should rarely be applied directly to UI components.

Tier 2: Semantic Tokens (Component Roles)

Context-aware references pointing to primitives (e.g., surface/card-bg, text/primary, border/subtle). This is what makes Dark Mode instant.

How to Import Website Colors Directly into Figma

Instead of manually clicking "+ Add Variable" for 30 color shades, use ChromaPick to scan any live inspiration site. ChromaPick categorizes elements into semantic roles and copies a structured JSON token object ready for Figma.

Speed up your Figma Variable workflow

Extract palettes and copy Figma tokens in under 30 seconds.

Add ChromaPick to Chrome — Free

Setting Up Multi-Theme Modes in Figma

  1. Open the Local Variables panel in Figma.
  2. In the top right of your collection table, click + (New Mode) and rename the columns to Light and Dark.
  3. Assign your light primitive tokens to the Light column and dark primitive tokens to the Dark column.
  4. When you place a component frame inside a section, switch the mode in the right panel to instantly flip the entire interface.

Conclusion

Using structured variables ensures your Figma designs remain consistent, easy to hand off to developers, and simple to re-theme in the future.

The Figma variable workflow works on ChromaPick's free tier. Pro ($10 one-time) unlocks unlimited extractions and tokens.json/code exports for bigger systems.

Related guides