Before you will start your journey of building a design system for your product, take a moment and think about the team that will help you to bring it to life. What kind of people need to be involved in the process? It wouldn’t be just designers, you will also need developers and product managers, leaders and others like researchers, content strategists, and accessibility and performance experts.

After you will establish your team you will have 4 phases to work through.

Audit

It will be your first and the most important step in building a design system of your current design. You will need to review all visual design elements used in the product to get a clear understanding of the consistency and uniform usage of the brand, experiences and communication throughout the product.

Photo by Headway on Unsplash

Visual design language

It’s the core elements of the system that divided into 4 categories

• colour — primary colours will represent the brand, some shades of grey and light and dark tints of your primary pallet so designers will have a few more options
• typography — keep it simple and use 1–2 fonts in your system, it will reduce confusion and increase performance
• sizing and spacing — using a consistent spacing scale will promote maintainability that will have predictable layouts and will align well. I prefer to use a 4-based scale as it became IOS and Android standards and even for the websites in the recent times
• imagery — it will depend on the product you work for but in general just set up rules and guidelines for illustrations, icons and photos.

Photo by Balázs Kétyi on Unsplash

Components & pattern libraries

After the audit phase, you will have a clear understanding of what elements are you using and how wide your components library should be. This can get a bit depressing as you will realise how inconsistent your product is but don’t worry with a new design system that you are building you will fix it.

Photo by Budka Damdinsuren on Unsplash

Documentation and support

This is the last phase but not less important than others. Writing documentation and guidelines will separate a UI kit from the design system. There are different ways to do so, so will include the component’s name, description, example and code, others will have metadata, release histories and more. The most important is that you will record what’s necessary for your team so they could get the work done.

Photo by Marília Castelli on Unsplash

Thank you for the clap 👏🏻 if you enjoyed this article.

If you have any feedback, I’d like to hear from you. Say hello at [email protected] or connect on LinkedIn, Instagram and Dribbble.