Vladimir Dzekh

Design system

Below are my slightly edited, supplemented and translated into English answers to Sasha Efremov’s questions for his articles on Medium and vc.ru about design systems.

I have been working in Kontur for more than 10 years. For the last 5 years I have been working on the Kontur.Guides — the design system for 50+ product teams, used by 100+ designers and 200+ front-end developers, and serving 3 different platforms.

I must say firstly — all the texts of the guides, components and libraries are the result of a long and thorough work of many Kontur’s designers, UX-researchers, analysts and developers. Guides and libraries are maintained by a separate team. I was the leader of this team for a long time, now I combine the roles of analyst, writer, interface designer, tester and product manager.

What is a design system?

A design system is a complex organism that has a single source of truth in design tokens.

In my understanding, a design system is a tool that helps to create and maintain an unified user experience on interacting through different company products, as well as optimize the company’s costs for creating these products.

A design system is a synchronized library of components for designers and front-end developers with a detailed specification, documentation, a set of examples, and a list of best practices. It is an organism that has a single source of truth in design tokens. It is a culture of interaction with him and a dedicated team to support him.

Why does anyone make his own design system if there are already plenty of them?

It is easier to influence your own design system and as a result it becomes cheaper over time

It all depends on the context: on the product, the project, its age and its ambitions.

If the project is just started and you need to make an MVP, you can make it based on any third-party free or paid library or UI kit. At start, a third-party library may seem overabundant, but over time it can become insufficient.

With the product developing, there will appear new requirements for components which will be difficult, long or expensive to implement using a third-party library. You will have to make your own components instead and gradually move to them.

It is easier to influence to your own system and as a result it becomes cheaper over time. Most likely, you will not be able to influence the development of a third-side design system, for example, from Google without being inside the company. Or it will be very difficult.

How to start creating a design system?

One option is to start a survey.

As always, you need to start with research. Most likely, the company already has some elements of the design system, and you need to understand how they are used in the company.

A design system is a product, you need to approach its development as the development of a product: find out from users what difficulties they have, what “hurts” designers, what front-end developers have, what difficulties there are in communication between them and in the implementation of the designers’ plans .

As one of the options for what to do, you can throw a survey on each of the roles and think about how to solve their problems. It may turn out that a design system is not needed at this stage. It will be enough to draw a general UI or formulate Design Language.

Or, for example, you have a common UI, but at the same time components are too simple for front-end developers, there is no consistency in their use and you need to provide more complex, but strictly unified components.

What is the most important value of a good design system?

A good system is quite flexible and responsive

If the change you need to make to the system and roll out to all products takes a week or two, then it’s a responsive system. In bad scenarios, changes can take years to roll out. Bureaucracy and sluggishness are the main drawback of any system.

Everything here will depend on how well you establish a relationship with the community and users of the system (designers, front-end developers and other roles), and how much they will be interested in intervening, influencing the system and helping in its development. Any system is a collective product, and it cannot be created by an isolated team.

The second feature is ease of use. If a designer or front-end developer understands how to use the system without reading long instructions, then most likely it is convenient, which means it is slender and not contradictory. Despite this, the design system will still needs a detailed specification and documentation.

How complex the components of a design system can be?

We make sample pages to help designers see the big picture.

You can go until the component becomes so complex and big that it will be used only as an example of a template that must be detached (if we talk about components library in Figma). At the same time, the detached component is still assembled and consists of smaller components — elements of our design system.

For example: When we work with modals or some dropdown menus, designers detach and modify them. As a result, the modal no longer works as a component, but goes into the template format, but consists of such components as a header, a buttons panel and so on and so forth.

We also produce screen templates to help designers keep everything consistent and build on these templates to create new products and understand the principles embedded in the design system.

Such patterns can no longer be called components of the design system, but they are still its constituent parts and the continuation of the application of uniform principles on a larger scale.

What are design tokens?

Be prepared you will not be able to build a sufficiently flexible and harmonious system at the first or, even, second time

Design tokens are one of the “sources of truth” for a design system, along with the specification of components and rules for their use. The token system helps reduce the time to make changes, increases flexibility and reduces development costs. And tokens also help the designer and developer to understand each other and communicate in the same language.

Right now, our design system still lacks a simple and coherent token system which could be a single source of truth. There is a fairly large set of tokens, but it is still difficult to understand and it does not have a specification and a unified naming system.

Be prepared that the first time you will not be able to build a flexible and coherent system, and at some time you will have to rewrite everything, maybe even more than once.

How to make changes in components and not to break them in products?

We divide releases into major and minor and release version with breaking change about once a year

In front-end libraries, we adhere to the standard semantic versioning convention, so we try to postpone critical, breaking updates for major releases, and as part of minor updates, we maintain backward compatibility, support all current components, carefully add new features and fix bugs.

Components, we are going to remove, will be deprecated In the major release, and we will remove them only in next one. That is, designers and developers have a whole year to replace obsolete components to new ones and rewrite the code for the new API.

A little earlier than for the frontend, we release a new library in Figma and also try to support it without making breaking changes. For stability, all changes in the components are tested by screenshot tests, including those in Figma.

At the moment I’m not looking for a job, but I’m open to offers from companies with development offices in the EU countries. If you need a lead designer — write to me in telegram: @dzekh.

To be continued

This story has a sequel. Most of episodes have been written in Russian, ready to read, and wait to be translated. I will do it regularly, and you can find out about the release by subscribing to the Telegram channel. Sometimes I duplicate messages about new posts on my Instagram, but not always, not so regularly and, sometimes, very late.

The linked page has a rough plan of what I want to write in Russian during the year 2023, and approximate dates when this can be expected.

The crossed out year has fallen out of the lives of many Russians. A year ago, at the beginning of February, when I wrote these plans, I could not predict the circumstances of force majeure.

The time of ~~2022~~ was spent in attempts of accepting our helplessness and finding ways to come to terms with these circumstances. There was no energy for creativity. I hope that 2023 will be more productive. Stay tuned.

The beginning

— What’s the first thing you remember?
— Oh, let’s see…The first thing that comes into my head, you mean?
— No – the first thing you remember.
— Ah. (Pause.) No, it’s no good, it’s gone. It was a long time ago.
— You don’t get my meaning. What is the first thing after all the things you’ve forgotten?
— Oh. I see. (Pause.) I’ve forgotten the question

© Tom Stoppard, “Rosencrantz and Guildenstern Are Dead”, 1966

—

Through the noise, interference and extraneous thoughts, a distant, black-and-white picture gradually appears. It could be the first memory.

There is a winter frosty morning, snow and bright sunlight. Mom holds my hand — we are going to kindergarten. The sun is opposite, near the horizon, somewhere above the fences and warms the frozen cheeks.

All memories are linked to certain locations in the space of the city. Each the memory has its own place and its own atmosphere. Mentally diving into them, I watch emerging details. But the older the memory is, the more difficult it is to determine what is real in these details and what is not. Over time, all the past is overgrown with fantasies, completed by the stories of relatives or friends, supplemented by their attitude, interpretations and ideas about me.

The most real and honest is the feeling of the importance and significance of happening. And feeling of my exclusivity. There is something more behind everything that happens around me, while I am a child. The world is filled with mystery, and mystery is present in everything around me, and manifests itself silently, in inactivity of things.

Everything turns into a ritual and acquires some special purpose.

The usual TAG game suddenly becomes a part of the plan to save the world. “The secrets” buried in the ground have a mystery, much more than just candy wrappers hidden under fragments of colored glasses. And young spring buds of trees can give you superpower or cure you of a terrible disease. After all, no one has eaten these buds before you, but you are eating — and something must definitely happen after that. Something important.

This childish perception of the world is the most valuable of the lost superpowers. Now I’m trying to get it back and reconcile it with my current present. Understand what was behind everything that happened next. What was the reason for this feeling of fullness and completeness.

—

Some of the earliest and most vivid memories: the first loss — a machine gun forgotten on the children’s slide, the first question – “Why?” and the first love, which for some strange reason came in a dream.

With a machine gun, everything is simple: I lost it and was very sad about this. I don’t remember which way I got it, but I was very happy, played all morning, and left it on the slide, in the playground, when everyone was called for dinner. It was battery powered, made sounds of shots, flashed a red light on the muzzle, and something was moving inside. When I recollected that i had such interisting thing and we went to look for him, he was nowhere to be found. I felt very sorry and offended. Although it may not even have been my toy. Perhaps It was the reason why it disappeared so suddenly.

I remember the first question in a little more detail. It was in the same place, in the kindergarten. Among the trees, sandpits and slides stood a car welded from rods and sheets of iron, covered with several layers of peeled paint. It must have been a convertible, because instead of a roof, it had only a frame. With wheels, wented deep into the sand, and the cold and heavy steering wheel could be turned endlessly in one direction or another. A couple of kids were in the passenger seat, and I was driving. I was rushing somewhere, imitating the roar of an engine, carrying my passengers, but at some point I raised my head up and beyond the frame of the missing roof I saw the sky and poplar branches closing over me. I froze, and the question arose from somewhere — “Why?”.

Why am I making these sounds? Where are we going?
Why is all this happening now?

But my passengers began to worry and start bringing me back to the life:

— Hey! Well, what are you? Let’s go, we’ll be late!

I didn’t come up with answers to these questions then, and it seems that I still continue this simple and understandable game — to imitate the adult world, still hoping that in this game, or in this world, the meaning exists. And someday it will definitely open up to us.

What about first love? I would talk about it next time.