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 ...

Design rendering

At this stage, you have already caught the general idea and your task is to put everything together. To do this, a font part is selected or rendered, a composition is selected, and the solutions found are applied.

1. Sketch development. Try looking on paper. So you are less limited and less prone to engage in perfectionism. Just look for the overall composition, appearance. The more sketches, the better Identification of options. At this stage, you need to choose a few of the most successful sketches and work them out in more detail. No more conditions. Everything is smooth and the way you want to see it in the future.
2. Drawing options. Those options that you have identified and drawn in detail must be translated into a vector. You can take a photo / scan and redraw, or you can draw from scratch, based on a sketch.
3. Refinement of details. Check the angles of inclinations, indents between objects, dimensions. For example, in my project, I increased the intra-letter gaps, because they did not suit me in the selected font.
4. Creating Variation. Keep in mind that the logo will be used on different surfaces and in different situations. Make an abridged version, black and white and inverted (negative).