DEV Community

Cover image for Practical Guide to Creating a Design System
Sibelius Seraphini for Woovi

Posted on

256 5 4 5 4

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!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (5)

Collapse
 
deadreyo profile image
Ahmed Atwa

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

Collapse
 
sibelius profile image
Sibelius Seraphini

@materia/ui
ui.shadcn.com/
tailwind

Collapse
 
legacymaker profile image
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..

Collapse
 
oleg_berdyshev profile image
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?

Collapse
 
sibelius profile image
Sibelius Seraphini

it would be a more high-level one

like these

@materia/ui
ui.shadcn.com/
tailwind

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay