What does it take to deliver a design system? 💅

In this post, I would like to share about my experience with respect to design system after 5 years of learning it. Stay tuned and read on guys 😊

First of all, let's talk about WHY do we need design system in the first place. A design system is a collection of design and code specific to set of components in order to unify both practices across organization's products. I could think of several big benefits of having design system for your project as follow:

It boosts developer productivity. Building UI is very much the same as putting million of lego blocks together. By welcoming developers with a well-established design system not only help them get up and running quickly with projects but also avoid hours of figuring out how to achieve certain task
It's providing consistency across products of an organization. A button or avatar UI component should look and feel identical across products. Google is a typical example of that. When you are using Google products whether it's Gmail, Youtube or Firebase console applications, they are giving you the feeling of unique Google brand

Let's go through all factors we need before start developing UI design system:

UX / UI Designer

It's important to stress that UX is the core of any design system. Designers are going through extensive training just for this purpose. Things like patterns, colors, icons, typography and even customer behaviour across cultures - some culture have right-to-left writing while others do in the opposite. At enterprise companies, they often have a dedicated group of designers who are studying customers to understand and figures out necessary UX to serve the best that fit their needs. For instance, products built for children is different from music and law enforcement 😄

Principles

Practices and standards should be shared across the entire design system team. This includes the technology such as CSS, TypeScript, ESlint rules, delivery, versioning, naming convention and testing

Theming

With the arise of CSS variable, it becomes easy than ever to deliver a set of dark and light theme at scale. Things like colors, spacing, text, font-size, border-radius and font-family

Accessibility

This is one of the most overlooked feature of design system. The beauty of the web is approachability - one URL away to get job done. It should be accessible to everyone. W3C group publishes a dedicated guideline for authoring different kind of components in the web 🚀

Testing

Testing is often considered as a afterthought for not just design system but for all software development in general. I had a dedicated blog post on that to go deeper on the merits of testing. When it comes to UI testings, there are two important aspects to put into account - how does it look and how does it work. The former one can be done with the help of great product such as Percy, they typically compare pixel to pixel of your components after each build to avoid regression. The latter is how does it work, it depends on your need to choose among e2e test tools like Playwright / Cypress or Jest / Vitest for simpler, less powerful yet faster iteration loop. Yet, I noticed couple of phenomenal libraries opted-in for both such as Zagjs - they use both Vitest and Playwright to power their test cases 🤸‍♂️

Teamwork

A design system team should organize regular retrospective sprint to capture a current progress and make necessary adjustment if necessary to meet set of priorities in place. We need to make sure everybody in the team understand the purpose of their work to motivate everyone working toward a common goals

Resources

Never stop learning, it's part of human evolution that what we do in the future will be better than the past. The key to do that is constantly learning from others. Without open source projects, I will not even close to where I am today in my career. There are many great products out there will worth your time:

There you have it guys, everything in my recommendation on how to start developing and maintaining sustainable design system. Best of luck with your current and future design system. Peace out and until next time 💞