Дизайн-система April
Design system
UI
Мой приход в компанию совпал со стартом больших проектов b2c, а также бэкофиса. Для ускорения разработки и дальнейшего поддержания работы компонентов я предложил создать единую библиотеку компонентов (в последствии это перерастет в полноценную ДС).
Доглосрочные перспективы
Помимо упрощения работы фронтов мы получаем единый пользовательский опыт взаимодействия с нашими продуктами
Зачем нам полноценная дизайн-система?
Для возможности быстрой масштабируемости мною было предложено строить компоненты на основе следующих групп токенов:
—
Spacing
—
Radius
—
Border
—
Color (подробности далее)
—
Typography
Токенизация
Примеры токенов
Вариации дизайн-системы
Токены позволили максимально гибко переиспользовать ДС для изменения визуального языка. Ниже приведен пример формы, собранной на различных вариациях ДС двух независимых проектов:
В процессе создания палитры я остановил выбор нейминга токенов из 2 типов:
—
Создание контекстного (семантического) нейминга типа «--color-button-neutral-hovered»
—
Применение универсального «--color-neutral-80»
Конечно, первое решение более гибкое, так как позволит в последствии перекрашивать интерфейс поэлементно, но есть одна проблема…
Недостаток семантического нейминга
Контекстный нейминг дико раздувает количество токенов, из-за чего могут будут совершаться ошибки (разработчик/дизайнер перепутает группу токена). Из-за этого при необходимости точечно перекрасить к примеру иконки мы может получить не 100% результат
Поэтому я прибегнул к универсальному варианту, немного улучшив его и добавив семантику — «--color-error-40-disabled» по состоянию или «--color-neutral-10-divider» по типу элемента. Это помогает дизайнеру и разработчику сопоставить цвет с функциональностью.
Цвета
При создании темной темы важнейшей задачей было соблюдение контрастности, идентичной светлой теме. Во избежание коллизий при переходе между темами заведены статичные токены белого и акцентного цвета.
Тёмная тема
Основой консистентности и ускорения работы разработки являются молекулы. В них я собрал комбинации часто повторяющихся решений — группы кнопок, чипс, чекбоксов и прочего.
Примеры атомов и молекул
Запланировано
Создание типографических сетов (H1 + subtitle, body + hint и тд) поможет соблюдать единый визуальный язык и экономить время фронтам
Атомарный подход
Организмы
Организмы представляют собой стандартный набор выпадающих списков, модальных окон, системных сообщений. Также в ДС добавлялись универсальные решения, которые можно применять во всех проектах
Подготовка hand-off производилась по каждому компоненту с анимированными прототипами (при необходимости). Контроль реализации в коде стандартный — несколько этапов ревью с отработкой замечаний
Особое внимание уделялось «физическому» взаимодействию с компонентами — триггеры появления / скрытия, ликвидация лишних кликов, анимация
Передача в разработку
В настоящее время заканчиваю описывать правильное применение компонентов для соблюдения паттернов и избежания ошибок проектирования интерфейсов.
Ниже пример с описанием назначения компонента:
Гайд для дизайнеров
Система включает в тебя три типа размеров — L, M и S. Этого оказалось достаточно для гибкости элементов, которая позволяет легко контролировать пространство на странице
Размерность
