Дизайн-система Consta

1. Создать удобный инструмент для разработки интерфейсов с самого начала и до конца: от прототипов до программной реализации.

2. Сделать разработку интерфейсов цифровых продуктов проще и дешевле со стороны дизайна и фронтенд-разработки.

3. Превратить цифровые продукты компании в единое пространство для пользователей, с уникальными, но одинаково удобными и привычными продуктами.

4. Унифицировать технологии фронтенд-разработки и упростить поддержку созданных решений и сервисов.

Figma, React JS, TypeScript, PostCSS, GitHub, Storybook

1. Объём. В дизайн-системе множество компонентов с разными модификациями, и простых, и сложных. Нужно поддерживать те, что есть, создавать новые и следить за соблюдением общих принципов, а также поддерживать соответствие сущностей в макетах и в коде. Всё это должно быть понятным и удобным для специалистов разного уровня и специализации.

2. Гибкость vs консистентность. Мы стараемся сделать все компоненты максимально гибкими и одновременно сохранить консистентность. Собираем все модификации и предоставляем удобные способы взаимодействия с компонентами средствами Figma (для дизайнеров) и гибко настроенного API (для разработчиков).

3. Уникальные специалисты. Для разработки дизайн-системы одновременно в двух реализациях нужны fullstack-дизайнеры — специалисты по UX/UI-дизайну, которые умеют писать код.

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

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

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

Компоненты — кнопки, иконки, списки, таблицы и другие элементы, из которых собирается интерфейс, реализованы в двух форматах: для дизайнеров, чтобы собирать макеты в Figma, и для разработчиков — в виде кода на React.

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

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

Подробнее на consta.gazprom-neft.ru

За 2021 год основная библиотека дизайн-системы Consta UI-Kit значительно расширилась, появилось 14 новых компонентов. Добавилась библиотека графиков Consta Charts с разными видами диаграмм — линейными, столбчатыми, круговыми. Добавлены UI-киты для разработки макетов мобильных приложений под IOS и Android. Значительно доработана документация, как в целом по дизайн-системе, так и по каждому компоненту. Созданы гайдлайны по UX/UI дизайну для использования внутри компании. В них рассказываем о лучших практиках, как работать с дизайн-системой и как встроить дизайн-систему во внутренние процессы. Всё это — по просьбам дизайнеров и разработчиков, использующих дизайн-систему, часто — с их активным участием.

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

Все регионы присутствия «Газпром нефти», подрядчики, создающие продукты для «Газпром нефти», а также вся мировая индустрия по разработке цифровых интерфейсов: дизайн-система в открытом доступе, её может использовать кто угодно по лицензии MIT (со ссылкой на разработчиков).