May 17 2026

Updated May 19 2026

Tokens = Variables

A design token and a variable are the same thing — reusable values like colors, spacing, or typography. In Figma and development context, they're usually called variables. In design systems context, they're usually called tokens.

avatar

Kaida team

Tokens = Variables

A "token" is essentially another term for a "variable".
There’s no major difference in meaning between the two, but they’re typically used in different contexts.

Variables

"Variables" is a term that is widely used in development (CSS variables, etc.).

"Variables" is what Figma calls its variables, and they are used within the Figma context. They provide additional capabilities inside Figma:

  • Colors. Create a variable called Primary / Blue and apply it to buttons, links, and icons. Changing the variable updates all connected elements instantly.
  • Spacing. Use variables like 8px, 16px, and 24px for padding and margins to keep layouts consistent across designs.
  • Typography. Define text size variables such as Heading Large or Body Small so font styles stay uniform throughout the project.
  • Themes. Set up Light Mode and Dark Mode variables. Switching modes automatically updates colors across the interface.
  • Dev handoff. Share variables with developers so design values like colors, spacing, and radius stay aligned in code and design systems.

Tokens

"Tokens" is the term used for variables in the context of design systems.

  • Token is a variable that can hold a color, typography, spacing, or effect value — anything used in a design system.
  • Dev handoff. Tokens can be exported or stored in a format developers can use (like JSON).

[color-token / color-variable]: color-value
red-500: #EE5449
red-500 is a token variable with a value of #EE5449
border: red-500
border is a token (variable) with a value of red-500

Primitives & Semantic tokens

Primitives are foundational variables, such as red-500. These values are referenced by semantic tokens.
Semantic tokens are contextual variables built on top of primitives, such as border, background, and foreground. They describe how values are used within the interface rather than the raw value itself.