Organizing styles, colors and fonts
Colors
Create a color — put it into a style in Figma.
Then take out the colors as shapes in the UI kit so that everything is visually clear for the developer, and for the designer who will still work with this design.
Create color style libraries
Typography
Having got a rough page design, we already know what font sizes we are to use. It’s time to add them to the styles.
Adding a font to the style library
After all the texts on the primary layout are transformed into styles, it will be much easier for us to work further. If later we need to change the size of the heading or text, we simply update the parameters in the style, and the changes will automatically be applied to all elements using this style.
It is very important to ensure the continuity of text styles between Desktop and Mobile. Developers use this principle, and if you do not use this system, then they will have to create dozens of additional styles each time. This will take time, and errors will be more difficult to track and fix.
Continuity of style between desktop and mobile versions
It is very important to name the styles correctly so that you get easy navigation. The logic of naming is something like this: Resolution/ Name/ Typeface (For example, 1440/ H1/ Regular).
Logic in naming styles
Important to remember: try to get by with a minimum of typefaces. You should not breed font styles that are similar in values, for example, 24 and 26. If two styles differ in size by less than 15%, they should be combined into one.