Figma Variables — FAQs

Frequent Asked Questions

Do I always need a brand variable?

No. Use Agnostic unless the brand truly diverges. Alias brand → Agnostic by default.

Can I bind everything to variables?

Most properties—yes. Some (composite or automatic text behaviors) still work best via Styles with variable references.

How many modes should a collection have?

Only what you actually switch in daily work. Currently we have a single collection, but we prefer multiple collections over a single collection with an overwhelming number of modes.

Where do I start on a new component?

Bind to primitives first. Only introduce brand/product overrides after testing in real contexts.

Why is export order important?

Export primitives first to ensure brand and semantic variables have valid references to link back to. Wrong order can break alias chains.

What happens if a variable is missing?

Check if the fallback chain is intact: Agnostic → Brand → Product → Semantic. If one layer is missing, the next available value will not populate correctly.

How can I debug mode switching issues?

Verify that each mode (light, dark, etc.) has values set at both the primitive and brand levels. Test switching directly in Figma's variable panel.

What if a variable doesn’t export correctly?

Some token types (like full typography ( line-height=x%, ...), composed tokens (paddings, border-radius, ...), or gradients) don’t export directly. Use Styles with variable references instead.

How do I safely test new variables?

Work in a scratch or branch file, snapshot the main library, and limit export scope to avoid unintended overwrites.

When should I override a primitive value?

Only when there’s a real, documented brand or product divergence. Default to aliasing unless strictly necessary.