Setting Up Brand Features in Supernova

Now that you’ve seen how other teams are using this setup, let’s walk through how to actually implement it and what features inside Supernova can streamline your work. 

One of Supernova’s features enabling this unified approach is the Brands feature. It helps you structure and scale your system within a single design system by separating tokens, components, and documentation by brand, product, or platform.

What is the Brand Feature?

The Brand feature in Supernova acts like a folder structure inside your design system data. It allows you to differentiate design decisions and manage complexity—without having to create separate design systems.

Each Brand can have its own Figma Data Source, its own documentation logic, and its own export pipelines—all neatly organized under one roof.

How Brands Work in Supernova

When the Brand feature is enabled in a design system:

→ You can assign tokens, assets, and components to specific brands.

→ Each brand can have its own Figma Data Source, keeping design files separated.

→ Documentation can be structured to show brand-specific content, while still living within a single documentation site.

→ Code automation pipelines can be customized per brand, ensuring that tokens and assets are delivered correctly to each respective platform.

💡 Pro tip: 

This feature also improves flexibility around code automation. By assigning tokens and assets to a specific brand, you can configure brand-specific pipelines with ease.

Setting Up Brands in Supernova

1️⃣ Enabling the Brand Feature

To enable the Brand feature in Supernova:

1. Navigate to Design System Settings.
2. Select Brands and toggle on Enable Brands.
3. Add new brands, naming them based on product areas, platforms, or business units.

2️⃣ Assigning Tokens, Assets & Components to Brands

• When importing design tokens from Figma Variables or Tokens Studio, you can assign them to specific brands.
• Assets and components from Figma Libraries can also be mapped to a brand, ensuring the right teams see the right content.
• Make sure to connect them to the corresponding Brand’s Data Source

3️⃣ Structuring Documentation for Multiple Brands

• You can use Brand-specific filters when building your documentation to show or hide certain data based on the selected brand in your data blocks.
• Tabs content blocks can help display platform-specific variations of the same component.

Mapping Variable Modes Into Brands

When working with multiple brands or themes, Supernova’s Figma Variables Sync plugin makes it easy to bring structured design data into your system. This plugin allows you to sync collections and modes from Figma directly into Supernova, where they become fully manageable design tokens. It’s an essential part of making your multi-brand setup functional and future-proof.

If you’ve enabled multiple Brands in your Supernova design system, you’ll be able to select which Brand each collection of variables and/ or modes belongs to when pushing them from the plugin. This ensures clean separation between tokens used by different brands or platforms, all within a single design system structure.

Here’s how Figma data maps into Supernova:

• Collections → become Collection properties in Supernova.
• Groups → are imported as Token Groups.
• Variables → are imported as Design Tokens.
• Modes → are imported as Themes (if applicable).
• If there’s only one mode, it’s imported as the base token value by default.

How to push variables to the right Brand in Supernova:

1. Open the Figma Variables Sync plugin from Figma’s Plugins menu.
2. Log in to Supernova using your credentials or SSO.
3. In the plugin header, select the workspace, design system, and brand you want to push to.
4. Select the collections to sync—Supernova will show what’s already synced and what’s new.
5. Hit “Push to Supernova”, and your tokens will be imported, ready for use in documentation or code exports.

💡 Pro tip: 

You can choose which Figma mode maps to which Supernova theme, preserving names and context when managing multiple visual styles like Light and Dark modes.

✨ Example scenario:

You have one Figma library with these Collections:

Collection 1 (Brand 1): Light Mode & Dark Mode

Collection 2 (Brand 2): Light Mode & Dark Mode

You can sync each collection to its corresponding Brand in Supernova, and Supernova will handle the rest—preserving your naming, structure, and themes across the board. Later, in your documentation, you can use Token Swatches inside a Token Block to visually represent these themes per brand.

Exporting Code Using Brands Functionality

Once your token architecture is mapped and organized by brand, it’s time to bring automation into the picture. Supernova allows you to build dedicated export pipelines for each brand, so you can deliver tokens and assets directly into your codebases—fully automated and completely customized per platform, brand, or product area.

Whether your team is using Figma variables to build design system components or product-specific features, these pipelines help eliminate manual handoff and reduce delivery time. You can configure naming conventions, color formats (HEX, RGBA, etc.), and output formats per brand.

Each Brand in your system can have its own:

• Export pipeline logic
• CI/CD integration
• Targeted folder structure
• Token formatting rules

This setup makes it easy to scale code delivery alongside your design system, especially as different teams work at different speeds, use different frameworks, or follow different release cadences.

💡 We’ll dive deeper into how to configure pipelines and exporters in Chapter 5—but it’s good to know that the Brands feature you’re setting up now is what unlocks this level of automation later on.

🔑 Key Takeaways

• Brands separate design data by product, platform, or team—without needing multiple design systems.
• Each brand can have its own Figma data sources and dedicated export pipelines for better structure and automation.
• Figma Variables Sync plugin makes it easy to map collections and modes to specific Brands in Supernova.
• Brands power scalable code delivery, letting you automate token exports per brand or platform.

➡ What’s Next?

Now that you’ve learned how to leverage the Brand feature and structure your design data in Supernova, it’s time to explore how your team can collaborate effectively within this setup.