Design system

As you certainly know, a UI kit is an ordered collection of all the elements of your digital product: buttons, forms, typography, etc.

Usually, when they say “it is necessary to make a UI kit”, they mean “the designer needs to collect all the elements in the “Fig” (“Sketch” ...) in one place, show all the states, add descriptions so that everything is clear and you can make a normal development quickly and efficiently.

Less commonly, the same is said about front-enders, meaning that you need to lay out all the elements in HTML so that you can reuse them.

Or, in other words, the pictures must be turned into code and preferably put in a special storage (repository).

But now, if in the design you decide, for example, to change the base red color to pink, you need to do this first in the design programs and then correct the code, i.e. synchronize the UI kit and the code.

And here you can turn it all into a system. For example, you can write a procedure for transferring changes from Figma to layout and then to the site. Or you can go further. You can also automate the synchronization of changes systematically.

Imagine that you have updated the logo in a design program. Clack-clack, and he is already on the site and in the application in Apstore ...