As the number of products served increased, our design system began to fall apart. The threshold of entry for designers has grown and it has become more difficult to work with it. In the article I will tell you how we switched to a modular architecture and did not lose consistency.
Here are some introductory notes to help you understand if our case is similar to yours or not.
There are several products.
One product can be made by several teams of designers and developers.
There are Web, Mobile and Desktop.
There is a lot of legacy and inconsistency.
A designer in one product may not know what is happening in another.
If there are technical nuances, then, first of all, work in Figma is meant, but I think that everything is the same in Sketcha Fernanda.
Problems of existing approaches to library building
From a designer's point of view, a good DS starts with a library that is convenient to work with.
The experience of different teams is usually described by one of these patterns or a bizarre combination of them:
The problems themselves can be described as follows:
Several libraries are connected to one file. Inside the file is a mess of components and styles with different parents. Designers are afraid to touch library components because it is not clear where they are used and what might break.
. , . , , "". , .
, . , .
.
: , . , -, , . .
, - . , : - YAGNI SOLID, DRY KISS.
— , . .
, , ? — , .
, , , .
. , .
> >
>
>
-- , - .
, . , .
:
- "" , , . . , .
, .
. "" , , , , , . , . , , .
, . , . " ".
- , . , , , .
, , , .
. - , .
"-" , , , . , .
-
, -. , , .
:
— .
— , , .
.
- .
, , .
, . . , , . . , , .
, - — , , , .
, :
There are as many bases as there are products, but they all try to be similar to the reference.
With this hack, we support asynchronous product updates and a high level of consistency while avoiding direct coupling and redundant components in product libraries.
What's next?
In fact, the topic of the library has not been disclosed, and there is still a lot of firewood to be broken. There are nuances in naming, components, styles, and even in the very process of working with it. Therefore, in the next notes, I will tell you how we assemble components, screens and what we have with versioning. Well, what a design system is without describing the approach to ordering colors, typography and styles, I'll tell you about that too.