How to create a design system

Definitions, UI kits and tutorials on creating design systems

Design systems and UI Kit are two UX terms often used interchangeably but are slightly different from each other. According to Nielson Norman group (NN/g), a design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels. I know the grammar is big 😵‍💫 but let me break it down a little bit.

Design System Simplified 🔠

A design system presents a collection of all design resources that a company may have. These include all code snippets and development resources with necessary code, documentation, page screenshots and image examples, design guidelines, relevant tools, documents and articles, style guides/reusable components, philosophies, and all other digital assets useful for the overall design workflow.

What this means is that everyone who’s part of the company’s product team, such as developers, designers, engineers, product managers, etc., gets together to discuss and map out everything that’s currently an existing part of their digital product assets, from logos and colors to language and codes. Then they collaborate on creating this ultimate master plan that explains how exactly things should be presented (designed and coded). It allows them to keep their work consistent and uniform, and have every single member on the same page. Examples of design systems are Human Interface guideline by apple, Material design by google, etc.

Design System Vs. UI Kit 🤔

Design systems are much more advanced and comprehensive than UI kits in that they include not just reusable components but also guidelines on how to use them. UI Kits only consist of UI elements and components, they are purely visual library that can be used to speed up the design process. Examples of UI kits/reusable components can be found on figma community to aid your work.