Организация стилей, цветов и шрифтов
Стили цветов
Создаем цвет — загоняем в стиль в Figma.
Затем выносим наши цвета шейпами в UI kit, чтобы все было наглядно для разработчика, да и для дизайнера, которому еще работать с этим макетом.
Создаем библиотеки стилей цветов
Стили типографики
Когда мы примерно прикинули дизайн страницы, уже понятно, какие размеры шрифтов мы используем. Самое время добавить их в стили.
Добавление шрифта в библиотеку стилей
После того, как все тексты на первичном макете переведены в стили, нам дальше уже будет гораздо проще работать. Если позже нам понадобится изменить размер заголовка или текста, мы просто обновим параметры в стиле, и изменения автоматически применятся ко всем элементам, использующим этот стиль.
Очень важно обеспечить преемственность текстовых стилей между Desktop и Mobile. Разработчики используют этот принцип, и если вы не будете использовать данную систему, то им придется каждый раз создавать десятки дополнительных стилей. Это отнимет время, а ошибки будет сложнее отследить и исправить.
Преемственность стилей между настольной и мобильной версиями
Очень важно правильно называть стили, чтобы получилась удобная навигация. Логика наименований примерно такая: Разрешение/ Название/ Начертание (Например, 1440/ H1/ Regular).
Логика в наименовании стилей
Важно помнить: постарайтесь обходиться минимумом начертаний. Не стоит плодить стили шрифтов, похожие по значениям, например, 24 и 26. Если два стиля различаются размером менее чем на 15%, их стоит объединить в один.