§Быстрое создание темы

Быстрое брендирование позволяет поменять несколько тем и сразу получить результат, с которым можно начать работать или в дальнейшем его оптимизировать. Для этого достаточно задать несколько цветов, и все применится к нужным контролам в нужных местах. Далее нужно повторить этот шаг для всех поддерживаемых тем — и готово.

§Перед началом работы

1. Рекомендуем загрузить последнюю версию библиотеки Figma.

2. Значения настраиваются в интерфейсе работы с переменными. Нужно открыть коллекцию Color Styles и выбрать группу Branding:

   

3. Результаты удобно смотреть на странице Branding в Figma. Там собраны компоненты, использующие бренд-переменные, что позволит составить начальное представление о том, как все будет в итоге выглядеть.

4. В компонентах необходимо использовать colorstyles.

5. Значением каждого colorstyle выступает соответствующая переменная.

§1. Базовые бренд-цвета

--g-color-base-background

Цвет фона страницы. Для светлой темы чаще всего используется белый, но можно использовать и любой другой. Для темной темы выбор цветов более широкий: от нейтральных серых оттенков до теплых или холодных цветов.

--g-color-base-brand

Основной цвет бренда. Фон для основной кнопки, чекбокса, радио, переключателя, а также special-тема тултипа.

--g-color-base-brand-hover

Ховер-цвет для основного бренд-цвета. Мы используем более темный оттенок, но допускается как более светлый, так и совсем другой цвет.

--g-color-base-brand-selection

Подложки для элементов с семантикой «выбрано»:

--g-color-base-brand-selection-hover

Цвет ховера выбранных элементов. Не так часто используется в типовых задачах, чаще – при подготовке всех стейтов для нового компонента или в прототипах.

--g-color-line-brand

Линии бренд-цвета. Selected state в карточках и табах, а также цвет спиннера.

--g-color-text-brand

Тексты бренд-цвета при использовании без подложек.

--g-color-text-brand-heavy

Тексты бренд-цвета поверх подложек. Помогают скомпенсировать падение контраста от использования подложки.

--g-color-text-brand-contrast

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

Если цвет бренда принципиально не меняет свою яркость при переключении темы, можно попробовать цвета с постоянной яркостью: --g-color-text-light-primary и --g-color-text-dark-primary. Если цвет бренда меняет яркость, можно попробовать -g-color-text-primary или --g-color-text-inverted-primary.

--g-color-text-link

Цвет ссылки.

--g-color-text-link-hover

Цвет ховера для ссылки.

--g-color-text-link-visited

Цвет посещенной ссылки.

--g-color-text-link-visited-hover

Цвет ховера посещенной ссылки.

§2. Типография

Все текстовые стили перечислены в секции Local Styles в правой колонке библиотеки. Эта секция отображается, если нет выбранных объектов (в противном случае отображаются атрибуты выбранного объекта, а не библиотеки):

Для доступа к интерфейсу редактирования текстового стиля нажмите на иконку настроек справа от названия стиля:

Стили делятся на 3 группы.

1. Header — содержит заголовки, подзаголовки и дисплейные стили.
2. Text – стили для наборного текста и подписей.
3. Misc – стили для чистого кода, а также для кода, встроенного в обычный наборный текст (inline-стили).

Для групп Header и Text можно выбрать один шрифт, но задать разный вес. Для заголовков часто используется более высокий вес относительно наборного шрифта.

Для группы Misc можно задать моноширинный шрифт. При этом следует убедиться, что inline-стили корректно отображаются при встраивании в наборный текст и базовая линия набора не смещается. Если это не так, стоит подобрать подходящее значение параметра Line Height.

У стилей допускается незначительное изменение параметров Font Size и Line Height. В разных гарнитурах высота и ширина символов может заметно отличаться, и в ряде случае это изменение требуется скомпенсировать. Следует учитывать, что определенные текстовые стили используются в определенных размерах компонентов, и при значительном изменении параметров стилей компоненты могут начать отображаться некорректно. Поэтому при любом изменении Font Size и Line Height следует проверить отображение компонентов в разных размерах.

§3. Радиусы скругления

Этот параметр настраивается в интерфейсе работы с переменными. Значения находятся в коллекции Border Radius. Это атрибут задается переменными двух групп — основной и технической:

§Основной набор

Данный набор переменных соответствует переменным в коде. Эти значения подставляются для контролов соответствующих размеров:

• --g-border-radius-xs: 3px;
• --g-border-radius-s: 5px;
• --g-border-radius-m: 6px;
• --g-border-radius-l: 8px;
• --g-border-radius-xl: 10px;
• --g-border-radius-2xl: 16px.

§Технический набор

Используется только в Figma, чтобы рассчитать радиусы скруглений внутреннего элемента в компоненте Check Button. Это переменные с припиской Inner и значения в них должны быть привязаны к значениям переменных основного набора. Чтобы вычислить значение Inner-переменной, нужно взять значение основной переменной того же размера и вычесть 3.

Например, если --g-border-radius-m: 6px, то Inner M radius = 6 - 3 = 3px.

§4. Технические цвета

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

Переменные в этой группе:

• --g-color-scroll-track;
• --g-color-scroll-handle;
• --g-color-scroll-handle-hover;
• --g-color-scroll-corner.

§Дополнительные настройки темы

§Настройка приватных цветов

При необходимости поменять конкретный оттенок цвета, чтобы привести его к брэнд-цветам, пригодится приватная палитра. Приватные цвета настраиваются в интерфейсе работе с переменными, в коллекции Private Colors.

Базовые хроматические цвета:

• синий;
• зеленый;
• красный;
• желтый;
• оранжевый;
• холодно-серый;
• фиолетовый.

Любой из них (либо все сразу) может потребоваться привести к цветам бренда. Чтобы создать палитру, готовую для передачи в разработку, можно воспользоваться скриптом, результат работы которого нужно будет перенести и в Figma.

Если был изменен фон страницы (или фон в противоположной теме), стоит сгенерировать и новые solid-оттенки для черного и белого.

При изменении приватной палитры семантические цвета автоматически обновятся.

§Настройка семантических цветов

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

Необходимо учитывать следующее:

1. Следует использовать приватные цвета для соответствующей темы.
2. Замена приватных цветов с альфа-каналом на solid-цвета (и наоборот) может вызвать проблемы.
3. Изменение семантических переменных автоматически применится к colorstyles и компонентам, в которых они используются.

§Синхронизация с разработкой

На текущий момент синхронизация тем между библиотекой в Figma и кодом производится вручную. Для передачи в разработку необходимо подготовить CSS-переменные (см. инструкцию).