The point of Figma variables is not tidier files. It is that a design decision can exist once, as data, and be read straight into code instead of retyped.

One variable, every mode

A color used to live twice: once as a light style, once as a dark one, kept in sync by hand. As a variable with modes, it lives once and resolves per context. Switch the mode and the whole canvas re-themes, because nothing was duplicated to begin with.

Density, brand, and platform are just more modes on the same variables. The design stops being many near-copies and becomes one design viewed under different settings.

Source

Figma variables

Collections and modes hold every decision once.

Build

Token transform

Export on publish, generate the platform files.

Output

Platform tokens

WebiOSAndroid

Variables are structured data, so the handoff is a build, not a conversation.

Aliases are the semantic layer

Raw variables (gray-50, ember-500) are primitives. Aliases (surface, accent) are the semantic layer, and they are where designers should actually work. Paint with surface, not with a specific gray, and your frames inherit every future theme decision automatically.

This mirrors the code exactly. When designers alias and engineers reference the same semantic names, the two sides are finally speaking one language.

Name for intent, not appearanceCall it accent, not orange. The day the brand color changes, an intent-named variable just updates; an appearance-named one becomes a lie that every file quietly repeats.

From canvas to code, automatically

Because variables are data, publishing them can trigger a build: export, transform into platform tokens, and open a pull request. The designer changes a variable, the engineer reviews a diff, and every platform re-themes without anyone redrawing a screen.

That is the whole promise of a single source of truth. Not that design and code agree today, but that they cannot silently disagree tomorrow.

Collections keep the model legible

As variables multiply, structure is what keeps them usable. Group primitives, semantics, and component decisions into separate collections, so a designer reaching for a color sees intent-named aliases first and raw ramps only when they mean to. A flat list of three hundred variables is technically a source of truth and practically a swamp.

Good collection structure also mirrors the token layers in code, which keeps the two sides aligned as both grow. When the Figma model and the code model share a shape, the sync stays simple.

Design once, resolve everywhere. The variable is the decision; the mode is the context.On Figma variables