Member-only story
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.
Free video courses on creating design system 🆓
Understand that a design system is never done. It keeps evolving, here are tutorials to help you.
- Create a Design System with Figma — Full Course by freecodecamp
- Build it in Figma: Create a Design System — Foundations by Figma
- Create a Figma Design System — Fundamentals (Part 1) by Mizko
- What is a Design System? Design Systems 101 for Designers by Gary
Take Away 🎁
I’m including this one in case you ever questioned what a component was while reading the above 😉. Components are building blocks for your design system. They’re generally collections of elements put together in a reusable way, such as buttons, forms, navigations, cards, cells, overlays etc. Hope you found this helpful.
🖤 Nabhel.
