Thoughts on design systems
Starting up with Design System
Design systems are hard, and I mean the real systems synchronized with production code and team members' minds, not the UI kit files. The design system, of course, is not only about the look and feel of the product interface. It's also about the philosophy of established patterns and deciding what's good and what's not. My little ongoing story is about building a chat widget design system foundation.
Start small
Of course, it's very common that a design system starts with a file of some sort. It might be a design file, but it also might be a text file where for example team can list some of the product principles. In the LiveChat widget team, we've started extracting a small portion of reusable code like font sizes, spacings, colors into a separate place in the production code. At this stage, the values in my design file and the production code were the same but still not yet synchronized. That's ok as for the first stage. I had a feeling that slowly but steadily, things were coming into place.
Taking every opportunity
Working on design systems is almost always not a high priority, but it depends on how you will explain the project's purpose. In our case, the savior was making the product accessible, which was one of the business goals of 2021. It's easier to pitch the idea where the expected outcome is more than just a new design. We needed to systemize colors not only because we wanted a new fresh look, but we also wanted to improve UX for all users and test whether our new color combinations met the criteria of WCAG. Taking the opportunity of working on accessibility, we have established a design system tokens and created a package that others could use.
As little handoff as possible
Handoff one day will be the thing of the past. The rise of many no-code builders is a living example to prove that statement. For the first time in my design career, I've realized that connecting the production design tokens with a design tool brings real value and truly speeds up the whole process of building new stuff. With the help of Framer - a hybrid design/code tool, we were able to make a seamless connection between the design tokens and the designer's projects. Just recently, we've finally released the new true dark mode in the chat widget. It wouldn't be possible without color tokens.
Back to all projects