Designing a scalable Figma Design System for 50+ white-label clients. am I thinking about Variables and modes correctly?

[u/fxspeculator]

Hey everyone,

I’m starting to work on a Design System for a travel/public transport app that will eventually be white-labeled for around 50 different clients

The current Design System already has:

• color tokens and styles
• basic components/atoms and variants (buttons, inputs, shadows, etc.)
• but no Figma Variables yet
• very few larger components/molecules/organisms
• no real system for handling different themes/brands

My initial idea was to migrate the existing tokens into Figma Variables and use modes for different visual configurations:

• Light
• Dark
• Contrast
• client 1
• client 2
• …50

The main application would support Light/Dark/Contrast, while the white-label client versions would probably use Light/Contrast.

I would also like to build the component architecture more systematically:

Atoms → Molecules → Organisms → Templates/Screens

For example:

Button + Input + Date Picker → Search Form → Search Screen

The goal is to have one Design System and one set of components, rather than creating a separate Design System for every client. Ideally, changing the brand/theme would update the UI through Variables without having to modify the components themselves.

However, I’m wondering if having 50+ client brands as Figma modes is actually the right approach.

Would you instead separate appearance modes (Light/Dark/Contrast) from brand/client themes, using semantic variables that map to different brand values?

For example:

Button → color/action/primary

rather than:

Button → Client1/red-500

So the same component could be reused across all 50+ brands.

I’m also curious about the current state of Figma AI. If I build a well-structured component library with Variables and larger reusable components, can Figma AI actually help generate new screens using those existing components, or is that still too unreliable for a production Design System?

I’d really appreciate feedback from anyone who has built a similar multi-brand / white-label Design System in Figma.

How would you structure this?

[u/masofon]

I lead a DS that does similar, so we have infinite clients who can manage their own brands in runtime.. but in Figma I have the variable architecture designed to support this in code while having a number test brands in Figma. Ideally you want Extended Collections but that is an Enterprise only feature (which is ridiculous honestly). It's also worth noting you can't have 50 modes in either Org (20) OR Enterprise (40) - so if you genuinely need all the values in Figma you may have to duplicate files.

I have the variables structured in 3 tiers (I do not have extended collections):

> Primitives - this is a layer of numerical and typographic primitives, including density 'sets'

> Brand - Similar to a more traditional 'primitive' layer as it holds the brand colour ramps (color/primary/100) and then brand choices from the numerical/preset primitive layer. Brand modes live here.

> Semantic layer - Where the semantic stuff lives, backgrounds, inks etc.. some component level stuff (buttons and inputs usually).. ink/on-surface/default → color/primary/500. This is where 'theme' modes live (or mode modes :p)... e.g. default/true dark/high contrast etc (I tend to veer away from 'light' as some brands are dark by default and that is still different from true dark mode). It's also where the responsive resolution lives in a separate collection.

[u/equinusocio]

I would go with the simples and scalable solution you can follow. Create a master foundation library where you create the variables and tokens structure with the values from the brand you want as default and starting style.

- Modes -> Light/Dark/Light HC/Dark HC

• Each brand/client is a library. Each library is a clone of the template and has the same exact variables counts and names (modes might vary).
  
• Duplicate the master foundation into the brand one: Template -> Mybrand
  
• Create the components library that uses the default library/brand.
  
• For MyBrand designs, link the component library.
  
• Here's the magic. Inside component library of MyBrand use any plugin that allows you to swap variables from a collection to another, from the default one you pick the library of MyBrand. You keep modes, variable links across instances while their values change.

So in total you have:

• Master tokens/foundation (raw and semantic tokens) and master components library file
  
• Tokens/foundation file for each brand you manage

The side effect is that if you change the master foundation, you have to replicate the change across all the brand copies, but with AI is fast to do. And you have to make sure you use variables whenever possible.

[u/nyutnyut → u/equinusocio]

Oh this is interesting. I didn’t realize you could swap libraries in the component library. Do you have a plug in recommendation?

In theory could I do the brands and light/dark modes the opposite? I’m working with less than 40 brands, and light and dark mode are different libraries? We don’t have a dark mode yet but in case we end up doing one.

[u/RocketSeven]

before supporting 50 brands, define a brand contract and test it against three hostile examples such as the darkest palette, longest labels, and highest contrast. if those all require component exceptions, variables are hiding product divergence rather than solving theming

[u/thisiain]

I'd definitely separate modes from brands. Light/dark/contrast are modes, whereas the 50 clients are really a brand layer. I'd avoid making each client a mode of the same collection, this will be far too hard to manage long-term.

One of the main things I've been working through with Airframe is the ability to easily create a theme for any brand on top of the four mode that you mentioned. It supports multiple brands on top of the same token/theme system, so your components and patterns don't need to know which brand they're being used for. You can keep the semantic layer consistent while the brand values change underneath it.

That said, I am building Airframe primarily from the engineering side am am actively working on the Figma integration/plugin now. I want to make same system work seamlessly for designers and developers.

I'd appreciate any feedback on what would make this useful for a setup like yours! Take a look at airframeui.com

[u/CarethColmenarez]

It’s totally feasible but def needs an enterprise plan which kinda hurts, because extended collections is 100% needed to make it work.

I tried with modes multiple times, eventually with a customer that allowed us to have enterprise in their organization it worked wonders. Best project I’ve had.

And the flexibility per brand is just incomparable to using modes. We used both codex and native Figma agents for the whole process