Дизайн-система для tutu.ru

Как это устроено в Figma

Конечно, есть файл с компонентами. Помимо этого:

• Docs — подробная документация, где описываем лейауты и логику работы компонентов
• Patterns — куски флоу и логики, о которых договаривались с продуктовыми командами
• Icons & images — иконки и графический контент (например, логотипы и флаги стран)
• Mail kit — усеченный по компонентам набор для email-рассылок, при этом он использует те же дизайн-токены.

С чего начать?

Уже классика в моих проектах. Это страница с главными ссылками и информацией о продукте: кто дизайнеры, какое покрытие компонентами, какие библиотеки нужны для работы и где они находятся. Плюс витрина компонентов: если пользователь не знает название нужного компонента, он может найти его визуально и перейти на нужную страницу.

Дизайн-токены

Дизайн-токены в виде JSON-файла на GitHub мы доставляли через Tokens Studio в Figma. В библиотеку компонентов на Stash — вручную, так как тогда у Tokens Studio еще не было поддержки (сейчас уже есть). При этом в iOS и Android токены передавались автоматически.

Автоматизированный процесс передачи токенов нам сэкономил много времени, как можно увидеть, дизайн-токенов было много:)

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

Все эти токены нужны для работы модов. Например: смена бренда и светлой/темной темы.

Или смена контрастности элемента.

Конечно, есть и примитивы, и мы всегда знаем, на какие примитивы ссылаются наши семантические токены (обозначены иконками). У нас светлая и темная темы задаются на уровне примитивов, поэтому, чтобы не подбирать каждый раз, какой цвет использовать в темной теме, при создании компонента мы просто назначаем цвет из светлой темы и получаем адекватный вариант в темной.

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

Процессы

Дизайн-система — это не только компоненты и токены, но и процессы, люди, договоренности. В Tutu дизайнеров было около 30 и х2-х3 разработчиков, и со всеми на разных этапах нужно было договариваться, а часто и продавать дизайн-систему через удобство, без административного ресурса. Для каждого решения у нас был этап discovery: мы обсуждали его результат с другими дизайнерами ДС, затем презентовали его дизайнерам продуктов, продавали решение, выставляли на голосование, если было несколько вариантов, показывали разработке и ревьюили результат разработки.

Компоненты

Kite — это более 60 компонентов и система модов, которая позволяет менять тему, бренд, контрастность и адаптив.