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

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

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

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

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

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

Библиотеки в Фигме

Библиотеки цветов, стилей типографики и контролов

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

Библиотека иконок

⚡️ Kontur UI Icons — библиотека иконок для интерфейса.

Все интерфейсные иконки продублированы в файле иконочного шрифта. Скачать файл шрифта, найти и скопировать символ нужной иконки можно на странице интерфейсных иконок в Гайдах.

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

Типографика и цвета

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

Поддержка

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