Hi,
I did a search for this but couldn’t find any answers (I could be using the wrong keywords? so hopefully this isn’t a duplicate question).
I’m a new UX UI designer in a start up, so to be up front, my eagerness to learn is high but my knowledge is low. I’m also new to the company so I don’t know all that much about the product yet.
We are looking to build a design system library (we are starting the conversation) and we have a SAAS product. So we need a design system that will be easy to maintain but easy to modify for each client (fonts, colors, icons).
What would be the best way to build this?
Main component Library (to use as a base, big changes like padding etc.)
Copy a variant locally to update fonts, colors & wtv other schemes we will allow
Any time a big push is done on the MAIN component library, it will push to the local ones? and then we need to go back into that and hopefully do a few clicks to update the fonts and colors based on a simple style guide in xxxx client’s file
Does this make sense?
What would you propose that’s easy to maintain and scale?
This is a huge topic to cover mate. And frankly there’s no good solution yet, you can search for multi brand/headless design systems in Figma on YouTube to get better idea about overall complexity of the problem.
As I see it, right now in Figma you can have a single component library and quickly change typography scale, colors and effects associated with components. Spacing is barely manageable, shape properties somewhat manageable via tricky design techniques.
I am working on my own thing and for now the best way to tackle it is to have a master library with a complete set of UI components. It would define the structure for these items. Importantly I keep visual layer for each component separated from its structure to be able to change it quickly. Let’s say, I have a button component with all the variants and it uses button chrome component that only represents visual layer for a button. The same I apply to all components in the master. This way I can quickly swap visuals for brand specific look and feel
Another part is a modules library. This one implements larger functional blocks, everything from forms to pages. You can think of various cards, headers, footers, forms, pages etc. I need these templates to speed up design production.
And few smaller libraries for typography, colors and shapes.
Then I would copy my master library per brand project. As a second step I would copy some generic modules required for a project and finally I would swap smaller libraries for custom colors, typography and shapes. As a result there is going to be a a brand new library tailored for a specific brand
I understood most of that, thank you!
So essentially, you upkeep 1 main component library & module library (made up of smaller components) and then you copy paste that for each new brand?