Дизайн-система для 15+ цифровых продуктов
Единственный дизайнер
Веду весь цикл сама: от аудита существующих продуктов и архитектуры токенов до отрисовки компонентов в Figma, документации и сайта-гайдбука
Каждый продукт компании выглядел по-своему
У нас было >15 продуктов и только брендбук, который задавал 3 корпоративных цвета и правила использования логотипов. Однако он ничего не говорил о том, как должны строиться интерфейсы.
Я решила предложить руководителю разработку дизайн-системы, собрала аргументы и презентовала. После чего идею с радостью приняли, а дальше последовало самое интересное - реализация.
Прежде чем рисовать первый компонент, нужно было понять, в какой же среде эта система будет жить
Составила таблицу всех продуктов компании: платформа, аудитория, стек, статус, необходимость редизайна
Изучила дизайн-системы НЛМК, Северстали и Росатома
Провела опрос разработчиков по тех стеку, от него зависело, как токены и компоненты будут передаваться в код
Сделала UI-аудит повторяющихся компонентов и паттернов в существующих интерфейсах
От конкурентного анализа к опросам
01
Принципы
Прежде чем рисовать компоненты, прописала цели дизайн-системы, какие проблемы она решает и ее ограничения
02
Фундамент
Начала с палитры, типографики, системы отступов и т.д. Для палитры выбрала OKLCH, все контрасты проверила на WCAG.
03
Иерархия
Базовая палитра - семантические токены - компоненты - паттерны. Меняем базу, за ней меняются остальные уровни. Благодаря этому стала возможна темизация.
04
Компоненты
Собрала базовый набор компонентов. Для каждого описала состояния, вариации и правила использования. Все значения заданы токенами, у каждого компонента есть булевы свойства.
Система внедрена в 4 продукта.
Скорость разработки макетов значительно выросла.
Скорость разработки макетов значительно выросла.
Сейчас система разворачивается еще в двух продуктах и проходит этап тестирования и доработки. В процессе этап создания Storybook со стороны разработки.
