Skip to main content
Question

Multi brand design system

  • November 27, 2025
  • 1 reply
  • 11 views

Pontus Gager

Hi!

We are currently investigating a way to use the same design system for all our different sub-brands (as they have a lot in common). To do this, we have created a small working group where I am one of the members.

The result will be some kind of POC where we want to prove the concept of having a core library with shared components and then having a local design file for each brand where all the styling is applied.

I would therefore need some help in getting an important feature for us (I have both googled and used various AI chats, but have not been able to get it right). You mentioned that we now have access to a higher level of support through the Enterprise license.

Right now we are using a free version of Shadcn as a basis (Core). That is where we have all the basic components (buttons etc.) and also our own custom components that will be inherited in the local brand files. The same goes for variables, we have all the built in shadcn/tailwind variables in Core, but also a collection of brand-specific variables that you should be able to change locally in the brand file. These brand variables are also duplicated in the local brand file.

But we also want the inherited components in the local brand file to be linked to the local brand variables, not the global variables in Core (which currently have the exact same names).

The idea is to be able to use a brand file and change the name to another brand by simply changing these local brand variables and changing the logo. By doing so, you at least get a good start for the brand.

But is there a way to automatically set the components in the local brand file to only be linked to the local brand variables? I.e. if I import a new button from Core, I want it to automatically get the local style and not the white label style from Core.

You can of course set it manually on all components, but every time you include a new component from Core you have to do it manually, which feels like an unnecessary step in the process. It also seems that you can use the Swap library, but it also has to be done manually with each change, we want this to be as simple and smooth as possible for those who will work in the local file (and also for us who work on developing new components in Core).

 

Do you think you can help me find a solution to this?

1 reply

Aguiar_Leonardo_extern

Are you familiar with how applying variable modes works in Figma's right side panel? You can apply a variable mode on a page level so any node or component with any nested variables in its parameters that were placed in the page would automatically adopt the appearance defined by the chosen variable mode set on the page.