Single Outlet Principle
The Single Outlet Principle is a core variable organization philosophy recommended by Variables Xporter, designed specifically to solve complex multi-mode variable management problems in large design systems.
What is the Single Outlet Principle?
The Single Outlet Principle refers to using one collection as the sole outlet for all variables in a variable system. This collection contains only one mode and achieves multi-mode variable management by referencing variables from other collections.
Problems with Traditional Approaches
In traditional Figma Variables management, designers typically place all mode variables in the same collection:
Traditional Collection (all variables tightly coupled in one collection)
├── Light Mode ├── Dark Mode
├── colors/primary: #3B82F6 ├── colors/primary: #60A5FA
├── colors/secondary: #10B981 ├── colors/secondary: #F59E0B
├── spacing/sm: 8px ├── spacing/sm: 8px (duplicate setting)
└── font/size/base: 16px └── font/size/base: 16px (duplicate setting)This approach has the following problems:
- Redundant settings: Many variables have the same values across different modes but need to be set repeatedly
- Management complexity: As modes increase, collections become large and difficult to manage
- Usage confusion: Designers need to switch between multiple modes to find appropriate variables
- Expansion difficulties: Adding new mode dimensions requires extensive repetitive work
The Single Outlet Principle Solution
The Single Outlet Principle solves these problems through separation of concerns:
Design Tokens (Main Collection - Single Outlet)
├── colors/primary/DEFAULT → references Theme Mode collection
├── colors/secondary/DEFAULT → references Theme Mode collection
├── spacing/sm: 8px (direct value, no multi-mode needed)
└── font/size/base: 16px (direct value, no multi-mode needed)
Theme Modes (Auxiliary Collection - stores only changing variables)
├── Light Mode ├── Dark Mode
├── colors/primary/DEFAULT: #3B82F6 ├── colors/primary/DEFAULT: #60A5FA
└── colors/secondary/DEFAULT: #10B981 └── colors/secondary/DEFAULT: #F59E0BCore Advantages
- Unified interface: Designers only need to select variables from the main collection, no switching required
- Efficient export: Only export the main collection, plugin automatically tracks reference chains
- Easy to scale: Adding new mode dimensions doesn’t affect existing structure
- Avoid redundancy: Only place changing variables in mode collections
- Flexible combination: Supports complex multi-dimensional mode combinations
Practical Application Examples
Let’s demonstrate how to apply the Single Outlet Principle through specific examples.
Basic Light/Dark Theme Implementation
Step 1: Create Design Tokens Collection (Main Collection)
First, we create a main collection to store all design variables:
┌────────────────────────┬────────────────────────┐
│ │ │
│ Design Tokens │ default │
│ │ │
├────────────────────────┼────────────────────────┤
│ │ │
│ colors/primary/DEFAULT │ #EE6D21 │
│ colors/zhiyun/600 │ #EE6D21 │
│ colors/zhiyun/500 │ #E55517 │
│ colors/fiveray/600 │ #DA5959 │
│ colors/fiveray/500 │ #C03939 │
│ ... │ ... │
│ │ │
└────────────────────────┴────────────────────────┘This main collection contains only one default mode and serves as the unified outlet for all variables.
Step 2: Create Theme Mode Collection
Next, we create a collection specifically for managing theme modes:
┌────────────────────────┬──────────────────────┬─────────────────────┐
│ │ │ │
│ Theme Modes │ light │ dark │
│ │ │ │
├────────────────────────┼──────────────────────┼─────────────────────┤
│ │ │ │
│ colors/primary/DEFAULT │ colors/primary/light │ colors/primary/dark │
│ │ │ │
└────────────────────────┴──────────────────────┴─────────────────────┘This collection is specifically used to store variables that need to switch between light and dark themes.
Step 3: Establish Reference Relationships
By having variables in the main collection reference corresponding variables in this collection, we can achieve elegant theme switching:
┌────────────────────────┬────────────────────────┐
│ │ │
│ Design Tokens │ default │
│ │ │
├────────────────────────┼────────────────────────┤
│ │ │
│ 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─┐ │
│ │ │ │ │ │ │
│ │ ... │ ... │ │ ... │ │
│ │ │ │ │ │ │
│ └────────────────────────┴────────────────────┼─┴───────────────────┼─┘
│ │ │
│ │ │
└──────────────────────────────────────────────────────────────┴─────────────────────┘Using Variables
Designer Usage
In Figma, designers only need to select variables from the Design Tokens collection without needing to understand underlying variable reference relationships.
Export Process
When using the Variables Xporter plugin, you only need to export variables from the Design Tokens collection. The plugin will automatically track each variable’s reference chain to ensure getting the final concrete values, without needing to export other mode collections.
Create Multi-Dimensional Variable System
Using the Single Outlet Principle, you can create more complex multi-dimensional variable systems, such as systems that combine light/dark themes, brand themes, responsive design, and density modes.
Applicable Scenarios
The Single Outlet Principle is particularly suitable for:
- Multi-mode design systems: Including light/dark themes, brand themes, and other mode dimensions
- Large design systems: With numerous variables requiring clear organizational structure
- Complex products: Supporting multiple devices, states, and brands
Important Considerations
- Reference level control: Avoid overly deep reference nesting
- Naming conventions: Maintain consistent variable naming standards
- Documentation: Add descriptions for important reference relationships
- Regular maintenance: Check the integrity and reasonableness of reference chains
By adopting the Single Outlet Principle, you can build a variable system that is both powerful and simple, making complex multi-mode design systems clear and easy to manage.