Одна система токенов для трёх дизайн-систем

Компанияecom.tech, ex. Samokat.tech

Годы2024–2026

РольЛид дизайн-системы

ПродуктыСамокат, Мегамаркет

70+бэк-офисных продуктов на дизайн-системах

3 → 13 дизайн-системы на одной системе токенов

8,6NPS у Rampa, лучший из трёх

40%быстрее выходят фичи

Контекст

ecom.tech делает ИТ-решения для ритейла: на них работают Самокат и Мегамаркет. Внутри компании: 70+ бэк-офисных продуктов для сотрудников, складов и продавцов. Бэк-офис не только внутренний: приложения для разных пользователей, от курьеров и кладовщиков до интерфейсов управления дронами. На базе бэк-офисной дизайн-системы строилась дизайн-система для CX и B2C

Я вёл дизайн-системы бэк-офиса. У каждой свой стек и свои команды. Работал вместе с Андреем Зориным, директором продуктового дизайна и владельцем дизайн-систем

FunboxReact Native

RampaReact

SpineVue · SwiftUI · Compose

единая система токенов

Карта дизайн-систем ecom.tech и их стеков — Дизайн-системы ecom.tech: бэк-офис и CX

Проблема

3 независимые дизайн-системы давали 4 проблемы: UX и UI расходились между продуктами, решения не согласовывались, поддержка стоила дорого, командам было сложно переходить между системами

В макетах много старых компонентов, которые больше не поддерживаются
Компоненты делают «на коленке», без токенов и ревью
Часть компонентов есть в дизайне, но нет в разработке
Нет единого подхода к оформлению файлов в Figma

Подход

Не сливать 3 системы в одну, а дать им общий фундамент. Токены: единый язык между дизайном и разработкой и между самими дизайн-системами. Компоненты остаются в своих стеках, но описываются одними и теми же токенами

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

Система

Семантика цвета

Имя токена собирается из 6 частей. Обязательны только категория и свойство, остальное добавляется по необходимости

--colorкатегория-notificationспециализация-backgroundсвойство-brandроль-strongвариант-hoverсостояние

Структура семантических токенов цвета: категория, специализация, свойство, роль, вариант, состояние — Все значения каждой части имени токена

Из этих частей получаются токены вроде --color-background-brand-strong-hover или --color-text-on-strong. Специализация нужна для исключений: например, в тёмной теме фон нотификации темнее, чем у других компонентов

Размеры, отступы, радиусы, шрифты

space-1 … space-11отступы от 4 до 80 px

size-1 … size-11размеры от 4 до 80 px

radius-1 … radius-4, radius-max4, 8, 12, 16 и 800 px

button-radiusспециальный токен: 8 px по умолчанию, 800 px в продуктах мерчантов

header-1 … header-3один токен, свой шрифт в каждой системе: SF Pro Display, Roboto, MegaSans

Темы

Перестроили токены под несколько тем и вынесли все темы на отдельную страницу в Storybook. К токенам написали документацию для всех участников команд

Анимация

До лета 2024 года анимации в дизайн-системах не было. Завели токены функций переходов и таймингов и описали, когда что применять. Анимированные компоненты, переходы и микровзаимодействия появились в Funbox, Rampa и Spine