Multi-mode setups

Modes are Figma’s secret weapon for creating theme-aware designs. Whether you’re designing for light and dark, different brands, or platform variants, modes let you define multiple values for the same variable — and switch between them on the fly.

It’s powerful stuff. But without a little structure, things can get messy fast. 

This chapter shows you how to keep your mode setup clean, scalable, and easy to maintain — both inside Figma and when syncing to Supernova.

🎛 What are modes in Figma?

Modes allow you to define multiple values for the same variable, depending on context. That could mean light vs. dark themes, or brand A vs. brand B.

Switching modes at the collection level updates every connected variable in your file — instantly. No overrides, no component duplication.

‍

💡 Example:

color/bg/default might be #FFFFFF in light mode and #1A1A1A in dark mode. Switch the mode, and every use of that variable updates automatically.

Image source: Figma

🎯 When (and why) to use modes

Modes are ideal for:

• 🌞🌚 Light and dark themes
• 🟣🟡 Brand variants (e.g. Brand A vs Brand B)
• 🦽 Accessibility options (e.g. high contrast)
• 📱 Platform differences (e.g. iOS vs Android)

They let you:

• Design once, apply everywhere
• Avoid duplicating components
• Easy to test different variants with a toggle
  
  

🧼 How to structure your modes (without chaos)

 ✅ DO: Keep modes consistent across a collection

Every variable in a collection should have the same modes. It keeps things predictable and avoids those “why isn’t this updating?” moments.

❌ DON’T: Mix unrelated modes in one collection

Cramming light/dark and brand-a/brand-b into the same collection? That’s a fast way to lose control — and it’ll limit what Supernova can do with your tokens.

🔁 Instead:

Use one collection per context

• Core Theme Colors
• Brand A Theme
• Accessibility Theme

This makes your file easier to reason about — and lets Supernova’s collection filters do their job properly.

💡 Tips for managing multi-mode systems

1. Name modes clearly

Use names that make sense without explanation:

• light, dark
• brand-a, brand-b
• desktop, tablet, mobile

Avoid: alt, brand2-copy, darkest-v3 🙃

2. Stick to 1–3 modes per collection

Yes, Figma lets you add more. But the more you add, the harder it is to manage and preview.

3. Preview often

Use prototype mode to test your themes across screens. Build a small preview page to validate how your modes behave before scaling them up.

4. Don’t add modes “just in case”

If a mode isn’t ready yet, keep it empty — or don’t create it at all. You can always add it later.

🔁 Multi-mode + Supernova = 💪

When you sync to Supernova, your Figma modes become full-blown themes inside your design token system.

That means:

• light, dark, and brand-specific modes are preserved
• You can automate code outputs per theme (CSS, SCSS, iOS, Android, etc.)
• Documentation can reflect variants with token swatches per theme
• You can showcase themes visually using Supernova’s Tokens block
• You can even export themed tokens to code using Supernova’s pipelines
  
  

💡 In short: 

build your themes once in Figma → scale them everywhere via Supernova.

TL;DR: Modes give your system flexibility — if you use them with care

• Define one context per collection (light/dark ≠ brand-a/brand-b)
• Keep mode names clean and consistent
• Don’t overload collections with modes “just in case”
• Supernova turns modes into full-on themes — for docs, tokens, and code
• Keep it structured, and you’ll unlock serious automation with minimal effort

‍