You should know how to build a Design System — that’s scaling 101
If you are looking to speed up your design-development workflow and to scale your work much better and faster you need a design system. Nowadays, there is a lot of confusion about what is one so in this article, we will try to explain it as simply as possible.
Design System is a complete set of:
- Design language
- Component library
- UI kit
- Frontend framework
- Documentation site
That’s it 🎯
Design language
Design language is a communication tool that helps designers create visually harmonious and coherent designs and give their products a unique but consistent look and feel. — Source
But it is more than that. Design language answers the most important question: Why we are building something in a certain way?
Many times fellow designers and stakeholders will ask the question why we don’t have smaller buttons, why we use shadow on a certain element, etc. The answers should come from the design language. And the rules in the design language should be based on user research.
The most popular and used design languages are:
Component library
A component library is a production-ready, customizable, and reusable components, like buttons and tables, that is widely used by UX and UI designers for faster design, iteration, development, and growth.
Components libraries are usually built in the following graphics editors:
Read more about how to build a Figma component library here.
UI kit
UI kits are a collection of ready-made files and templates based on design language guidelines and built with a designated component library for a specific UI/UX project.
Similar to the components libraries, they can also be built in the following graphics editors:
Front-end framework
When developing a software product besides creating a well-designed UI and ensuring a convenient UX, it is also important to build a stable and secure application that will allow to scale easily. This is where having the right front-end technology stack comes in handy. In a nutshell, front-end frameworks are platforms for coding the components and UI design. The front-end developer will turn components, templates, and designs created by a designer into a functional user interface and a functional end product. Front-end web developers use front-end frameworks like React, Angular, Vue, Bootstrap, etc., to turn design into code.
Documentation site
In order for people and teams to adopt and use the design language, components library, UI kit, and front-end framework, a documentation site is highly recommended. The goal is to create living styleguides and document of all the design system resources in one place. The documentation site will take the team collaboration to the next level and allow different stakeholders to play with styles, components, learn how they work, and read about the best UI/UX practices.
Popular documentation platforms for design systems are:
- Notion
- Confluence
- Google Docs
- OneNote
- Supernova.io
- Personal website (yes, you can create your own personal site where you can document your design system)
Final words: Mix and match
Life is too short and there is no right or wrong combination for creating the perfect design system. In addition, a perfect design system does not exist. Depending on the size and scope of the project, chose your own journey for creating your own design system. But always include the necessary elements that will get you closer to having your own personalised design system.
