Designilo

Multi-Brand Design Systems in Figma: How to Use Tokens, Modes, and Smart Components

Introduction: One System, Many Faces

Designing for a single brand is complex enough. But what if your team supports multiple brands, themes, or white-labeled platforms? You don’t need to duplicate your files—you need a multi-brand design system.

With Figma Variables, modes, and smart components, you can build a scalable system that adapts to each brand, without redoing your work every time. This article will show you how.

1. What Is a Multi-Brand Design System?

A multi-brand design system is a shared library that powers multiple visual identities across products or clients. It supports:

  • Multiple color themes (e.g. blue for Brand A, green for Brand B)
  • Typography differences (e.g. Roboto vs Inter)
  • Custom logos, icons, or illustrations per brand
  • Platform-specific tweaks (iOS, web, dark mode)

🎯 The goal is to share structure and logic—while customizing appearance.

2. The Old Way vs. The Smart Way

❌ Old Way:

  • Separate files for each brand
  • Duplicate components and styles
  • Constant rework when system updates

✅ Smart Way:

  • One core library with shared components
  • Tokens and variables to manage brand-specific differences
  • Switchable modes for previewing each brand

This method keeps your design system centralized, flexible, and consistent.

3. Set Up Brand Tokens with Figma Variables

Start by creating a Variable Collection called Brand Tokens or Theme Variables.

Within that, define:

  • color.brand.primary
  • color.brand.secondary
  • color.surface.bg
  • color.text.default
  • font.primary
  • radius.default
  • space.sm, space.md

Then define modes for each brand:

  • Brand A (default)
  • Brand B
  • Dark Mode A
  • Dark Mode B

🌓 Modes allow you to assign different values for the same token per brand.

4. Apply Tokens in Your Components

Instead of hardcoding styles:

  • Use color.brand.primary as the fill
  • Use font.primary in text styles
  • Use space.md for spacing and padding
  • Use icon.brand.logo via instance swap

This way, a single component like Button can automatically adapt to any brand mode.

🧪 Preview each brand mode by toggling the mode dropdown in the Variables panel.

5. Use Smart Component Properties

Expose brand-dependent layers using:

  • Instance Swaps for brand logos or icons
  • Text Props for brand names or slogans
  • Booleans for toggling brand-specific elements
  • Variant Props for platform or size

💡 Tip: Use consistent naming (icon.logo.brand, text.brand.name) to keep your properties organized and intuitive.

6. Organize Your File by Abstraction Level

Structure your system in layers:

  • Core Tokens (colors, spacing, type)
  • Semantic Tokens (button.bg, text.heading)
  • Component Library (reusable parts)
  • Brand Modes (UI variations)

This lets you swap out brand styles without touching structure or behavior.

📁 Set up pages like:

  • 01 — Tokens
  • 02 — Components
  • 03 — Brands
  • 04 — Dev Handoff

7. Consider Brand-Specific Overrides

Sometimes you’ll need small brand-specific changes:

  • Brand A uses square buttons
  • Brand B uses rounded buttons
  • Brand C doesn’t use icons

🛠 Options:

  • Use a component property to toggle the variant
  • Use nested instances (with branding baked in)
  • In rare cases, use forked overrides on a per-brand page

🎯 Only override what’s absolutely necessary—reuse everything else.

8. Developer Handoff for Multiple Brands

In Dev Mode:

  • Tokens show names, not raw values
  • Switching modes shows live previews for each brand
  • Developers can inspect how components change across brands
  • Component props and instance swaps are fully visible

🔗 Bonus: Link each token mode to a GitHub repo or style dictionary for seamless front-end integration.

Conclusion: One System to Rule Them All

Multi-brand design doesn’t have to mean multiple libraries. With Figma Variables, modes, and component properties, you can build once—and theme infinitely.

It’s scalable, consistent, and developer-friendly. Whether you’re managing 2 brands or 20, this system will save your team time while keeping every UI pixel-perfect.

Next up: “How to Organize a Multi-Page Figma File for a Scalable Design System” — the workflow and page structure that makes collaboration effortless.

Ben Kemp
, , , , , , , , ,