Design Systems Fundamentals Module 4 · Lesson 17 of 25
12
Jane Doe
07:12 / 21:04 1.25×
In progress 21 min

17. Tokens in Figma: variables and modes

Figma variables are the bridge between your design tokens and your working files. In this lesson we recreate the course token set as a variable collection, wire up light and dark modes, and connect component styles so a single toggle re-themes an entire screen.

By the end you will publish the collection as a team library and see how alias tokens keep component variables readable when the primitive palette changes underneath them.

What you’ll learn

  • Variables replace styles for anything that changes between themes
  • Modes = one variable, many values: light, dark, compact
  • Alias tokens keep component variables readable and refactor-safe
  • Publishing a library makes tokens available across every file