How to create your first Design System (and not go crazy)

I have just realized I was creating Design Systems before it was trendy. When I started my design adventure, no one had used such terms yet, and Photoshop had a single digit in its name 😉 A lot has changed since then, but not everything. Good project organization, ease of maintenance, and the convenience of making changes are still crucial.

When the first Design Systems (finally called as they should be) started to appear, I was so fascinated. I liked how they organized the designer’s work and that they were in line with my approach to design. I remember trying to have well-organized projects everywhere I worked. Clear rules and maintaining consistency were a priority for me, but I also wanted them to be easy to maintain and to not drive anyone crazy during global, frequent, and cosmetic changes.

I always preferred to spend a little more time preparing a design to enable quick modifications in the future. The ease of editing was mainly out of concern for the new designers on the team. I wish my colleagues had a similar approach… 😬

The last years in my work have been mainly UX/UI, where I have realistically used Design Systems. Working with them has been a constant observation and learning experience for me. Now I focus on following how individual designers use Design Systems and adapt them to a specific project. I also suggest tried-and-tested solutions.

What if I want to create a Design System from scratch?

I have gone through dozens of different Design Systems in my career. Before you conclude that it is worth creating another DS from scratch, do the same. Observe, look around, read the various documentations. You will quickly notice that the concept of a Design System is so broad that each component can be a separate discipline. I am thinking here of typography, accessibility, color palette, or even color psychology…

A good Design System must not be weak in any of these areas. Every design decision influences past and future changes. Without a well-thought-out plan, it is easy to throw yourself into tweaks and optimisations that lead nowhere.

Of course, the most fun is always in doing projects from scratch to learn new things in the process. Unfortunately, with a Design System, there is never enough time for that.

As designers, we have our habits, our developed style, and workflow. The chances of creating your first DS without minimal support are the same as successfully jumping headfirst into a swimming pool. Without water. From 10 meters. So heed the advice of a designer-boomer: you need to look at the work of others in order to use it later in your own project. It is better to be sure that you know enough to create your very first Design System.

Okay, so tell me, finally who is worth following…

In my opinion, one of the most interesting projects in our industry is Tetrisly Design System. It was known as a UI kit for a few years and is now definitely becoming ‘something more’. It means you can watch its development and the next steps of the designers, while at the same time… not feel alone on unknown ground. Such an opportunity is rare!

You will read on the Tetrisly website that “It’s not another UI kit”, but do not mind it. You can definitely use it just as a UI kit and gradually learn the rules of the game 😉 This way you will quickly prepare a new project and adapt it to your specific requirements. On the other hand, you will leave yourself a gateway to use all the benefits of a full-fledged DS in the future.

As we are talking about the future — remember that a Design System cannot be built once and for all. Like any tool in the hands of a designer, it must keep up with changes. Here you will notice another advantage of Tetrisly. This product is very well thought out, constantly developed by its team and adapted to Figma’s updates. Often it even anticipates them, as evidenced by the design tokens in the form of an additional plugin released a few years ago. It was only this year that an alternative to them appeared in the form of Figma Variables.

And that’s not all, as Tetrisly will soon be supplemented with React integration, so it will become useful for developers too!

Finally — the key proof that Tetrisly is worth your attention. I was using it long before it started to become a Design System and it drew me in enough that I recently joined its team. So I’ll personally make sure it contains best practices and lessons learned from my experience 💪

If you would like to get to know the Tetrisly Team better, share your experiences, or learn more about creating design systems, be sure to visit our Discord server👉 CLICK!

See you there!