✅ Intro
A Design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
- from wiki
Design System itself is a very vast topic and you can find a lot of definitions that will make sense to you as per your knowledge and experience and it will make you explore the topic more and more. The basic myth that it busts is that it is not just for designers, it's actually for the whole team. A System is not just for one or two persons or one or two teams, it involves multiple teams. Similarly, a Design System involves Designers, UI/UX experts, Engineers, Product Managers and many more.
Together they can build a system of design that can be used across different products but share the same and similar set of design thinking, principle and ideology, the same branding across different products and even within the same product. It gives your end-user the same sense of experience and trust while using the different products of the same organisation.
My Design Sytem journey started with:-
Emma Bostian's Design System Course on Frontend Masters
Figma Design System Course by Mizko on YouTube
You can go through these courses for a better understanding of the Design System and follow them for more insights.
I have gone through these courses and other design-system-related articles many times, but I never got a chance to implement it till a few months back when I was given a task to re-design one of our product's main web-app from scratch using a modern web tech stack. A new instinct grew up in my mind and I started researching more on how to build a design-system-based component library with modern web frameworks. In this series, I will share my experience building my first UI Component Library.
An important thing I want to add here is, incorporating a design system is not a small thing, it's a process which depends upon the product you are building, the size and the experience of the team. It is not recommended to start right away with the Design System, as it needs proper planning, and may have many iterations throughout the process. If you are a small team, you can choose a hybrid approach where some components can be part of the design system and some components can be built independently which later on can be made part of the design system as the team grows and as the product grows. You need not waste time on building a perfect design system in the beginning but should focus on building the product first. So, before going towards the full design system approach start with the hybrid approach and start with the basic elements first.
Theoretically, I haven't even touched the iota of the topic, it's a very vast topic and it will be out of the scope of this series. You will find topics from pro-designers talking about the core principles of the Design System and then you can also find topics where they can teach you how to write a UI library. But in this series, I trying to touch and relate both topics at the same time.
So let's start with our topic and we will go through the theory and code along the way.
✅ Intro
I hope you are enjoying this series and learning something useful. Please help me improve my work by providing proper feedback via adding comments or do send me an email.