How do you set up Figma Variables for single vs multi-brand themes?

How do you organize Figma Variables? Do you make a separate file for design tokens, or do you add them in your component library file?

My preferred way to handle Figma variables is to create:

↪️ Create a Figma file called Foundations (or primitives, or core)

• Add all the colors

• Add all the numbers (spacings, paddings, border radius, etc)

Publish the library.

↪️ Open a new Figma file, called Semantic design tokens

• Here you can "call" the values from your foundations and define all the reusable design tokens

Publish the library and make it available for your team.

↪️ Create a new Figma file for your component (for example "Accordian")

• Add your Semantic Figma library

• Add your Foundations Figma library

• Connect layers with Figma variables

This structure lets you hide Foundations from your design system's users. (If you need to 🙃)

More resources:

Guide: Variable mapping and design system structure
by Luis Ouriach

A primer on how to structure your variable collections for:

1. Single brand

2. Multi brand with shared primitives

3. Multi brand with different primitives

4. Multi product with shared primitives and semantics

There's also an introductory primer to variables, explaining the different types and how they are structured within Figma.

🔗 Check the template

Figma Variables at Vodafone UK: how we structured taxonomy for a complex multi-brand design system
by Alex Dyulgerova and Robyn Layton

🔗 Read the article

Bringing more character to the Zalando Design System with theming
by Zalando

🔗 Read the article

Optimising your design system with Figma’s variables

🔗 Read the article

Creating a flexible design token taxonomy for Intuit’s Design System
by Nate Baldwin

🔗 Read the article