Variables & Modes in Figma: A Designer-First Explainer

Quick answer

Variables store reusable values—color, number, string, boolean—and can be organized into collections with modes (for example Light and Dark, or Brand A and Brand B). You bind variables to fills, strokes, spacing, corner radius, and supported component properties so a mode switch updates the whole system consistently. If you only need a static palette with no multi-theme logic, classic styles still work; once you ship themes, brands, or density scales, Variables become the control tower.

Start from the Figma guides hub if you need setup context, and keep best Figma plugins for design systems nearby for how Variables interact with token plugins and audits.

---

Variables vs styles: a simple decision table

Need	Prefer	Why
One light theme, stable palette	Color styles	Fast to author, easy for beginners
Light + dark + high-contrast	Variables + modes	One binding, many values per mode
Spacing scale shared across files	Number variables	Bind to gap, padding, width min/max
Multibrand marketing	Variables + collections	Swap brand sets without duplicating components
Typography ramp with roles	Text styles + variables (hybrid)	Styles carry type; variables can still drive spacing

Verdict: treat Variables as system values and styles as curated recipes built from those values where it helps designers choose faster.

---

Core concepts in plain language

Collections

A collection is a bucket of related variables—Foundations/Color, Foundations/Space, Semantic/Surface, and so on. Collections can publish across files when you turn them into library assets. Good naming beats giant flat lists: designers should guess the correct variable from the name alone.

Modes

Modes are parallel value sets inside one collection. A color like surface/default might be #FFFFFF in Light and #121212 in Dark. Switching the file or preview mode swaps every bound usage that references that variable.

Aliases

An alias lets one variable point at another (semantic/text/primary → brand/blue/700). This is how you keep semantic names stable while updating the underlying brand ramp.

Types

Figma supports multiple variable types—color, number, string, and boolean are the everyday set. Numbers shine for spacing, radius, and opacity; strings can drive copy experiments or labels in advanced component setups.

---

Designer workflow: author once, reuse everywhere

1. Inventory what changes together: surfaces, borders, text, focus rings, spacing, radii.
2. Create a foundations collection for raw ramps (brand colors, neutrals, space scale).
3. Create a semantic collection that aliases into foundations (bg/default, text/secondary, border/focus).
4. Add modes at the semantic layer first if multiple themes are a requirement.
5. Bind variables to components before you duplicate instances across products.

If engineering expects token JSON, many teams add a token plugin workflow—how to install Figma plugins walks the install path, and the plugin roundup in best Figma plugins for design systems compares common choices.

---

Binding variables without breaking components

Practical rules:

• Bind at the component root when every instance should inherit the same semantic role.
• Use component properties for intentional per-instance overrides (brand accents, feature toggles) instead of detaching fills.
• When a legacy style is “almost right,” migrate by rebinding fills to variables rather than maintaining duplicate styles forever.

Common mistake: mixing hardcoded hex with variables in the same component. Audits get noisy and dark mode leaks bright pixels.

---

Modes in production: light, dark, and beyond

Light/dark is the obvious pair, but modes can also represent density (compact vs comfortable), marketing vs product, or paid tier accents—as long as the team agrees what may change together.

Checklist before you add a new mode:

1. Will every bound variable have a value in the new mode? If not, you will ship accidental defaults.
2. Do semantic variables map cleanly, or do you need another alias layer?
3. Have you verified contrast and legibility for text on surfaces? Plugin-assisted checks are common; the ecosystem list in best Figma plugins for web design includes accessibility-oriented tools worth comparing.

---

Variables and Auto Layout (they work together)

Number variables are especially powerful with Auto Layout: bind gap, padding, and corner radius so a density mode can tighten spacing without rebuilding frames. If Auto Layout is new, read Figma Auto Layout in practice: real patterns next—Variables plus disciplined stacks are the modern UI kit backbone.

---

Migration: from messy styles to a variable system

1. Freeze chaos: stop creating ad-hoc colors for one week.
2. Map the top 20 fills used in production screens.
3. Create semantic variables for those roles first; alias to a trimmed ramp.
4. Rebind buttons, inputs, surfaces before rare illustrations.
5. Add linting or periodic human review so new hex does not creep back in.

Plugins can accelerate cleanup, but the product decision—semantic naming and mode structure—still belongs to the design team.

---

Collaboration tips (so engineers trust the file)

• Name variables for role, not for hue (text/primary, not gray-900-almost).
• Document mode intent in a short README frame on the library cover page.
• When a value changes, reference release notes in your team channel the same way you would for code.

Developer handoff posts such as best Figma plugins for developers you must have explain the engineering side of the same boundary.

---

FAQ

Can I delete old color styles after migrating?

Often yes for duplicates, but keep styles that improve picker ergonomics for marketing teams. Many libraries expose semantic variables to systems files while still publishing text styles for typographic roles.

What breaks when I rename a variable?

Anything that referenced the old name loses the binding. Rename carefully and communicate in libraries before publishing breaking changes.

Are Variables a replacement for design tokens?

They are the native Figma expression of tokens. Teams that sync JSON to code may still use a token pipeline—Variables become the designer-facing source of truth.

How do I preview modes quickly?

Use the file’s mode switcher for variables (location varies slightly by UI version) and spot-check key templates: marketing, settings, dense tables.

---

Bottom line

Variables and modes turn “we shipped dark mode” from a frame-by-frame rescue mission into a system-level switch—as long as you invest in semantic naming, aliases, and disciplined binding. Start small with surfaces and text, add number tokens for layout rhythm, then grow collections as your library proves what actually changes together.