Получив от менеджеров и аналитиков необходимые данные, вы откроете Фигму и начнёте привычно рисовать дизайн. Полноценная дизайн-система у вас со временем будет своя, но основы важно заложить сразу. Они простые и универсальные

Цветовая гамма

Здесь важно понимать две вещи:

1. Нельзя бесконтрольно плодить цвета и оттенки. Гамма должна содержать минимально необходимое количество цветов.

2. Нельзя называть цвета black, white, red и тому подобные.

Есть несколько теорий о том, как правильно формировать цветовую палитру проекта. Некоторые рекомендуют вводить черный и белый цвета, к ним ещё десяток оттенков и дополнительных цветов. Некоторые используют готовые палитры от Google Material и тому подобные. Оба этих варианта слишком громоздкие и неудобные.

Я разработал для себя другую систему. Её суть — называть цвета по применению.

Контекст применения

Классически нам точно понадобятся цвета для фона, текста, какой-нибудь акцентный цвет для кнопок и ссылок, рамки. Для маркетплейса я добавил ещё пару цветов. В сумме получается 12 штук.

Primary – основной цветовой акцент фирменного стиля проекта. Часто используется для ссылок и кнопок. Иногда для иконок.

Secondary – второстепенный цветовой акцент фирменного стиля. Чаще всего используется для декора, мелких акцентов и иконок.

Surface – подложка/поверхность. То, на чём обычно располагается текст.

OnSurface – соответственно, цвет текста на подложке.

Background – цвет фона вне подложек.

FIelds – цвет фона полей.

FIeldsInactive – цвет фона неактивных полей.

Borders – цвет рамок полей и вообще всех рамок и разделительных линий.

Active – цвет выделения активного элемента. Чаще всего этим цветом выделяется выбранная строка в таблице.

Error – цвет ошибки. Обычно в оттенках красного.

Success – цвет положительного результата.

Inactive – цвет неактивного текста. Когда элемент какое-то поле не доступно для редактирования.

90% проектов укладывается в эти рамки без изменений.

Иногда я добавляю оттенки к основным цветам с признаком Variant. Например, когда цвет Primary выглядит плохо на тексте или иконках.

И никогда не добавляю цвета Blue, Red, Black и т.д. Потом просто невозможно понять, где этот цвет используется.

Стили текста

Здесь также есть множество вариантов и схем. Но они снова пытаются быть универсальными. А в итоге становятся сложными и громоздкими.

Работа со стилями текста в Фигме, прямо скажем, не самая лучшая. Перечёркивание и толщину приходится зашивать в стиль и это очень не удобно.

Из-за этого я выработал для себя следующую схему.

Сначала я завожу самые основные стили. Аналогично, привязываю к применению:

Heading – стили для заголовков. На самом деле, в этот стиль я убираю все жирные начертания.

Body – просто текст.

Потом я добавляю к ним признак размера:

XL, L, M, S, XS

Заголовки и текст в сочетании с размерами позволяют закрыть практически все варианты текстов на страницах маркетплейса. И запоминать просто: весь жирный текст – заголовки, остальное – просто текст.

Использование букв в размерах вместо цифр кегля делает схему полностью универсальной. В том числе и для мобильных приложений.

Затем, из-за тех самых особенностей Фигмы, я добавляю специфические, но “говорящие” стили:

Price – шрифт для цены. Можно было бы использовать Heading. Но я предпочитаю отдельный стиль.

Currency – иногда нужен отдельный шрифт для валюты. Актуально, когда на маркетплейсе есть мультивалютность.

Old Price – перечёкрнутая цена до скидки.

Old Currency – перечёркнутая валюта до скидки.

Badges – текст для бейджей “новинка”, “рапродажа” и т.п. Шрифт здесь обычно самый мелкий. И больше нигде не используется.

Есть ещё одна особенность. Размеры Price и Old Price отличаются в каталоге и в карточке товара.

Поэтому к ним тоже можно добавить признаки L и S.

Не забываем про мобильное приложение. Здесь имеет смысл добавить кое какие дополнительные стили:

Bottom Nav – текст для нижней навигации. Особо мелкий текст для подписей к иконкам нижней навигации.

Badges – тоже бывают в мобильной версии сильно мельче, чем на десктопе.

Ну и в конце концов, стили текстов для удобства можно собрать в группы Desktop и Mobile.

UI kit

Я намеренно не буду касаться построения UI kit в этой книге.

Во-первых, вы и так уже 100% пользуетесь компонентами и прекрасно понимаете их пользу и применение.

Во-вторых, все киты индивидуальны, у вас всё равно будет вырисовываться свой собственный.

Дам лишь пару советов:

1. Держите кит на отдельной странице. Придётся пожертвовать интерактивностью, зато не запутаетесь где что лежит.

2. Не забывайте рисовать ховер-состояния для элементов.

3. Летом 2023 года в Фигму добавили переменные, состояния и прочий сложный интерактив. Но помните, главное — скорость разработки.

Я занимаюсь UX-аналитикой и UI-дизайном онлайн-сервисов, CRM/ERP, кабинетов, дашбордов и мобильных приложений.