I am working on setting up a design library structure that needs to support three teams, each team is working with 4 brands. We’re currently on an Organization license.
As two of the three teams are using MUI we’re going for a setup where we have a main library that is using MUI as a foundation, meaning it is using copies of MUIs components and their conventions for collections and variables.
To support the third team we have decided that each team will have their own complementary library as an extension to the main one, so that they are free to create local variables/tokens that suits their needs. This may lead to some level of maintenance that is still to be explored.
However, I tried it out and am stuck hoping that someone here knows what I am doing wrong.
Here’s how I did it:
I started with setting up the main file which is basically a copy of a MUI Figma UI kit, to which I copied 80% of the UI kit. All the variables are there and everything is mapped according to the MUI way but in this new main file. It also contains one Light and one Dark mode. I then created another library which only contains the variable collections and not the components, these collections were copied from the new main library and the were modes mapped to other brand colors.
I then created a design file, connected these two libraries, brought in a component from the main library and attempted to apply a mode from the extended library. The mode from the extended library was not available. So instead I tried to copy the component from the main library to the extended library, published it and brought it into the design file, but the result was the same. The component would only use the mode from it’s original source, i.e. the original MUI UI Kit and the main library.
Am I doing something wrong here or is it just a dead end? Crossing my fingers that I am missing something really obvious here.