Design Tokens And Figma

Figma can host Design Tokens through variables, styles, components, and team libraries.

Variables are the closest native Figma feature to design tokens.

Styles still matter because they can package multiple properties into one reusable design choice.

Core Relationship

Design Token Layer	Figma Feature	Example
primitive token	variable value	color/blue/500, spacing/4, font-size/100
semantic token	aliased variable	color/text/primary, color/background/default
component token	component-specific variable or style binding	button/background/primary, input/border/error
mode token	variable mode	light mode, dark mode, compact mode, desktop mode
design library	published variables, styles, and components	shared design system file

The usual structure is:

primitive variable
  -> semantic variable
    -> component variable or style
      -> component instance

Figma Building Blocks

Figma Feature	Role In A Token System
variables	reusable raw values such as color, number, string, and boolean
collections	groups of variables and modes
groups	nested organization inside a collection
modes	alternate values for one context, such as light and dark themes
aliasing	making one variable reference another variable of the same type
styles	reusable visual recipes, especially for text styles, effects, and gradients
components	reusable interface parts that consume variables and styles
team libraries	shared source of truth across files

Suggested Collection Structure

For a small design system, start with three collections.

Collection	Purpose	Example Variables
Primitives	raw scales and brand foundations	color/blue/500, spacing/4, radius/sm
Semantic	interface meaning	color/text/primary, color/surface/default, spacing/content/gap
Components	component-specific decisions	button/background/primary, card/padding/default

For a larger system, split the structure further:

• Brand: brand colors, fonts, logo-related values
• Core: neutral color scale, spacing scale, radius, shadow, motion
• Theme: semantic light and dark values
• Components: button, input, card, modal, navigation
• Content: reusable strings or localization variables

Do not create many collections too early.

Too many collections make mode switching and maintenance harder.

Setting Up Tokens In Figma

1. Define the token architecture before creating variables.
2. Create primitive variables first.
3. Create semantic variables and alias them to primitive variables.
4. Add modes to semantic collections when the meaning needs to change by context.
5. Bind variables to styles and components.
6. Publish variables, styles, and components as a library.
7. Document how each token should be used.

Example:

color/blue/500 = #3E4FC8
  -> color/background/primary = color/blue/500
    -> button/background/primary = color/background/primary

The raw value can change while the semantic and component names stay stable.

Naming Variables

Use names that describe structure and responsibility.

Figma supports grouping variables with slash-style names.

color/brand/500
color/text/primary
color/text/error
color/surface/default
spacing/content/gap
radius/card/default
button/background/primary
input/border/error

Avoid names that only describe taste or temporary appearance.

Weak Name	Better Name	Why
nice-blue	color/brand/500	names the scale position
dark-text	color/text/primary	names the role
big-space	spacing/section	names the layout purpose
button-blue	button/background/primary	names the component decision

Applying Color Tokens

Color variables can be applied to solid fills and strokes.

Useful color token groups:

• brand colors
• text colors
• surface colors
• border colors
• feedback colors
• focus-ring colors

Example structure:

color/gray/900
  -> color/text/primary
 
color/red/600
  -> color/text/error
  -> color/border/error

For gradients, keep a Figma style when the gradient itself needs to be reused.

Use variables for the individual color stops when possible.

Applying Typography Tokens

Typography usually needs both variables and styles.

Variables can store shared text properties:

• font family
• font style or weight name
• font size
• line height
• letter spacing
• paragraph spacing

Text styles can package those properties into reusable type decisions:

font-family/body
font-size/body-md
line-height/reading
font-weight/regular
  -> text style: Body / Medium

Use text styles for complete text roles such as:

• Display / Large
• Heading / Medium
• Body / Medium
• Label / Small
• Button / Default
• Caption / Default

Use variables inside those styles when the same property should update across many text styles.

Applying Spacing And Layout Tokens

Number variables can support spacing, sizing, radius, and layout values.

Common uses:

• auto layout gap
• auto layout padding
• corner radius
• stroke width
• width and height
• min and max dimensions
• icon size
• component density

Example:

spacing/4 = 16
  -> spacing/content/gap
    -> card/padding/default

Use semantic spacing tokens when the value has meaning.

For example, spacing/content/gap is more useful than using spacing/4 directly in every component.

Applying Modes

Modes let one variable have different values in different contexts.

Common modes:

• light and dark theme
• brand A and brand B
• mobile and desktop
• compact and comfortable density
• language or locale text variants

Example:

Token	Light Mode	Dark Mode
color/text/primary	color/gray/900	color/gray/50
color/surface/default	color/white	color/gray/950
color/border/default	color/gray/200	color/gray/700

Set modes at the page, frame, or component level.

Objects set to automatic mode inherit the mode from their parent container.

Applying Tokens To Components

Components should consume semantic or component tokens, not raw primitive values.

Good pattern:

color/blue/500
  -> color/action/primary
    -> button/background/primary
      -> Primary Button component

This keeps components stable when brand values or themes change.

For component variants, tokens can control:

• background color
• text color
• border color
• radius
• padding
• gap
• icon size
• disabled opacity
• layer visibility
• variant switching in prototypes

Variables Or Styles?

Use Variables For	Use Styles For
values that need modes	complete typography styles
values that need aliasing	gradients
color, spacing, radius, sizing	complex effects
theme switching	reusable visual recipes
values that should map to code tokens	designs that need bundled properties

Variables are better for system values.

Styles are better for reusable appearances that combine several values.

A mature Figma design system usually uses both.

Workflow Checklist

• define the token levels first
• create primitive variables
• create semantic variables with aliases
• use modes for themes and contexts
• bind variables to text styles, color styles, and components
• avoid using primitive variables directly in components unless there is no semantic meaning
• document token usage rules
• publish the design system file as a team library
• audit screens for detached colors, one-off spacing, and unbound text styles

Sources

• Figma: Overview of variables, collections, and modes
• Figma: Modes for variables
• Figma: Guide to variables in Figma
• Figma: Apply variables to designs
• Figma: Design tokens resource library

Related

• Design Tokens
• Design System
• Design Library
• Design System Documentation