Хабрахабр

Переход от UI-кита к дизайн-системе в QIWI

Дизайн-система стала таким же модным и почти обязательным инструментом для IT-компании, как использование канбан-досок и agile. Существует множество определений дизайн-системы: кто-то понимает под ней только UI-кит, а кто-то считает, что дизайн-система обязательно включает в себя компонентную базу в коде.

От том, как мы поняли, что пора переходить от UI-кита в sketch к отображению стилей в коде — под катом.

С чего мы начинали

Сначала у нас был UI-кит в sketch для каждой из платформ — веб, iOS, Android. Мы также запустили гайд на WordPress, который описывает, как использовать и сочетать компоненты, и рассказывает, на чем базируется стиль QIWI. Использование единого UI-кита и гайдов помогает ускорить работу дизайнеров и сделать интерфейсы продуктов на разных платформах визуально согласованными.

Количество запускаемых продуктов постоянно растет, поэтому логичным шагом стало создание шаблонов для внутренних страниц. Единый UI-кит применяется в QIWI Кошельке, QIWI Копилке, QIWI Бонусе, в QIWI Кассе, QIWI Teamplay, также мы используем его при проектирование интерфейсов для новых продуктов. Шаблоны для интерфейсных страниц помогают понизить уровень расхождения в стилях и существенно ускорить дизайн-процессы.

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

Что сейчас

Мы начали наполнять дизайн-систему летом этого года. Сейчас над дизайн-системой трудятся разработчики из разных команд и все дизайнеры QIWI Кошелька.

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

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

Сейчас мы еще в пути, процесс идет, в планах на следующий год — наполнить базу основных компонентов и параллельно с этим добавлять уникальные компоненты для отдельных продуктов, как B2B, так и B2C-сегментов.

Например, в нее не входит Совесть — визуальный стиль этого продукта намеренно отличается. При этом не все продукты QIWI входят в дизайн-систему.

Как устроена работа

Когда появляется новый компонент, мы согласуем его внутри дизайн-команды и заносим в UI-кит, затем он попадает в Zeplin и в Abstract. Abstract позволяет версифицировать макеты, это своеобразный Git для дизайнеров. Из UI-кита готовый компонент попадает в репозиторий на GitHub, где его могут найти разработчики.

На очереди более крупные шаблоны и паттерны + уникальные компоненты продуктов. Сейчас дизайн-система в процессе наполнения, в ней уже есть базовые компоненты.

Дизайн-система полезна для всех участников продуктовых процессов:

  • для бизнеса — дизайн-система позволяет в 2 раза быстрее запускать новые решения и проверять продуктовые гипотезы;
  • для команды — есть единая база протестированных компонентов, что повышает скорость и качество работы;
  • для пользователей — помогает сформировать единый пользовательский опыт в семье продуктов QIWI.

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

Это поможет избавиться легаси в дизайне и коде и постоянно поддерживать интерфейсы продуктов и сервисов в актуальном состоянии. Одна из основных задач — перевести на единую систему уже существующие продукты.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть