Hi everyone,
I’m currently working on a multi-brand design system in Figma using Variables, and I’ve structured it into three collections:
• Primitives
• Semantics
• Components
Both the Semantics and Components collections use the same set of modes, which represent different brand themes (Brand X, Brand Y, etc.).
However, I’m running into a problem:
At the moment, there’s no way to tell Figma that the modes in these separate collections are related to each other. Because of that, interaction colors defined in the Semantics collection (for example blue in Brand X and green in Brand Y) can both appear as blue in the Components collection preview.
This becomes confusing because when both modes are actually applied to a component, the final rendered result is different from what the Variables preview in Figma suggests.
One possible solution I’m considering is merging the Semantics and Components layers into a single collection.
The downside is that it becomes less organized, but the advantage is that Figma can correctly understand the relationship between the modes. An additional benefit would be that I’d only need to switch one mode when changing a component from one theme to another, instead of updating two separate collections.
So I have two questions:
• What is the safest/best way to merge these collections in a large design system? I want to be 100% sure that all existing variable references, aliases, and component connections remain intact and nothing breaks.
• Are there other solutions or best practices for solving this problem besides merging the collections?
Would love to hear how others are handling this in scalable multi-brand systems. Thanks!
