Библиотеки компонентов

Основной инструмент для проектирования интерфейсов в Контуре — Фигма. Ей пользуются больше 400 человек, делая больше 60 проектов.

Мы используем и поддерживаем две библиотеки контролов: в Фигме для дизайнеров и React UI для разработчиков.

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

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

Для разработки есть еще несколько npm-пакетов которые реализуют правила Контур.Гайдов в коде. Например, такие как библиотека валидаций, или более крупные и специфичные компоненты, как шапка продукта.

Все актуальные библиотеки помечены значком ⚡️ и автоматически включены в файлах, создаваемых в проектах Контура в Фигме:

⚡ Kontur UI Icons — библиотека иконок для интерфейса. Сейчас находится в процессе активного наполнения и добавления новых иконок.

Для фронтенда нужно использовать npm-пакет с иконками: @skbkontur/icons с парковки. Документация пакета с иконками.

⚡️ Kontur Colors и ⚡️ Kontur UI Typography — библиотеки, реализующие внешний вид контролов: цвета́ и текстовые стили в соответствии с брендбуком Контура.

Тёмная тема реализована отдельной библиотекой в фигме, своей структурой полностью повторяющая дефолтную библиотеку.

Также собрана отдельная библиотека цветов для тёмной темы, которая своей структурой аналогична обычной библиотеке цветов.

Чтобы перевести макет в тёмную тему нужно заменить библиотеки использующиеся в макетах.

Замена библиотек произойдёт во всём файле, поэтому важно, чтобы она происходила в отдельном документе.

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

В настройках библиотек кликните на строку ⚡ Kontur UI Modern Layout, и нажмите «Swap library». В качестве новой библиотеки выберите ⚡ Kontur UI Modern Layout Dark.

Фигма автоматически сопоставит компоненты из двух библиотек для замены.

Замена контролов займёт немного времени, но оно может увеличиться, при большом количестве контролов в файле.

Все изменения в контролах сохраняются при их замене. Это значит, что вы не потеряете свои тексты, но если вы меняли цвета, то они сохранятся при замене, и придётся вручную сбрасывать их до дефолтных.

Для перевода макета в тёмную тему недостаточно замены одних контролов. В макетах остаются цвета не привязанные к компонентам, например — цвета фона страниц, откреплённые контролы или отдельные элементы на страницах.

Для замены библиотеки цветов нужно повторить те же шаги по замене библиотек, заменив ⚡️ Kontur Colors на ⚡ Kontur Colors Dark.

Так как Фигма сопоставляет стили для замены по их названиям, не все стили могут быть заменены автоматически. Более того, часто в макетах возникают ситуации, что цвет откреплён от стиля.

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

Откреплённые цвета можно до замены библиотек привести к существующим стилям плагином Style Organizer. Он сканирует цвета на странице и предлагает объединить их со стилями на основе уже использующихся на странице.

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

При подборе новых цветов проверяйте контрастность с цветами фонов тёмной темы:

Если вы знаете как сделать библиотеки лучше, есть вопросы или что-то сломалось в библиотеках — пишите на guides@kontur.ru.