Figma Variables as a Single Source of Truth

For years, the canonical home of design decisions was a spreadsheet, a wiki page, or a designer's memory. Figma Variables changed that. Collections, modes, and aliases give design decisions a real data model, one that tooling can read, diff, and sync straight into code.

Collections and modes do the heavy lifting

A collection groups related decisions; modes express their contexts: light and dark, comfortable and compact, brand A and brand B. The moment a colour exists once with two mode values, instead of twice in two separate styles, theming stops being duplication and becomes selection.

Aliases add the semantic layer: surface/raised points at gray/50 in light mode and gray/900 in dark. Designers work with intent, and the resolution to raw values happens in exactly one place.

From canvas to code

Because variables are structured data, the handoff can be a pipeline instead of a conversation. Export on publish, transform into platform tokens, and open a pull request automatically. Design review and code review become the same review.

The destination is a single source of truth that both sides trust: designers change a variable, engineers merge a diff, and every platform re-themes without anyone re-drawing or re-typing a value.

Modes turn duplication into selection

Before variables, a themed product was a pile of near-duplicates: a light style and a dark style, a comfortable spacing and a compact one, kept in sync by discipline alone. Modes collapse those copies into one decision viewed under different settings. The value exists once; the mode chooses which resolution applies.

This is what makes theming stop being a maintenance burden. You are no longer keeping two sets of styles agreeing; you are selecting a mode on a single set that cannot disagree with itself.

The handoff becomes a diff

The oldest friction in product work is the handoff: a designer decides, an engineer re-types the decision somewhere else, and the two slowly drift. When the decision lives as a variable, the handoff is a diff instead of a dictation. The designer changes the source, the pipeline opens a pull request, and the engineer reviews a change rather than transcribing one.

Design review and code review become the same review, over the same artifact. That is the moment design and code stop being two copies of the truth and become one.

Set up variables that actually sync

1. Model primitives as raw variables, and semantics as aliases that point at them.
2. Express light, dark, brand, and density as modes, never as separate styles.
3. Design against the aliases, so frames inherit every future theme change.
4. Export on publish and generate platform tokens from the variables.
5. Open a pull request automatically, so the sync is reviewed like code.