Всем привет! Я Сережа Осипов – лид направления дизайн-системы в T2. В этой статье расскажу о том, с чем мы пришли к моменту разработки дизайн-системы, какие сложности у нас были, из чего состоит сейчас наша ДС и как мы внедрили ее в нашу работу.

Раньше я рассказывал о процессах в командах дизайна и разработки, которые надо было построить, чтобы переход был максимально комфортным и эффективным для обеих сторон - тут. Больше о работе команды рассказываем в канале T2 Digital.

До внедрения дизайн-системы

Рассинхрон разработки и дизайна

Отсутствие полноценной дизайн-системы привело к проблемам синхронизации между дизайном и разработкой. В дизайне использовался UI-kit с устаревшими элементами, который было трудно поддерживать. У разработчиков также имелся набор компонентов, однако каждая команда использовала свои собственные решения: одна группа работала над продуктом MiXX, другая занималась витриной тарифов и главной страницей. Из-за этого при получении макетов на ревью готовый результат часто значительно отличался от того, что предлагал дизайнер.

Разнородность платформ

Разработка велась без единой дизайн-системы, что привело к созданию двух совершенно различных UI-kit'ов для веб-версии и мобильного приложения. Это стало причиной того, что мобильное приложение и сайт выглядели как два независимых продукта, никак не связанных друг с другом.

Сложности масштабирования

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

Разнообразие графических стилей

Использование разных UI-kit'ов затрудняло поддержание единого стиля графики. Это создавало дополнительные сложности при создании и обновлении интерфейсов.

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

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

Архитектура дизайн-системы

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

В нулевой слой Foundation UI заложили токены для цветов, текстовых стилей, размерной сетки. Следующим слоем T2D2 UI сформировали токены для проектирования компонентов, что позволяет контролировать каждый из них отдельно. Большой плюс данного решения в том, что изменения в конкретном компоненте влияют только на него и не затрагивают остальные. В параллельном слое T2D2 Styles сформировали набор токенов для применения продуктовыми дизайнерами в рабочих задачах. Кроме того, эта библиотека используется разработкой, что позволило разработчикам и дизайнерам понимать друг друга.

Block library - библиотека паттернов, контролируемая дизайнерами. Эта библиотека упрощает работу с ui-kit’ом. В ней зафиксированны паттерны, которые формируют продуктовые дизайнеры. Block library также снижает нагрузку на команду дизайн-системы - не приходится создавать множество подобных элементов. По сути, это витрина паттернов.

Как мы работали?

Получение основных цветов от маркетинга

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

Новые шрифты от маркетинга

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

Сборка набора компонентов

Были созданы компоненты, идентичные для обеих платформ, с учётом их специфики. Для них была разработана подробная документация как для дизайнеров, так и для разработчиков.

Искусственный интеллект в дизайн-системе

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

Нейминг переменных

Сначала мы пробовали использовать ИИ для генерации названий токенов, но поскольку разработка и легаси всего продукта играли ключевую роль, окончательные имена определялись совместно с разработчиками. Впоследствии управление токенами было организовано через Notion, а недавно переехали в buildin.ai.

Документация

Документирование компонентов с использованием ИИ возможно, если нет сложных сценариев использования. Однако на практике этот метод оказался неэффективным.

Картинки для документации

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

Итоговый результат

Благодаря внедрению дизайн-системы удалось достичь единства визуального стиля для веб-версии и мобильного приложения, мы уменшили время на разработку и дизайн различных задач. Еще наличе рабочей дизайн-системы позволяет масштабировать ее на другие наши проекты. Хорошим примером масштабируемости является виртуальная витрина — сенсорный экран, установленный в салонах T2, аналогичный тем, что используются в кафе быстрого питания.