Figma Variables: The Single Source of Truth for Tokens

WHY IT EXISTS Before variables, managing design tokens like colors and spacing in Figma was manual and error-prone. Updating a primary color meant finding and replacing it everywhere, creating inconsistencies and slowing down design and development. Variables were created to solve this by centralizing these reusable values, making design systems scalable and maintainable.

THE MENTAL MODEL Think of Figma variables as CSS custom properties, but for your design file. Instead of scattering hex codes and pixel values throughout your components, you define them once in a central panel with a meaningful name, like color-brand-primary or spacing-large. Every element that needs that value then refers to the variable, not the raw value. Change the variable, and every instance updates instantly.

HOW IT WORKS You create variables within "collections," such as colors or spacing. Each variable has a type (Color, Number, String, Boolean) and a value. The real power comes from "modes." A single variable can have different values for different modes. For instance, a surface-background variable could be #FFFFFF in "Light Mode" and #121212 in "Dark Mode". Switching the mode on a frame instantly updates all applied variables within it, making theme switching trivial.

WHEN TO USE IT Use variables as the foundation for any serious design system in Figma. They are essential for managing design tokens for color, spacing, corner radius, and even some text properties. They are the primary mechanism for creating themes (light/dark/high contrast) and for building responsive layouts where spacing rules change based on the screen size mode.

WHEN NOT TO USE IT Don't use variables for one-off, non-system values. If a specific illustration has a unique color that will never be reused, it doesn't need to be a variable. Over-variablizing unique design elements clutters your token system and defeats the purpose of creating a clean, reusable palette. It creates maintenance overhead where none is needed.

ONE CANONICAL EXAMPLE A team is building a design system with light and dark themes. They create a "colors" collection. Inside, they define a variable surface-background and create two modes: "Light" and "Dark". For the "Light" mode, they set surface-background to #FFFFFF. For the "Dark" mode, they set it to #121212. When designing a card component, they apply the surface-background variable to its fill. By switching the mode of the parent frame from "Light" to "Dark", the card's background color instantly and correctly changes without any manual edits.