Кейс: разработали и внедрили единую дизайн-систему сразу для 13 сервисов
Команда Яндекс 360 рассказывает, как работала над Орбитой, и делится советами.
Полтора года назад дизайнеры и разработчики Яндекс 360 объединили усилия, чтобы создать единую дизайн-систему для всех наших продуктов: от Почты до админок внутренних сервисов. Так родилась Орбита. Её название, как и главный элемент графики, символизирует экосистему Яндекс 360, объединяющую все сервисы и продукты. Честно рассказываем, как мы выходили на свою Орбиту, какие ошибки допускали и какие прорывы совершали. Делимся советами, которые, надеемся, помогут вам, если вы только начинаете создавать дизайн-систему.
Истоки: для чего нужна дизайн-система
В цифровом пространстве Яндекс 360 — 13 сервисов для повседневных и рабочих задач (Почта, Диск, Календарь, Мессенджер, Телемост, Трекер и др.). Ещё полтора года назад у них не было единой айдентики. Пользователь, переходя из Почты в Календарь, попадал в другой визуальный мир.
Но однажды дизайнеры и разработчики из разных продуктов наконец договорились: «Давайте делать общую дизайн-систему». Задача стояла амбициозная: не просто нарисовать новую библиотеку в Figma, а создать единую концепцию для разных сервисов.
На тот момент в каждом продукте использовалось что-то своё, в том числе старые версии дизайн-систем Яндекса и собственные наработки, выросшие в изоляции. Пришлось всё выстраивать с нуля.
Было ясно: нам нужен не просто набор компонентов, а решение, которое станет:
1. Единым источником актуальных данных для дизайнеров и разработчиков.
2. Инструментом, ускоряющим работу, а не усложняющим её.
3. Живым организмом, который будет развиваться вместе с продуктами.
Цели сформулировали так:
- Снижение time to market, чтобы команды могли уделять больше времени разработке фич, а не базовых элементов.
- Создание единой, узнаваемой экосистемы, чтобы пользователи чувствовали себя комфортно в любом продукте Яндекс 360 и в любом формате: от B2B и B2C до внутренних админок.
Модель контрибьюта: каждый вносит свой вклад
Орбиту создает не отдельная группа, а целый коллектив: дизайнеры, разработчики и команда бренда работают в тесном взаимодействии, обеспечивая визуальное единство, техническую реализуемость и соответствие гайдам. Это и есть главная фишка — модель контрибьюта.
«Мы не придумывали все компоненты сами. Вместо этого создали процесс, при котором дизайнеры из продуктовых команд (Почты, Диска и др.) приносили в Орбиту свои лучшие, уже опробованные в бою наработки. Мы их расширяли до всех возможных (в том числе крайних) кейсов, готовили необходимую техническую документацию. Готовый, упакованный компонент мы „сеяли“ обратно во все продукты. Так постепенно собралась библиотека компонентов».
Мы стали мостом между командами. Это позволило нам невероятно быстро собрать две большие библиотеки — в Figma и в коде. Плюс такого подхода — скорость работы и вовлечение всех дизайнеров. Минус — неизбежные ошибки консистентности на старте, которые мы спокойно и методично устраняли.
Figma, Storybook и дизайн-токены: магия автоматизации
В основе технической инфраструктуры Орбиты — мощная связка инструментов:
- Figma — единое пространство для дизайнеров, где «живут» все компоненты и документация.
- Storybook — виртуальная витрина компонентов для каждой платформы (web, iOS, Android, Windows, macOS).
- Дизайн-токены — гарантия единства визуального языка (от цвета и отступов до анимации) на всех платформах.
Мы автоматизировали процессы и создали:
- Плагин для проверки иконок. У нас в системе более 1400 иконок разных размеров. Раньше дизайнер приносил новую иконку и мы вручную проверяли её на технические ошибки: незамкнутый контур, неправильный размер, некорректный нейминг. Теперь дизайнер сам запускает плагин в Figma, который проверяет иконку и указывает на ошибки. Это экономит время и избавляет от рутины.
- Плагин для автоматической выгрузки дизайн-токенов из Figma в код. Дизайнер меняет цветовую палитру в Figma, а плагин автоматически преобразует изменение в код, который тут же улетает в репозитории продуктов. Магия!
«В планах — вообще убрать рутину. Мы хотим автоматизировать создание документации с помощью нейросетей (уже используем ИИ для генерации первых черновиков справки по компонентам) и освободить время дизайнеров на исследования и проверку гипотез».
Стандарты и контроль: дисциплина во благо
Наша задача — избежать креатива в вакууме, сделать все продукты консистентными и узнаваемыми. Но чтобы система работала, нужны чёткие правила. На примере иконок расскажем, почему важен единый подход.
Мы прошли болезненный процесс объединения двух больших наборов иконок. В итоге автоматизировали его и сэкономили около двух недель человеко-часов. Теперь у нас есть единый пакет иконок пяти стандартных размеров (8, 12, 16, 24, 32 px). Если дизайнер просит иконку размером, скажем, 30 × 30, предъявляем «чемоданчик аргументов»:
- У нас есть 13 продуктов. В десяти из них эта иконка имеет размер 32 × 32. Ты готов(а) обойти все десять команд и согласовать с ними изменения размера ради твоего исключения?
- Иконка — часть размерной сетки. Добавление нестандартного размера ломает всю систему и приводит к визуальному хаосу и техническим конфликтам.
А ещё фича просто не уйдет в разработку, если для её реализации дизайнер использовал компонент не по гайдам или самовольно изменил его. В этом случае придется переработать макет, используя существующие возможности Орбиты, или доработать компонент у нас — но уже для всех пользователей дизайн-системы.
Команда: как повысить вовлечённость
Любое изменение приживается не сразу, это нормальный процесс. Чтобы сократить негатив от внедрения, было решено активнее привлекать команды к созданию и развитию дизайн-системы.
- Мы проводили воркшопы и презентации, где подробно объясняли, зачем это нужно. Не «начальство сказало», а «ваша жизнь станет проще, а продукты — лучше».
- В каждой команде мы находили тех, кто горел идеей единообразия. Они становились нашими амбассадорами и помогали продвигать Орбиту внутри своих продуктов.
- Мы наглядно показывали, что использовать Орбиту экономически выгодно. Дизайнеры получают готовые, протестированные компоненты. Разработчики — готовый код. Продолжительность процесса Delivery сокращается в разы.
Сейчас Орбитой пользуются более 200 человек, при этом они чувствуют себя частью общего процесса. Мы считаем, что это классный результат.
Фокус на доступности: создание продукта для всех
Одна из наших ключевых ценностей — доступность (a11y). Для людей с ограниченными возможностями мы увеличиваем шрифты, заботимся о цветовом контрасте, используем понятную семантику, aria-атрибуты, логичный порядок фокуса и навигацию с клавиатуры.
Метрики и будущее: как измерить эффект от внедрения
Измерить прямой эффект от внедрения дизайн-системы в деньгах или сэкономленных человеко-часах сейчас сложно. Пока мы не можем сказать: «Было 100 условных единиц, стало 50».
Но у нас есть несколько точек опоры:
- Аналитика в Figma и коде. Мы смотрим, как растет использование наших компонентов в макетах и репозиториях. Если графики ползут вверх — система жива и полезна.
- Метрика сложности компонента. Мы разработали внутреннюю метрику, которая оценивает сложность компонента (количество свойств, вариативность). Наша цель — упрощать сложные компоненты, чтобы уменьшать time to market для их интеграции.
Наша ценность пока измеряется в менее осязаемых, но не менее важных вещах: это скорость работы, консистентность и масштабируемость.
Советы тем, кто в начале пути
Чтобы вы не повторяли наших ошибок, мы хотим дать вам несколько советов.
- Не делайте лишнего. Руководствуйтесь принципом бритвы Оккама. Не создавайте сотню вариантов кнопки (на будущее). Расширяйте компонент только тогда, когда в этом есть потребность.
- Решения должна принимать небольшая группа. Собрать 30 дизайнеров, чтобы выбрать одну кнопку, — путь в никуда. Выделите ответственных — тех, кто будет принимать аргументированные решения.
- Думайте о доступности сразу. Серьёзно. Сэкономите себе годы жизни.
- Вовлекайте, а не заставляйте. Ваша задача — сделать так, чтобы командам было выгодно и удобно пользоваться системой. Ищите евангелистов, показывайте пользу, собирайте обратную связь.
Сегодня Орбита — это не просто библиотека компонентов. Это живая, дышащая система, которая стала фундаментом для всех сервисов Яндекс 360. Это мост между дизайнерами и разработчиками, между разными продуктами и командами.
На этом мы не остановились. Продолжаем автоматизировать и упрощать, чтобы сделать работу наших коллег более осмысленной и продуктивной. И если наша история поможет вам избежать хотя бы пары ошибок — мы будем считать, что эта статья полезна.