Supernova Figma Variables Playbook
Most teams use variables to stay consistent. The best teams use them to scale. This guide shows you how to turn Figma variables into a real design token system — ready for docs, code, and teams.
1. Introduction
What is this guide?
1
.
1
2. Understanding Multi-Brand Setup Options
Overview of Multi-Brand Design System Approaches
2
.
1
2. Understanding Multi-Brand Setup Options
Setup 1: Single Design System
2
.
2
2. Understanding Multi-Brand Setup Options
Setup 2: Separate Design Systems
2
.
3
Understanding Multi-Brand Setup Options
Key Differences and Considerations Between Setups
2
.
4
3. Setup 1: Single Design System
Real-World Examples of Structuring Brand Layers
3
.
1
3. Setup 1: Single Design System
Setting Up Brand Features in Supernova
3
.
2
3. Setup 1: Single Design System
Collaboration Within a Single Design System
3
.
3
4. Setup 2: Separate Design Systems
Real-World Examples of Structuring Separate Design Systems
4
.
1
4. Setup 2: Separate Design Systems
Setting Up Navigation Between Separate Systems
4
.
2
4. Setup 2: Separate Design Systems
Organizing Teams Across Separate Systems
4
.
3
5. Scaling with Code Automation
Automating Design Token and Asset Delivery
5
.
1
5. Scaling with Code Automation
Using Pipelines for Multi-Brand Code Exports
5
.
2
6. Conclusion
Setup checklist
6
.
1
6. Conclusion
Multi-brand & multi-product FAQ’s
6
.
2
6. Conclusion
Useful Resources
6
.
3
Introduction
Let's get started
0
.
1
Mission 1: Metadata Commander
Mission Brief
1
.
1
Mission 1: Metadata Commander
Design System Data Manager
1
.
2
Mission 1: Metadata Commander
How to Manage Component Metadata
1
.
3
Mission 1: Metadata Commander
Mission Objectives
1
.
4
Mission 2: Documentation Orchestrator
Mission Brief
2
.
1
Mission 2: Documentation Orchestrator
Developer Documentation in Supernova
2
.
2
Mission 2: Documentation Orchestrator
Mission Objectives
2
.
3
Mission 3: Automation Captain
Mission Brief
3
.
1
Mission 3: Automation Captain
Plug and Play Code Automation Editor
3
.
2
Mission 3: Automation Captain
Expanding Supernova Exporters for Advanced Use Cases
3
.
3
Mission 3: Automation Captain
Supernova’s Developer Toolkit
3
.
4
Mission 3: Automation Captain
Code Automation FAQ’s
3
.
5
Mission 3: Automation Captain
Mission Objectives
3
.
6
Conclusion
Useful resources
4
.
1
Conclusion
Congratulations!
4
.
2
4. We wouldn’t let you leave empty-handed
Launch checklist
4
.
1
3. Launch and land it
The end (kinda)
3
.
3
3. Launch and land it
From tracking to traction
3
.
2
3. Launch and land it
Build buzz like it’s a launch
3
.
1
2. Plan your release
Set goals worth tracking
2
.
2
2. Plan your release
Start with the "why"
2
.
1
1. Let’s set the scene
Why your updates deserve more hype
1
.
1
Leverage Storybook
Signs you’re underusing Storybook
2
.
1
Leverage Storybook
Treat Storybook like a platform
2
.
2
Next level
Going beyond Storybook
3
.
1
0. Intro
What is this playbook
0
.
1
1. Mastering Figma variables
Understanding the basics
1
.
1
1. Mastering Figma variables
Structuring your variables for scale
1
.
2
1. Mastering Figma variables
Multi-mode setups
1
.
3
1. Mastering Figma variables
Organizing your files for collaboration and scale
1
.
4
1. Mastering Figma variables
Keeping your system healthy as it grows
1
.
5
2. Connecting to Supernova
Supernova’s approach to design tokens
2
.
1
2. Connecting to Supernova
Syncing Figma Variables with Supernova
2
.
2
2. Connecting to Supernova
Structuring your files for multi-product, brand, and team setups
2
.
3
3. Scaling with Supernova
Connecting tokens to code and distributing them
3
.
1
3. Scaling with Supernova
Documenting your design token system
3
.
2
4. Resources
Figma Variables Setup Checklist
4
.
1
4. Outro
Troubleshooting and FAQ’s
4
.
2
4. Resources
Useful Links + More
4
.
3