Привет! Меня зовут Филипп Соломин, я дизайнер в Авито. Моя команда работает над библиотеками элементов сайта и мобильных приложений, техническими спецификациями компонентов и гайдлайнами по продукту. О том, как у нас всё устроено, я рассказываю в другой статье.
Мы стараемся придерживаться трендов в архитектурных принципах построения дизайн-систем и хотим поделиться актуальными решениями, которые улучшили опыт работы с ДС. В этой статье собрали шесть наиболее актуальных (на наш взгляд) трендов.
Что внутри:
Семантические переменные
Backend-Driven UI
UX-паттерны
Дизайн система как продукт
Брендинг дизайн-систем
Внешние контрибьюторы
Как меняются технологии дизайн систем
1. Семантические переменные
В чём суть. Чтобы описывать системные элементы, которые могут меняться, — например, цвета или шрифты — можно завести переменные. Они будут задавать функциональное назначение каждого конкретного элемента. Переменные помогают сэкономить время и упростить работу с дизайн-системой.
Как использовать. Например, у нас есть несколько оттенков красного: Red_100 и Red_10, где индекс соответствует степени прозрачности цвета. Ярко-красный мы используем для текста ошибок, а бледно-розовый — для фона сообщений об ошибках. Заведём переменные error_text и error_bg и присвоим им соответствующие значения.
Если мы решим поменять цвет текста ошибок, нам достаточно заменить значение переменной error_text с Red_100 на другой цвет. Не придётся искать стили ссылок среди всех элементов с красной заливкой.
Также переменные позволяют переключать режимы, например, со светлой темы на тёмную, используя нативные возможности Фигмы.
2. Backend-driven UI
В чём суть. Этот подход позволяет вносить изменения в интерфейс мобильного приложения через сервер. Там обрабатывается вся бизнес-логика, контент и функциональность, а «клиенту» — мобильному устройству — остаётся только получить данные и отрисовать фронтенд. В итоге новые фичи доставляются пользователям без отправки в магазин, ревью и раскатки обновления, что существенно сокращает процесс разработки.
Как используем в Авито. Внедрение BDUI позволило нам изменить подход к управлению разметкой. В результате сейчас множество изменений даже для мобильных приложений можно производить прямо в интерфейсе нашей платформы без необходимости писать код и выпускать новые версии приложений.
Больше подробностей о нашей платформе управления интерфейсами Bricks можно узнать в статье моего коллеги Алексея.
3. UX-паттерны
В чём суть. Время, когда дизайн-система описывала только компоненты и стили, кажется, прошло. Теперь крупные системы могут содержать и более глобальные инструкции по построению интерфейсов: UX-паттерны — шаблоны взаимодействия с продуктом. Например, типовые пользовательские сценарии («покупка товара через корзину») или описание общих принципов («как сообщить пользователю об ошибке?»).
Как используем в Авито. UX-паттерны помогают дизайнерам и разработчикам понять, как связаны между собой элементы сложных систем и по какому принципу происходит их построение.
4. Дизайн-система как продукт
В чём суть. Дизайн-системы крупных компаний часто перерастают внутренние потребности и становятся близки по функциональности к SaaS-продукту с собственными гайдлайнами и техподдержкой.
В обычных обстоятельствах дизайн-система не приносит бизнесу деньги напрямую. Но может экономить их через ускорение и упрощение разработки — поэтому иногда дизайн-систему публикуют как отдельный продукт для внешних пользователей. Так поступили, например, Ростелеком и Т-Банк.
ДС Авито тоже недавно вышла за рамки внутренней сети — в нашу базу знаний уже можно перейти.
5. Брендинг дизайн-систем
В чём суть. Чтобы эффективнее продвинуть крупную дизайн-систему и сделать её понятнее и привлекательнее для разработчиков и дизайнеров — внутренних и внешних — может потребоваться свой уникальный образ. Это особенно актуально для дизайн-систем, которые планируют стать отдельными продуктами.
Как и у любого продукта, у дизайн-системы есть набор правил и характеристик, которые авторы пытаются отразить через нейминг и оформление материалов. Из классных примеров — Ratio (Рамблер), Taiga UI (Т-Технологии) и Consta (Газпром).
Как используем в Авито. Наша система теперь называется AKITA — образовано от слов Avito и UI-kit. Мы считаем, что такое название лучше всего отражает тёплую и дружелюбную атмосферу системы, готовой стать открытой для всех!
6. Внешние контрибьюторы
В чём суть. Дизайн-система может восприниматься как нечто закрытое и неприступное, но это не всегда так. Любая система с укрупнением начинает испытывать ограничения в росте и развитии из-за недостатка внутренних ресурсов. В таких условиях имеет смысл обратиться к внешним разработчикам — они могут поддержать рост системы и помочь ей масштабироваться.
Как использовать. Контрибьюторами могут стать сотрудники компании, которые хотят помочь дизайн-системе ускорить достижение своих продуктовых целей, или сторонние эксперты, вносящие изменения по принципам открытого ПО.
Внешние поступления обновлений — признак роста и здоровья дизайн-системы. Если в неё хотят и могут внести изменения не только авторы, то система укрепляется.
Итог: как меняются технологии дизайн-систем
Дизайн-система перестала быть просто свёрстанным UI kit, статичным набором готовых элементов интерфейса. Теперь это полноценный продукт со своей архитектурой, командой и поддержкой пользователей.
Система может развиваться параллельно с бизнесом и сочетать в себе не только инструменты для практического применения, но и теоретическую базу, лучшие практики и инструкции.
А вы согласны с нашим выбором трендов? Какие тенденции дизайн-систем вы отмечаете для себя? Поделитесь мнением в комментариях! Там же жду вопросы по статье.
Больше о том, какие задачи решают инженеры Авито, — на нашем сайте и в телеграм-канале AvitoTech. А вот здесь — свежие вакансии в нашу команду.
