Токены и атрибуты
Токены или атрибуты — это уникальные идентификаторы, которые обозначают соответствия переменных в разных темах приложения. Токены могут определять цвет, стиль текста, скругление углов, отступы и другие параметры. Разница названий обусловлена терминологией платформ: для iOS — токены, для Android — атрибуты. Далее мы будем говорить «токены», подразумевая как токены, так и атрибуты.
Токены незаменимы в больших продуктах, потому что позволяют делать массовые обновления автоматически. Изменение значений токена отражается во всех компонентах, содержащих его. Такой подход оптимизирует процессы дизайна и разработки, поддерживать консистентность становится гораздо проще.
Токен цвета и цвет из палитры не одно и то же. Токену всегда присвоено несколько цветовых значений: по одному для каждой темы. Как минимум токен содержит цветовую пару для светлой и тёмной темы. Цветовая пара токена может состоять из одинаковых оттенков, если не нужна смена цвета в разных темах.
Библиотека токенов
У каждого компонента дизайн-системы есть набор токенов цвета, позволяющий управлять цветами в разных темах — в дизайне и коде. Токены хранятся в библиотеках и сгруппированы по назначению. Все токены, за редким исключением, — кроссплатформенные и имеют одно название для iOS и Android.
- Core・Mobile・Tokens — библиотека токенов с цветовыми парами для компонентов и ресурсов проекта NOVA Core Libraries.
SBOL Design Department → NOVA Core Libraries → 02・Core・Mobile・Tokens
- SBOL・Mobile・Tokens — дополнительная библиотека токенов. Содержит только СБОЛ-специфичные наборы для компонентов и ресурсов проекта NOVA SBOL Libraries.
SBOL Design Department → NOVA SBOL Libraries → 02・SBOL・Mobile・Tokens
Подробнее о разнице проектов NOVA Core Libraries и NOVA SBOL Libraries вы можете прочитать в статье о библиотеках.
Новые токены
Иногда чтобы создать новую продуктовую концепцию или кастомный компонент, может понадобиться новый токен.
Что делать, когда нужен новый токен:
Чтобы добавить токен в библиотеку дизайн-системы, нужно обязательно завести заявку и пройти ревью.
Сonfluence: Заявка на добавление токена или цвета
Рекомендуем использовать именно токены цвета. Статически прописывать данные цвета в коде допустимо только в исключительных случаях. Фиксированные цвета сложно поддерживать в дизайне и коде: они не поддаются системному обновлению и править их приходится вручную. Когда в дизайне всем компонентам назначены токены, перевести макеты из светлой темы в тёмную можно в два клика при помощи плагина VJUX.
Как выбрать цвет
Абсолютно для всех токенов оттенок должен быть подобран из принятых дизайн-системой палитр: Palette — основная палитра, Extended Palette — дополнительная палитра. Приоритет за основной палитрой. Если у вас исключительный случай и понадобился новый цвет, он добавляется в дополнительную палитру. Например, если у продукта уникальный цвет, которого нет в палитрах, то перед тем как оформлять заявку на добавление нового токена, заполните заявку на добавление цвета в Extended Palette. Подробнее о разнице палитр прочитайте в статье о цвете.
SBOL Design Department → NOVA Core Libraries → 04・Palette SBOL Design Department → NOVA SBOL Libraries → 04・Extended Palette
Локальные библиотеки
Если вам нужно создать локальную библиотеку токенов, вот краткая инструкция.
- Создайте файл в пространстве вашей команды с названием по примеру: Название вашей команды・Tokens.
- В файле сделайте таблицу, в которой будут записаны необходимые параметры токенов. Можете воспользоваться примером таблицы из дизайн-системы, скопировав себе шаблон. Обязательные колонки в таблице токенов: название токена, образцы цветов для светлой и тёмной темы, параметры hex-цвета.
- Наполните таблицу данными.
- Заведите токены: сначала для светлой темы, потом для тёмной. Как завести токен, мы расскажем в статье чуть ниже.
- Опубликуйте библиотеку стилей.
- Подключите эту библиотеку к нужному проекту.
Figma Help: Components and styles
Название токенов
Чтобы не запутать другие команды, делайте названия по правилам, поддерживайте консистентность. Токен всегда назван латиницей со строчной буквы. Как пример рассмотрим структуру названия токена для иконок ds_iconPrimary:
- [ ds_ ] — название команды;
- [ icon ] — назначение, может быть: text, background, button, banner, и другое;
- [ Primary ] — значимость, может быть: Brand (цвет бренда), Primary (базовый), Secondary (второстепенный), Constant (не меняет оттенок зависимо от темы) и другое.
Также в названии могут быть указаны:
- Свойства цвета: Gradient, Transparent, Inverse;
- Состояние: Enabled, Highlighted, Disabled, Accent, Success, Warning, Critical.
- И другие характеристики, которые помогут связывать пару токен → объект.
Как завести токен в Figma
- Откройте файл с таблицей токенов. Заполните данные для нового токена в таблице, назначив образцы цветов для разных тем. Значение цвета должно быть в hex-коде; если вы выбрали цвет из палитры, то разорвите связь объекта с предзаданным стилем.
- Выделите один из образцов цвета. Каждый стиль токена для светлой и тёмной темы добавляется отдельно.
- В панели справа, напротив заголовка Fill (Заливка) нажмите на иконку в виде 4 точек.
- В выпавшем окне, напротив заголовка Color Styles (Стили цвета) нажмите на плюс.
- В центре экрана появится диалоговое окно Create new color style, где в нужном формате необходимо заполнить название токена.
Когда добавляете токены в стили, укажите ряд триггеров, по которым Figma будет ранжировать их. Условно строку названия можно разделить на четыре части: название группы + символ соответствия теме + слеш + название токена. Как пример рассмотрим токен дизайн-системы Icon (L) / ds_iconPrimary (светлая тема) и Icon (D) / ds_iconPrimary (тёмная тема):
- [ Icon ] — название группы, в которую могут быть добавлены несколько токенов. Название группы должно соответствовать назначению токена, в нашем примере это icon. Название группы всегда пишется латинскими буквами с заглавной буквы, в отличие от названия самого токена.
- [ (L) ] или [ (D) ] — специальные символы, благодаря которым новые токены делятся по типу для разных тем. Для локальных библиотек вы можете выбрать иные обозначения.
- [ / ] — слеш межу названием группы и названием токена помогает Figma отделить одно от другого.
- [ ds_iconPrimary ] — после слеша прописываем полное название нового токена. Как составить название токена, мы рассказываем выше.
- Нажимаем Create style. Готово!
Проверьте, что токен появился в группе, список стилей в Figma расположен на панели справа. И наконец, обновите библиотеку через панель Assets.