Как дизайн-система Consta помогает создавать новые интерфейсы из готовых компонентов

А ещё — поддерживать единый опыт продуктовых команд в дизайне и коде

Два года назад «Газпром нефть» первой из промышленных компаний создала бесплатную и открытую для всех дизайн-систему Consta. Рассказываем, как она выросла за это время и как помогает ускорить разработку цифровых продуктов разного уровня: от простых сайтов до сложных сервисов.

Раньше интерфейсы продуктов компании выглядели неоднородно. При разработке использовались разные стеки и UI-библиотеки. Из-за отсутствия единого опыта, в каждом новом проекте всё создавалось фактически с нуля. Чтобы решить эту проблему, весной 2020 года команда дизайнеров и разработчиков из «Газпром нефти» начала создавать собственную дизайн-систему — Consta. А ещё через год вышли в свет первые продукты, интерфейсы которых были полностью сделаны на ней. Что же представляет собой дизайн-система Consta?

Набор библиотек готовых интерфейсных компонентов.

Дизайн-система Consta — это набор библиотек компонентов с открытым исходным кодом на React, которые можно переиспользовать для интерфейсов любых сервисов и приложений. Компонентный подход к разработке позволяет продуктовым командам создавать консистентные интерфейсы разных продуктов, снижать затраты и ускорять циклы релизов, а также быстро собирать и тестировать прототипы на пользователях.

Дизайн-система Consta используется при создании проектов разного масштаба — от инструментов мониторинга и управления оборудованием до интранет-порталов и личных кабинетов — в широком спектре отраслей. На её компонентах разработаны интерфейсы более 180 цифровых продуктов «Газпром нефти», включая флагманские проекты в области искусственного интеллекта. Стоит отметить, что можно не только создавать на Consta новые интерфейсы, но и переводить на неё уже существующие сервисы.

В 2023 году ИТМО реализует с помощью Consta редизайн системы прокторинга ITMOproctor. Использование компонентов дизайн-системы позволит сэкономить время фронтенд-разработки и переработать сложный интерфейс с большим количеством элементов. Сделать его более удобным, сохранив при этом исходную функциональность программы.

Стек технологии React.js и дизайн-инструменты. Команда Consta создаёт компоненты с гибким API, реализованные в удобных для дизайнеров и разработчиков форматах — библиотеках в Figma Community и репозиториях с кодом на React. Такой подход к разработке и дизайну позволяет не только минимизировать количество конфликтов требований, но и соблюдать единое соглашение о создании компонентов дизайн-системы.

Гибкая тематизация. Компоненты дизайн-системы выглядят нейтрально. Есть три цветовые схемы: светлая, тёмная и акцентная. Можно создать и свою тему, прописав в переменных базовые цвета — остальные подбираются автоматически. В одном продукте можно использовать несколько тем как для всего интерфейса, так и для отдельных его блоков.

Все параметры темы описаны с помощью переменных CSS Custom Properties с семантическими именами. Значения цветов, отступов и размеров типографики берутся из темы, а значит, легко меняются вместе с ней. Например, переменная --color-typo-link не должна использоваться для фона блока, а переменная --color-bg-warning используется только для отображения статуса.

Кастомизация и поддержка. Пользователям доступны готовые блоки, большой набор адаптивных компонентов, а также графиков, адаптеров и мобильные UI-киты. Гибкость в их настройке и оперативная поддержка команды Consta, позволяют собирать кастомные блоки и элементы интерфейса, сохраняя при этом консистентность всех продуктов компании.

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

Постоянное развитие. Всё больше новых проектов «Газпром нефти» создаётся на Consta. Дизайн-система постоянно развивается, привлекая новых внешних пользователей и контрибьюторов, которые принимают участие в разработке.

На основе компонентов Consta участниками конкурса St. Petersburg Young Design 2022 был разработан интерфейс VR-тренажёра для операторов беспилотников. В системе можно создавать полётные задания, наблюдать за процессом и корректировать его, а также получать аналитику по полёту.

Внедрение Consta позволило оптимизировать процесс разработки продуктов «Газпром нефти» и поддерживать их единообразие, сократить время на тестирование гипотез, а также снизить трудозатраты фронтенд-разработчиков в среднем на 20%, а дизайнеров — на 40%.

За два года дизайн-система прошла путь от небольшой библиотеки компонентов до целого набора библиотек и собственного портала с документацией на русском языке. Основную библиотеку в Figma загрузили уже более 10 тысяч раз. С момента публикации она дважды оказывалась в списке трендов Figma Community.

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

Телеграм-канал с обновлениями Consta News и чат для комьюнити Consta Chat