I’ve been working in a multi brand design system, I have these libraries:
Library A → White label tokens (colors, typography, etc)
Library B → Brand 1 tokens (colors, typography, etc)
Library C → Brand 2 tokens (colors, typography, etc)
Library D → Components (buttons, inputs, etc) using Library A tokens
I made the master component buttons interactive, connecting hover and pressed variants. The problem is when I want to use it in a file, If I swap libraries, only change the instance in the canvas, but not their variants.
Can confirm this an issue for us. Also trying to manually update each variant of an instance is overridden whenever the parent component library is republished.
@Figma_Support is there any fixes lined up for the above? Im trying to use 2 libraries to manage light and dark mode, however the variants keep the light mode library colours rather than the dark mode mode library, even though i swapped the library to be in dark mode not light mode.
Same issue for us, we have a multi brand design system with the following libraries:
Library A: components (using Library B tokens)
Library B: Brand 1 Tokens
Library C: Brand 2 Tokens
If we import a component from Library A in a new file and we swap to Library C, the variant styles get overridden. If we ever publish a change of a token used in a component from Library A, the style of that component doesn’t get updated on the new file. The only way to see the update is to “Reset changes” on that instance and then swap the library again. But that’s not efficient and we also loose other overrides like texts. How do we then ensure that all our UI files stay up to date with Library A on where we store all the white labelled components?
I’ve been digging this one for a while. My conclusion is that it is not possible to mimic the behaviour we get in the code. This type of inheritance isn’t something Figma was built around. However, there is another way around it.
I made a design system that works across three different platforms, eg desktop, web and mobile in light and dark modes. All the elements are the same, but with different spacing, typography scales, colours and radii values.
There is a single golden source file that implements everything I need and it is made with design tokens. Please note, there is no support for design tokens yet, you would have to rely on a plugin, third party or self-made. I choose to have a self-made plugin that would run across my golden source file and apply a different set of tokens on top. This way I produce multiple team libraries that are exactly the same structure-wise but with different flavours. This makes them interchangeable, I can swap one for another without losing overrides and stuff.
In my view, this is exactly a white-label design system so to say. To evolve and maintain this one I work on a single file (the golden source one). When it is time I run the whole process again to make a new version. For the end user upgrade is fairly simple, they would have to swap the old version with a new one.
Hello, i was playing around with library swap to support multi brands and experienced the same issue. I contacted Figma support and they told me that this is not possible / how Figma works now. In that case you need to do the brand library swap in the same file where your components are, which means that you need copies of your component file. In that case you maintain components in only one file, copy the file, do the brand library swap there and use the according branded component library in your project.
