Figma Variables and Modes for Themes and Brands
Advanced3 minInnovialabs editorial team
In short
Figma variables store color, number, string and boolean values, and modes give each variable several values. Split primitives, brands and themes into separate collections, bind components only to semantic variables, and switching a theme or brand becomes a single mode change.
The short answer
A variable in Figma is a named value you can bind to a layer property. Variables live in collections, and a collection can have modes: the same bg/surface variable holds white in the Light mode and near-black in the Dark mode. Change the mode on a frame and everything inside it updates.
Variable types:
| Type | Stores | Binds to |
|---|---|---|
| Color | a color | fill, stroke, text color, effects |
| Number | a number | width, height, padding, gap, radius, stroke width, font size |
| String | text | text layer content, font family and weight |
| Boolean | true/false | layer visibility, boolean variant properties |
Collection structure
The most common mistake is putting everything into one collection. A durable setup for theming and multi-brand work has three levels:
- Primitives: the palette, with no modes:
violet/600,gray/50,space/4. Hide these from publishing so designers do not use them directly. - Brand: one mode per brand (Brand A, Brand B). Variables like
brand/primaryalias different primitives. - Theme: Light and Dark modes. Semantic variables such as
bg/surface,text/primary,action/primaryalias Brand or Primitive variables.
Components bind only to the semantic level. Brand and theme then switch independently, so a frame can use Brand B + Dark.
Setup, step by step
- Open the Variables panel and create a Primitives collection. Use slashes for groups:
violet/100,violet/600. - Create a Brand collection and add one mode per brand. For each value pick an alias to a primitive rather than a hex code.
- Create a Theme collection with Light and Dark modes and fill the semantic variables with aliases.
- Put numbers in their own collection, for example Density with Default and Compact modes, so spacing and radii can change together.
- String variables help with localization: RU, EN and UZ modes show whether the layout survives long words.
- Configure scoping to limit where a variable appears. A text color should not be offered for background fills, and spacing should not show up for radii.
- Add code syntax for web, iOS and Android so developers see the code token name in Dev Mode.
Binding to components
- Select a layer and click the variable icon next to a property: fill, padding, gap, radius.
- For text, bind size, line height and weight, not only color.
- Boolean variables pair well with component properties, such as showing an icon.
- Set the mode on a frame, section or page from the modes control in the right panel. Nested instances inherit the parent mode by default, and you can override it locally.
A quick test: build one screen, duplicate it and switch modes. Any color that stays "wrong" is a hard-coded hex instead of a variable.
Common mistakes
- Components bound to primitives. A dark theme then means repainting by hand.
- Names based on color instead of role.
blue-buttonbreaks when the brand turns violet. - No tokens for states. Hover, pressed and disabled need their own semantic variables.
- Forgotten effects and strokes. Shadows and dividers need their own dark-theme values too.
- Drift from code. Variable names in Figma and token names in code should match.