Figma Variables arrived as the feature the design systems community had been requesting for years. Native design tokens, mode switching, and multi-brand support ÔÇö all in one paradigm.
Variable Types
Variables come in four types: Color, Number, String, and Boolean. Colour variables replace colour styles. Number variables handle spacing and sizing. Boolean variables control visibility and state.
Modes: The Killer Feature
A collection can have multiple modes ÔÇö Light and Dark, Brand A and Brand B. Switching modes updates all variables simultaneously. One design file can represent an entire multi-theme product with zero duplication.
