Multi-mode variable organization
Multi-mode is a powerful feature of Figma’s variable system that allows the same variable to have different values in different contexts. Properly organizing multi-mode variables is key to building scalable design systems. We recommend using the single outlet principle to manage complex multi-mode variable systems.
Multi-mode use cases
Multi-mode variable systems are suitable for the following scenarios:
- Theme modes: Light and dark theme switching
- Brand modes: Multi-brand product support
- Device modes: Responsive design adaptation
- Density modes: Interface compactness adjustment
Organization strategies
Separate collections by dimension
Manage each mode dimension using independent collections, combined with the single outlet principle to establish a clear reference hierarchy.
Streamline variables
Mode collections should only include variables that actually need to change within that dimension.
Semantic naming
Use descriptive variable names and mode names, such as colors/primary and light/dark.
Creating complex multi-mode variable systems
Using the single outlet principle enables the creation of complex multi-dimensional variable systems, such as variable systems with compound modes including light/dark themes, brand themes, responsive design, and density modes. Let’s create one step by step and experience the benefits of the single outlet principle.
Starting with brand theme combinations
We already have a variable system that supports light and dark themes. Now we want to add a brand theme variable system on top of the light/dark themes.
┌────────────────────────┬────────────────────────┐
│ │ │
│ Design Tokens │ defalut │
│ │ │
├────────────────────────┼────────────────────────┤
│ │ │
│ colors/primary/DEFAULT │ colors/primary/DEFAULT │───────┐
│ │ │ │
┌──────────────►│ colors/zhiyun/600 │ #E55517 │ │
│ │ │ │ │
├──────────────►│ colors/zhiyun/500 │ #C03939 │ │
│ │ │ │ │
│ │ ... │ ... │ │
│ │ │ │ │
│ └────────────────────────┴────────────────────────┘ │
│ │
│ │
│ ┌────────────────────────────────────────────────────────────────────┘
│ │
│ │
│ │ ┌────────────────────────┬──────────────────────┬─────────────────────┐
│ │ │ │ │ │
│ │ │ Theme Modes │ light │ dark │
│ │ │ │ │ │
│ │ ├────────────────────────┼──────────────────────┼─────────────────────┤
│ │ │ │ │ │
│ └──────────►│ colors/primary/DEFAULT │ colors/zhiyun/600──┐ │ colors/zhiyun/500─┐ │
│ │ │ │ │ │ │
│ │ ... │ ... │ │ ... │ │
│ │ │ │ │ │ │
│ └────────────────────────┴────────────────────┼─┴───────────────────┼─┘
│ │ │
│ │ │
└──────────────────────────────────────────────────────────────┴─────────────────────┘Adding brand theme modes
Create a Brands Modes collection to manage brand theme variables, and create two different brand modes (in this example, zhiyun and fiveray). Then create two variables colors/primary/light and colors/primary/dark, and set different values for them in each mode (in this example, referencing the relevant colors from the main Design Tokens collection).
┌────────────────────────┬──────────────────────┬─────────────────────┐
│ │ │ │
│ Brands Modes │ zhiyun │ fiveray │
│ │ │ │
├────────────────────────┼──────────────────────┼─────────────────────┤
│ │ │ │
│ colors/primary/light │ colors/zhiyun/600 │ colors/fiveray/600 │
│ │ │ │
│ colors/primary/dark │ colors/zhiyun/600 │ colors/fiveray/500 │
│ │ │ │
│ ... │ ... │ ... │
│ │ │ │
└────────────────────────┴──────────────────────┴─────────────────────┘Next, establish the variable reference relationships: variables in the Theme Modes collection reference the corresponding variables in the Brands Modes collection based on the current theme, while variables in the Brands Modes collection reference specific color values in the Design Tokens collection. This way, when switching brands or themes, all colors in the system will update accordingly.
┌────────────────────────┬────────────────────────┐
│ │ │
│ Design Tokens │ defalut │
│ │ │
├────────────────────────┼────────────────────────┤
│ │ │
│ colors/primary/DEFAULT │ colors/primary/DEFAULT │───────┐
│ │ │ │
┌──────────────►│ colors/zhiyun/600 │ #E55517 │ │
│ │ │ │ │
├──────────────►│ colors/zhiyun/500 │ #C03939 │ │
│ │ │ │ │
├──────────────►│ colors/fiveray/600 │ #EE6D21 │ │
│ │ │ │ │
├──────────────►│ colors/fiveray/500 │ #DA5959 │ │
│ │ │ │ │
│ │ ... │ ... │ │
│ │ │ │ │
│ └────────────────────────┴────────────────────────┘ │
│ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┘
│ │
│ │
│ │ ┌────────────────────────┬──────────────────────┬─────────────────────┐
│ │ │ │ │ │
│ │ │ Theme Modes │ light │ dark │
│ │ │ │ │ │
│ │ ├────────────────────────┼──────────────────────┼─────────────────────┤
│ │ │ │ │ │
│ └──────────►│ colors/primary/DEFAULT │ colors/primary/light │ colors/primary/dark │
│ │ │ │ │
│ │ ... │ ... │ │ ... │ │
│ │ │ │ │ │ │
│ └────────────────────────┴──────────┼───────────┴───────────┼─────────┘
│ │ │
│ │ │
│ ┌───────────────────────────────────────────────┴───────────────────────┘
│ │
│ │
│ │ ┌────────────────────────┬──────────────────────┬─────────────────────┐
│ │ │ │ │ │
│ │ │ Brands Modes │ zhiyun │ fiveray │
│ │ │ │ │ │
│ │ ├────────────────────────┼──────────────────────┼─────────────────────┤
│ │ │ │ │ │
│ ├──────────►│ colors/primary/light │ colors/zhiyun/600──┐ │ colors/fiveray/600─┐│
│ │ │ │ │ │ ││
│ └──────────►│ colors/primary/dark │ colors/zhiyun/600──┤ │ colors/fiveray/500──┤│
│ │ │ │ │ ││
│ │ ... │ ... │ │ ... ││
│ │ │ │ │ ││
│ └────────────────────────┴────────────────────┼─┴────────────────────┼┘
│ │ │
│ │ │
└─────────────────────────────────────────────────────────────┴──────────────────────┘
That’s it! You’ve created a multi-dimensional variable system that includes both light/dark themes and brand themes, and through the single outlet principle, you’ve made your design system more flexible and maintainable. Looking at the overall variable reference chain, it may seem somewhat complex, but this approach is much clearer and more maintainable than managing all variables in a single collection. But we’re not done yet—let’s further expand this variable system.
Responsive design patterns
Typically, font size variables are adjusted based on different screen sizes. Taking the font/hero/size variable as an example, first create a font/hero/size variable in the Design Tokens collection, along with two variables font/size/2xl and font/size/3xl.
┌────────────────────────┬────────────────────────┐
│ │ │
│ Design Tokens │ defalut │
│ │ │
├────────────────────────┼────────────────────────┤
│ │ │
│ colors/primary/DEFAULT │ colors/primary/DEFAULT │
│ │ │
│ colors/zhiyun/600 │ #E55517 │
│ │ │
│ colors/zhiyun/500 │ #C03939 │
│ │ │
│ colors/fiveray/600 │ #EE6D21 │
│ │ │
│ colors/fiveray/500 │ #DA5959 │
│ │ │
───►│ font/hero/size │ font/size/2xl │
│ │ │
───►│ font/size/2xl │ 24 │
│ │ │
───►│ font/size/3xl │ 30 │
│ │ │
│ ... │ ... │
│ │ │
└────────────────────────┴────────────────────────┘Create a Device Modes collection to manage responsive design variables, create a font/hero/size variable, and then set different values for different device sizes.
┌────────────────────────┬──────────────────────┬─────────────────────┐
│ │ │ │
│ Device Modes │ default │ min-width:1024 │
│ │ │ │
├────────────────────────┼──────────────────────┼─────────────────────┤
│ │ │ │
│ font/hero/size │ font/size/2xl │ font/size/3xl │
│ │ │ │
│ ... │ ... │ ... │
│ │ │ │
└────────────────────────┴──────────────────────┴─────────────────────┘Now, simply change the value of the font/hero/size variable in the Design Tokens collection to reference the font/hero/size variable in the Device Modes collection!
┌────────────────────────┬────────────────────────┐
│ │ │
│ Design Tokens │ defalut │
│ │ │
├────────────────────────┼────────────────────────┤
│ │ │
│ colors/primary/DEFAULT │ colors/primary/DEFAULT │
│ │ │
│ colors/zhiyun/600 │ #E55517 │
│ │ │
│ colors/zhiyun/500 │ #C03939 │
│ │ │
│ colors/fiveray/600 │ #EE6D21 │
│ │ │
│ colors/fiveray/500 │ #DA5959 │
│ │ │
│ font/hero/size │ font/size/2xl ├─────┐
│ │ │ │
┌─────►│ font/size/2xl │ 24 │ │
│ │ │ │ │
├─────►│ font/size/3xl │ 30 │ │
│ │ │ │ │
│ │ ... │ ... │ │
│ │ │ │ │
│ └────────────────────────┴────────────────────────┘ │
│ │
│ │
│ ┌───────────────────────────────────────────────────────────┘
│ │
│ │
│ │ ┌────────────────────────┬──────────────────────┬─────────────────────┐
│ │ │ │ │ │
│ │ │ Device Modes │ default │ min-width:1024 │
│ │ │ │ │ │
│ │ ├────────────────────────┼──────────────────────┼─────────────────────┤
│ │ │ │ │ │
│ └──►│ font/hero/size │ font/size/2xl──┐ │ font/size/3xl──┐ │
│ │ │ │ │ │ │
│ │ ... │ ... │ │ ... │ │
│ │ │ │ │ │ │
│ └────────────────────────┴────────────────┼─────┴────────────────┼────┘
│ │ │
│ │ │
└────────────────────────────────────────────────┴──────────────────────┘We’ve omitted the Theme Modes collection since its content remains the same as before. This demonstrates the advantage of the single source of truth principle - we only need to focus on variables that need to change in specific modes.
Compact mode
Some B2B backend projects may have a compact mode where various dimensions become smaller, such as fonts, spacing, container widths, etc. Let’s further expand our variable system by adding compact mode.
First, create a series of spacing variables in the Design Tokens collection to manage spacing and dimensions. For demonstration purposes, we’ve only created the spacing/1 variable, but in actual projects, you’ll need to create more variables like spacing/2, spacing/3, spacing/4, etc. Check out the recommendations for organizing spacing variables.
┌────────────────────────┬────────────────────────┐
│ │ │
│ Design Tokens │ default │
│ │ │
├────────────────────────┼────────────────────────┤
│ │ │
│ colors/primary/DEFAULT │ colors/primary/DEFAULT │
│ │ │
│ colors/zhiyun/600 │ #E55517 │
│ │ │
│ colors/zhiyun/500 │ #C03939 │
│ │ │
│ colors/fiveray/600 │ #EE6D21 │
│ │ │
│ colors/fiveray/500 │ #DA5959 │
│ │ │
│ font/hero/size │ font/size/2xl │
│ │ │
│ font/size/2xl │ 24 │
│ │ │
│ font/size/3xl │ 30 │
│ │ │
│ spacing/1 │ spacing/1 │
│ │ │
│ ... │ ... │
│ │ │
└────────────────────────┴────────────────────────┘Create a Density Modes collection to manage layout density, and create spacing/1, font/size/2xl, and font/size/3xl variables, then set different values for different density levels.
┌────────────────────────┬──────────────────────┬─────────────────────┐
│ │ │ │
│ Density Modes │ default │ compact │
│ │ │ │
├────────────────────────┼──────────────────────┼─────────────────────┤
│ │ │ │
│ spacing/1 │ 4 │ 3 │
│ │ │ │
│ font/size/2xl │ 24 │ 22 │
│ │ │ │
│ font/size/3xl │ 30 │ 26 │
│ │ │ │
│ ... │ ... │ ... │
│ │ │ │
└────────────────────────┴──────────────────────┴─────────────────────┘Change the values of spacing/1, font/size/2xl, and font/size/3xl variables in the Design Tokens collection to reference the corresponding variables in the Density Modes collection.
┌────────────────────────┬────────────────────────┐
│ │ │
│ Design Tokens │ default │
│ │ │
├────────────────────────┼────────────────────────┤
│ │ │
│ colors/primary/DEFAULT │ colors/primary/DEFAULT │
│ │ │
│ colors/zhiyun/600 │ #E55517 │
│ │ │
│ colors/zhiyun/500 │ #C03939 │
│ │ │
│ colors/fiveray/600 │ #EE6D21 │
│ │ │
│ colors/fiveray/500 │ #DA5959 │
│ │ │
│ font/hero/size │ font/size/2xl │
│ │ │
│ font/size/2xl │ 24 ├──────┐
│ │ │ │
│ font/size/3xl │ 30 ├──────┤
│ │ │ │
│ spacing/1 │ spacing/1 ├──────┤
│ │ │ │
│ ... │ ... │ │
│ │ │ │
└────────────────────────┴────────────────────────┘ │
│
│
┌────────────────────────────────────────────────────────────┘
│
│
│ ┌────────────────────────┬──────────────────────┬─────────────────────┐
│ │ │ │ │
│ │ Density Modes │ default │ compact │
│ │ │ │ │
│ ├────────────────────────┼──────────────────────┼─────────────────────┤
│ │ │ │ │
├──►│ spacing/1 │ 4 │ 3 │
│ │ │ │ │
├──►│ font/size/2xl │ 24 │ 22 │
│ │ │ │ │
└──►│ font/size/3xl │ 30 │ 26 │
│ │ │ │
│ ... │ ... │ ... │
│ │ │ │
└────────────────────────┴──────────────────────┴─────────────────────┘Congratulations! You’ve created a powerful compound variable system that’s easy to extend. This is a great start, and all your efforts are worthwhile. As a designer maintaining the design system, your variables may be used countless times by other designers and serve as a bridge between design and development, while they don’t need to worry about these reference relationships.
By organizing multi-mode variables appropriately, you can build a design system that is both flexible and easy to maintain, effectively supporting complex design requirements.