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 color exists once with two mode values, instead of twice in two 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.