Skip to content
Design Academy My progress

Stage 5 · Lesson 6 of 14

Variables and design tokens

Storing colours, spacing and modes as reusable values.

  • Beginner
  • 40 min
  • 3 check questions
  • Exercise: 1 h

By the end of this lesson you can

  • Explain variables and how they relate to design tokens.
  • Create colour, number and string variables in collections.
  • Use modes to switch between themes such as light and dark.

The idea

Variables store reusable values: colours, numbers (spacing, radius), strings (text) and booleans. Instead of typing #1D4ED8 into every button, you apply a variable such as color/primary. Change the variable and every use updates.

Design tokens

Design tokens are the same idea in a form shared with code: named values for design decisions. Variables in a design tool can be exported or synced as tokens, so designers and developers use the same names and values.

Primitive and semantic variables

Many teams use two layers. Primitive variables hold raw values (blue/600 = #1D4ED8). Semantic variables describe purpose and point to primitives (color/action/primary = blue/600). Components use semantic variables. When the brand changes, you change what the semantic variable points to.

Collections and modes

Variables live in collections. A collection can have modes: for example Light and Dark, or Compact and Comfortable. Each mode gives the same variable a different value, so switching a frame's mode switches the whole theme.

Why it matters in real projects

Variables make large-scale changes safe and fast, support themes such as dark mode without duplicating screens, and create a shared vocabulary with developers. They are a core skill for working on any modern design system.

A realistic example

A banking app needs a dark theme. Without variables, every screen would have to be duplicated and recoloured.

The team creates primitive colour variables and a semantic collection with Light and Dark modes: surface/default, text/primary, action/primary and so on. Components are updated to use the semantic variables. Switching any screen frame to Dark mode now shows the dark theme instantly, and developers implement it from the same token names.

Step by step

  1. Create primitives

    Make a collection of raw colour values, such as a blue and grey scale.

  2. Create semantics

    Make a collection with names describing purpose, pointing to primitives.

  3. Add modes

    Add Light and Dark modes to the semantic collection.

  4. Add number variables

    Create spacing and radius variables from your scales.

  5. Apply to components

    Use semantic variables in fills, strokes, padding and gaps.

  6. Switch modes

    Change a frame's mode and check everything updates.

Common mistakes

  • Mistake Applying primitive colours directly in components.

    Instead Use semantic variables so themes can change.

  • Mistake Names describing appearance ("blue-button").

    Instead Describe purpose ("action/primary").

  • Mistake Too many variables.

    Instead Start small and add only when needed.

Check your understanding

Choose an answer, then check it. There is an explanation either way.

Question 1 of 3What is a semantic variable?
Show answer

A variable named for its purpose, pointing to a raw value. Semantic variables describe meaning.

Question 2 of 3What do modes allow?
Show answer

Different values for the same variable, such as light and dark themes. Modes switch values for a whole collection.

Question 3 of 3How do variables relate to design tokens?
Show answer

Variables can be shared with code as tokens using the same names. Both are named design decisions.

Practice exercise

Exercise · about 1 h

Themeable card

Create variables and make a card that switches between light and dark themes.

Steps

  1. Create primitive colours.
  2. Create semantic colours with Light and Dark modes.
  3. Build a card using only semantic variables.
  4. Switch modes and fix any contrast problems.

Deliverable

Variable collections and a card shown in both modes.

Self-assessment

Tick each item when it is true of your exercise. Be honest; this is for you.

4 items

Summary

  • Variables store reusable values.
  • Design tokens share the same idea with code.
  • Use primitive and semantic layers.
  • Modes switch themes without duplicating screens.

Further reading

Third-party sources, chosen for reliability. They open in a new tab.

Your notes

Marking complete updates your course and roadmap progress.

Back to Figma and design tools Roadmap

PreviousVariants and reusable patterns Next lessonColour and typography styles