КОНТУР КОМПОНЕНТ

Установка компонентов

ООО “Контур Компонентс” разрабатывает и поставляет программную платформу Contour BI для сбора, хранения, анализа и публикации данных.

Контур Компонентс – новаторская компания, ее технологические инициативы получили признание многих клиентов:

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

Продукты Contour BI используют:

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

Организации всех форм собственности – государственные  организации и предприятия, акционерные общества, частные компании, индивидуальные предприниматели.

В разных отраслях – консалтинговые компании, банки, инвестиционные агентства, страховые  компании, торговые сети, телекоммуникационные предприятия промышленные предприятия, государственные органы управления.

Важное направление деятельности компании — создание решений в области статистики. Contour BI является BI-системой Росстата.

Работая в Контур Компонентс вы всегда находитесь на острие технического прогресса, в творческой команде, ваши новаторские идеи принимаются с радостью, вы в постоянном контакте с авторитетными консталтинговыми компаниями, лучшими российскими университетами, крупными предприятиями и банками, федеральными и региональными органами госуправления.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Библиотека цветов

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

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

Некоторые цвета в библиотеке цветов имеют описательное (Black #000) название вместо функционального (Shape Default), из-за этого в библотеках возникают стили, которые нельзя сопоставить. Так, например, чёрный цвет в тёмной теме имеет название Black #1F1F1F, а в дефолтной Black #000, и из-за этого несовпадения имён не может быть сопоставлен.

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

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

Локальные библиотеки

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