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

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

Мы используем восьмипиксельные библиотеки контролов в Фигме для проектировщиков и React UI для разработчиков. У библиотеки два стиля контролов — плоские и объёмные. Объёмную библиотеку поддерживаем для команд, которые еще не перешли на новую плоскую версию.

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

ОбъёмнаяПлоскаяReаct UI

Как пользоваться

Библиотеки в Фигме доступны всем участникам команды Контура. Чтобы библиотеки появились на другом аккаунте, залогиньтесь в Фигме и откройте ссылки — они появятся во вкладке с библиотеками.

Иконочный шрифт

Используется в библиотеках в Фигме. Установить шрифт можно из общей папки.

Найти и скопировать нужную иконку можно на странице в Гайдах и с помощью плагина для Фигмы. Плагин помогает искать и использовать иконки.

Этот шрифт удобен для использования дизайнерами, для фронтенда нужно использовать отдельный пакет с иконками: @skbkontur/react-icons с парковки. Документация пакета — ui.gitlab-pages.kontur.host.

Все иконки есть в библиотеке Фигмы — «Kontur UI Icons».

Поддержка

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