How to build a design system
Aditya Kumar | 3rd October 2019
Before going forward! First, understand what is design system?
A design system is the single source of truth, which groups all the elements that allow teams to design and develop a product that can be assembled together to build any number of application and design system include things like.
- Design Principle
- Design Token
- UX guidelines
- Development Guidelines
- UI Patterns
—- Remember UI kits is not a design system, It can be a part of a design system
Know the difference
What’s the difference between a style guide and a design system?
The design system is more complex than a style guide and style guide is a simple collection of colors, typography and other elements which can help to identify the brand.
Most design systems is really just pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. Your product is just a pile of reusable UI elements. It has structure and meaning.
According to Atomic Designs
There are so many benefits to creating a design system like
- Design System promotes UI consistency, allowing a user to get done what they need to get done
- Allows for faster production
- Allows for generating higher quality design
- Established shareable vocabulary between disciplines and different products
- Make things easier to test UI
- It provides a future-friendly foundation to grow and involve the system over time
Focus on the right clients
How to sell a design system?
- Before providing a solution, understand do we really need a design system? If yes then why do they need?
- There are many types of client, you can offer them a design system
– Who are running the business in the last several years (2-5 years)
– Who are trying to extend their business
– Who have multiple digital products and now they are struggling with designs.
- Don’t try to sell design system to startup, reason first they just begin and they didn’t scale their business so it is very hard to sell, into problems and challenges.
- Lastly, understand the design system is a way to solve the design+business problems but you should find the right clients and right companies
How to define a design system
Understand the design system is not about working in isolation it’s all about collaboration!
If you are working individually, you may start from creating style guides and It’s a good start for an individual designer.
- Color (Brand, gradients, accents)
- Typography
- Spacing
- Accessibility colors
- Content
And then you can start building UI components.
Building UI components Example
- Buttons
- Models
- Forms elements
- Data Tables
- On-off switches
- Dialogs
- Toolbars
- Checkboxes
- Dropdown menus
- Sliders
- Steppers
Conclusion –
In this blog, I have written a How to build a design system and difference between a style guide and a design system? And mentioned UI components like Buttons, models forms elements, etc. Being an user research consultant you should have knowledge of design system.
