Hi everyone.
I’m currently working on a multi-brand design system and I’ve separated everything into two files:
-
A Foundations file containing all Variables and Styles
-
A Components file where those Variables and Styles are imported and used
The idea behind this setup was scalability. If additional digital products need to connect to the foundations layer in the future, they could independently consume and publish the shared foundations without being tied directly to the component library.
However, I’m running into a few practical issues.
Because the system is large and multi-brand, I spend a huge amount of time publishing updates in the Foundations file and then importing those updates again into the Components file. When hundreds of variables change at once, this becomes a lot of repetitive back-and-forth work.
In addition, I sometimes encounter a bug where a variable appears to be set correctly, but the component does not visually update automatically. Only after double-clicking the component or manually reselecting something like a text color variable does the UI suddenly update correctly.
So I have two questions:
-
Is there a safe way to migrate all Variables and Styles into the Components file, and potentially move them back into a separate Foundations file in the future if needed? Ideally without breaking aliases, references, component links, or existing setups.
-
Are the issues with manually reselecting variables to force updates related to this multi-file setup, or are these separate Figma issues with their own solutions?
I’d really appreciate hearing how others structure design systems and whether keeping foundations separated is still worth it at scale.