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?