Practical Guide to Creating a Design System

We are going to provide a step-by-step on how to create a Design System for your Product.

Select a UI Framework

If you don't want to spend a lot of money building a design system from scratch, you should choose one of the existing UI frameworks that exist in your tech stack.

Building a really good design system from scratch is very hard.

Define your Theme

Every existing UI framework gives you a default theme that you can customize with your product colors and requirements.
Avoid too many customizations to avoid complexity.
Define both light and dark themes.

Create a package for your design system

At Woovi we have @woovi/ui as our design system.
If you are using a monorepo, which we recommend, you just create a new package in your monorepo and export only public components to be consumed by the products you have.
Following this approach, all products always consume the latest version of your design system.

If you are using a poly repo approach you need to create a new repository to contain the design system and publish it to npm.
Following this approach you need to publish a new version of your design system every time you modify it. You also need to update all the products that consume it.

Storybook

Add all public components from your design system to a storybook that should be also deployed on each design system change.
The storybook is the best documentation for the team that is consuming the design system in the product.

Avoid custom CSS and custom components on Product Code

Avoid custom CSS and custom components in the Product Code.
Most components or maybe all components should come from the design system.
If a component does not exist in the design system, it may not exist in the design prototype either, or we should add it to the existing design system.

Every time you add more components or values to the design system you are adding complexity and increasing the cost of maintaining.

Regression UI testing

You can add regression UI testing to the design system to ensure every change does not unexpectedly break product code.

In Conclusion

Building a Design System for your product sounds like a lot of work, but it is a great investment.
You will have more work upfront, but the marginal cost of building new front-end pages will decrease.

If you need more reasons to have a design system check this article Every product needs a design system

---

Woovi
Woovi is a Startup that enables shoppers to pay as they like. Woovi provides instant payment solutions for merchants to accept orders to make this possible.

If you want to work with us, we are hiring!

Comments

[Ahmed Atwa]

Would be great if you could provide resources or examples for the UI frameworks or predefined design systems to use

[Sibelius Seraphini]

@materia/ui
ui.shadcn.com/
tailwind

[Katherine Lawrence]

Nice foundational article to Design Systems.
Can you please provide an example for us regarding each section/topic please.
Like giving us an example of a mono repo that has a collection of examples of components, etc..

[Oleg Berdyshev]

@sibelius thank for this inspiring article. I have a question. By selecting a UI Framework do you mean React, Vue, and etc or you mean Material Design?

[Sibelius Seraphini]

it would be a more high-level one

like these

@materia/ui
ui.shadcn.com/
tailwind