Признайтесь, вы тоже каждый раз делаете сразу несколько макетов под разные платформы и в ужасе ждете от них обновлений, потому что опять нужно всё перестраивать под новые гайды? Тогда это статья для вас.
Всем привет. Мы — продуктовый дизайнер Лена и дизайн-лид Артур — отвечаем за визуальное оформление продуктов Garage Eight. Да, мы тоже устали делать одно и то же по три раза. Поэтому в прошлом году на одном из проектов решили перейти на единую кросс-платформенную дизайн-систему.
Переход не был быстрым и легким, и без минусов тоже не обошлось. Но плюсов оказалось куда больше. К примеру, на базе общей дизайн-системы маркетинговые дизайнеры создали конструктор лендингов: теперь посадочные страницы выглядят так же, как основные продукты, и выпускаются в 6 раз быстрее. А консистентность дизайна подняла конверсию в несколько раз. Но обо всем по порядку.
Вместо трех макетов и десятков мелких расхождений: как мы пришли к кросс-платформенной дизайн-системе
Еще полтора года назад у нас на проекте было пять дизайн-систем: для web, для Android, для iOS и далее по списку. Над разными их кусками работали 26 команд. Под каждую платформу была своя библиотека компонентов, которая хранилась отдельно от остальных.
Какие бы обновления продукта мы ни выпускали, дизайнеры каждый раз делали сначала макет для одной платформы, потом пересобирали для остальных. При том, что элементы дизайна были плюс-минус одинаковыми, выходило, что мы несколько раз делали, по сути, одно и то же.
Из-за того, что над дизайном разных платформ работали разные команды, в библиотеках появлялись незначительные расхождения — от степени скругления кнопок и разных шрифтов до отдельных компонентов, которые могли добавить в версию для iOS, но не добавили для Android. Нестыковки стали накапливаться. Как результат — неконсистентность дизайна и отсутствие единого клиентского пути. Понятие бренда стало размываться. Мы же хотели, чтобы пользователь узнавал нас независимо от того, на какой из платформ он сегодня работает: web или приложение, Android или iOS, — и не ощущал между ними разницы.
Продуктовый дизайнер Garage Eight Лена Шевченко: Весной 2024 года мы с коллегой провели аудит продукта. На отдельных экранах не хватало второстепенных цветов и слишком много акцентов, поддержка светлой и темной тем была реализована частично, а компоненты на разных платформах выглядели по-разному. Мы просто прошлись по экранам продукта и заскриншотили проблемы. По итогу собрали презентацию, показали ее разработчикам и дизайнерам и получили позитивный отклик. Тогда и решили переходить на единую кросс-платформенную дизайн-систему. |
После аудита инициативная группа из двух дизайнеров приступила к созданию нового визуального концепта: стали готовить токены цветов, типографику — словом, ту самую базу, из которой будут строиться компоненты новой дизайн-системы.
Кросс-платформенная дизайн-система мечты выглядела для нас примерно так:
Единая библиотека компонентов, одинаковых для всех платформ.
Единая точка хранения компонентов.
Единый клиентский путь — от первого касания до работы с продуктом на разных платформах.
На первых порах проект дизайнеры делали факультативно, в свободное время. Оставалось убедить клиента в ценности дизайн-системы и получить ресурсы на разработку.
Активно команда разработчиков подключилась к проекту в IV квартале. За последние месяцы 2024 года мы собрали цвета, типографику, input, и качество дизайна начало возрастать. В итоге мы заложили работу над дизайн-системой в бюджет на 2025 год.
Как устроена наша дизайн-система
По сути, кросс-платформенная дизайн-система — это конечная кодовая база, которую использует вся компания. Она включает полный набор дизайнерских решений, из которых разработчики потом смогут собирать готовые интерфейсы. Благодаря дизайн-системе кнопки или более простые элементы интерфейса разработчики могут сделать сами, без привлечения дизайнера.
Базовые элементы нашей дизайн-системы: цвета, типографика, отступы, система размерности. Мы на берегу определяем, какие у нас будут текстовые стили и как мы планируем их использовать. У нас есть отдельно система заголовков, система основного текста и правила, которые диктуют, какой заголовок с каким боди-текстом сочетать.
Все наши стили обвешаны токенами: цвет, размер текста, межстрочное расстояние, толщина текста — у всего есть свои значения. Токены хранятся в Figma-файле. Это единый источник правды, где лежат все стили продукта. Для разработчиков токены мы экспортируем в json, с которым они могут работать.
Токены есть у типографики…
Есть у размеров…
Есть у цветов.
После каждого обновления интерфейса мы вручную выгружаем json, а дальше всё происходит автоматически. То есть разработчики не описывают элементы вручную: для всего есть свой набор токенов. Так выглядит код одного и того же элемента для разных платформ:
Мы пока не перешли на кросс-платформенный фреймворк. Тем не менее разница в стеках сократилась. То есть мы стандартизировали разработку интерфейсов не только на уровне дизайна и сейчас постепенно вычищаем элементы, которые остались от предыдущей версии.
И в Figma, и в коде у нас появились одинаковые элементы, которые связаны друг с другом. И если это кнопка, то она везде одинаковая, и когда мы используем ее где угодно, всегда получается одно и то же.
Сравниваем ДО и ПОСЛЕ внедрения единой дизайн-системы
Вместо трех макетов для разных платформ — один. Раньше для каждой платформы была своя библиотека компонентов. В дизайне кнопка могла выглядеть для всех платформ одинаково, но на деле это были три разных компонента, и под каждую платформу нужно было собирать свой макет. Сейчас мы сделали единую библиотеку компонентов для всех платформ, и работы у дизайнеров стало втрое меньше. Теперь они собирают один макет вместо трех.
Банально: на создание баннеров для web теперь уходит вдвое меньше времени, потому что заголовки с десктопной версии можно адаптировать под мобильную, просто поменяв свойства.
Консистентность и единый пользовательский опыт. У нас на всех платформах одинаковые кнопки, одинаковый input. Мы делаем это умышленно, потому что хотим управлять тем, как пользователь воспринимает бренд. Он сможет быстрее ориентироваться в продукте, когда интерфейс выглядит одинаково на всех платформах. Неважно, с web он зашел или с Android, он понимает, что это продукт одного и того же бизнеса.
Переход с темной на светлую тему без отрисовки. Теперь дизайнерам не нужно собирать два разных макета под темную и светлую темы. Они работают только со светлой, а под темную адаптируют с помощью свойств. За счет изменения значений можно получить нужный компонент без ручной сборки.
Ускорение маркетинга. Помимо продуктовых, в команде есть еще маркетинговые дизайнеры, которые работают с продуктом с другой стороны. Раньше эти два направления были словно две отдельные вселенные. На этапе обсуждения кросс-платформенной дизайн-системы мы поняли, что хотим единый пользовательский опыт с первого касания. Договорились, что будем использовать одну дизайн-систему и создавать общие компоненты как для продукта, так и для маркетинга.
В итоге благодаря конструктору баннеры для маркетинга стали делать в несколько раз быстрее, а количество итераций сократилось в 150 раз. Лендинги теперь грузятся в 6 раз быстрее, а уровень конверсии, благодаря консистентности дизайна, вырос в несколько раз.
Независимость от обновлений. Рынок давно поддерживает множество разных дизайн-систем под разные платформы. Выходит новый iPhone, обновляются гайды — и дизайн-команды начинают судорожно всё переделывать под новые правила. Выходит новый Material от Google с новым пикселем — и происходит то же самое. В итоге компании сидят и с ужасом ждут обновлений платформ. Такой подход — не самый правильный. Он диктует зависимость дизайна от внешних факторов, на которые невозможно влиять.
Мы отказались поддерживать отдельно iOS, отдельно Android, отдельно web. У нас единая кросс-платформенная дизайн-система, в которой каждый элемент создается под все платформы разом. Он распределен по кодовым базам — его могут использовать все разработчики, все дизайнеры, и он везде будет одинаковым.
Теперь нас меньше волнуют обновления и изменения платформ, потому что мы поддерживаем собственный визуальный язык под все платформы и кодовая база тоже стала единой.
Сокращение time-to-market до десятков раз, вот только не сразу. С введением дизайн-системы задачи, использующие уже готовые компоненты, выполняются в разы быстрее, количество расхождений в дизайне уменьшается. Это приводит к значительному снижению time-to-market — иногда в десятки раз. Но такой эффект достигается со временем, когда система наполняется и стабилизируется.
Грустная часть этой истории с единой дизайн-системой в том, что новые компоненты, которые еще нигде никогда не использовались, становится делать дороже и дольше. К примеру, новый элемент интерфейса для ввода номера телефона или верификации полей может занимать 1–4 дня, тогда как по старой схеме — 4–14 дней.
Итог
Мы разработали базовые стили для всех компонентов на все платформы и сейчас находимся на стадии наполнения дизайн-системы базовыми компонентами. Десять компонентов полностью готовы, а мы в процессе наполнения. Скоро к кнопкам и полям добавятся попапы, выпадающие меню, снекбары.
Кросс-платформенная дизайн-система — это инструмент снижения потерь, который мы в мелочах начинаем применять и видеть результаты. Теперь мы можем более качественно управлять изменениями в бизнесе.
Продуктовый дизайн-лид Garage Eight Артур Арсёнов: Вышло новое устройство, новая платформа. Применяя те же принципы и инструменты, которые уже заложены в дизайн-систему, мы быстро раскатываемся, а пользователь получает консистентный опыт. Свои часы, свои телефоны, свои приложения — клиент всегда будет в нашей среде, управляемой нами. Теперь на всех платформах мы выглядим одинаково. Когда выходят обновления, мы с помощью токенов быстро обновляем интерфейс, чтобы не выглядеть устаревшими, и бренд не ловит от этого негативных эффектов. С помощью токенов можно выпустить совершенно другой продукт, который будет кардинально отличаться от текущего, но использовать ранее разработанные элементы. И вся переделка займет три дня. А небольшие изменения интерфейса мы можем выкатывать даже без обновления приложения со стороны пользователей. |
Насчет удобства такого подхода для дизайнеров: мы решили, что готовы к тому, что это может быть непривычно. Зато таким образом мы добиваемся консистентности дизайна на всех платформах и создаем единый пользовательский опыт.
