Skip to main content

Figma Variables — Overview

What Are Variables?​

Figma Variables allow us to store reusable values like colors, spacing, typography sizes, or booleans, and apply them across components. They are dynamic, meaning you can switch between brands, modes (light/dark), or even products instantly, without manually editing components.

Why We’re Introducing Variables​

Our design system is multi-brand and multi-dimensional. Before variables, designers had to manually update components for each brand or mode, using the Tokens Studio plugin, leading to:

  • Dependence on the DS team for token application.
  • Need to learn how to use Token Studio.
  • Significant difficulties in configuring access (GitHub, plugin keys, etc.).
  • Components cannot be represented or tested by brand.
  • Efforts are duplicated between teams.
  • Inconsistent design decisions and style deviations.
  • Slow updates when changes need to be applied across all brands.
  • Complex quality control when validating light/dark or multi-brand designs.

Variables in action

The Benefits for Designers​

Variables in Figma Design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows.

With variables in place on our Design System, you can:

  • Switch brands or modes instantly — no need to rebuild components
  • Design faster by using one source of truth for values
  • Reduce errors with automatic fallbacks (brand → agnostic primitives)
  • Collaborate smoothly with developers by aligning directly to code tokens
  • Simplify library publishing with fewer manual steps