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

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

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

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

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

Что такое Consta

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

Зачем она нужна

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

Кому будет полезна

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

<span><span>Рисунок 1. Интерфейс системы прокторинга до редизайна </span></span>
Рисунок 1. Интерфейс системы прокторинга до редизайна 

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

Рисунок 2. Интерфейс системы прокторинга после редизайна
Рисунок 2. Интерфейс системы прокторинга после редизайна

Разработчики Consta придерживаются следующих принципов:

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

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

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

Рисунок 3. Интеллектуальная система оценки игроков ФК «Зенит» на дизайн-системе Consta
Рисунок 3. Интеллектуальная система оценки игроков ФК «Зенит» на дизайн-системе Consta

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

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

Рисунок 4. Витрина компонентов дизайн-системы Consta
Рисунок 4. Витрина компонентов дизайн-системы Consta

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

Рисунок 5. Макет интерфейса VR-тренажёра. Автор: Вероника Малышева (СПбПУ), победительница номинации от компании «Газпром нефть».
Рисунок 5. Макет интерфейса VR-тренажёра. Автор: Вероника Малышева (СПбПУ), победительница номинации от компании «Газпром нефть».

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

Что в итоге

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

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

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

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

2828
28 комментариев

Хрен с вашей Consta, мне больше интересно какой мудак в вашем газпроме придумал автоматический выход из аккаунта в приложении АЗС ГПН? Почему я каждый раз в 2-3 месяца должен стоять на кассе и ждать пока приложение авторизацию пройдёт? Стоять ждать пока смс придёт и задерживать очередь на кассе? Иногда код может не приходить и 2-5 минуты. Мнимая безопасность, банки не разлогиниваются, а ваше приложение всё время разлогинивается. Сделайте чтобы оно не разлогинивалось и если нужно, прикрутите фейс айди для опять же мнимой безопасности.

7
Ответить

Так это специально сделано, чтобы юзер не дождался и забил на бонусы.

3
Ответить

Добрый день, Александр. Мы сожалением что вы получили такой опыт, но разработчики сделали это для вашего удобства и безопасности. Сейчас мы можем посоветовать вам сменить заправочную станцию на другой бренд, который не делает бензин из газоконденсата.

1
Ответить

Вообще меня забавляет, как крупная гос компания, пользуется АПИ, запрещённой в России организации Мета.

3
Ответить

А то, что замсекретаря совбеза или кто он там, регулярно гадит во вражеский твиттер не смущает?))

1
Ответить

Отечественный tailwindcss?

2
Ответить

Да таких мильон.

1
Ответить