Why It Matters
Figma Variables (introduced in 2023) bring design token functionality natively into Figma. Instead of using color styles alone, you can create variables with modes (light/dark, mobile/desktop) that switch contextually. Variables can reference other variables, creating a hierarchy. This is the closest Figma gets to true design token systems.
Examples
1
A "surface.primary" color variable with Light Mode (#FFFFFF) and Dark Mode (#1A1A1A) values.
2
A "spacing.md" number variable (16) used across padding, gap, and margin properties.
3
An alias variable "button.background" referencing "interactive.primary" for maintainability.
Related Terms
Design Tokens
Named, platform-agnostic values that store design decisions like colors, spacing, typography, and shadows, enabling consistent styling across design tools and code.
Design System
A comprehensive collection of reusable components, patterns, guidelines, and design tokens that work together to ensure consistency and efficiency across product development.
Token Drift
The gradual divergence between design tokens in Figma and their implementations in code, causing visual inconsistencies across platforms.
Component Set
A group of related component variants combined into a single component with configurable properties, allowing users to switch between variants without swapping components.
Explore More Design Terms
Browse our complete glossary of Figma and design systems terminology.