Дизайн-система

Разбираем, какие задачи решает дизайн-система и в каких проектах она только мешает. Определяем масштаб будущей системы и границы: что войдёт в неё, а что останется частным решением.

Собираем все экраны продукта и разбираем их на повторяющиеся элементы. Фиксируем расхождения в цветах, шрифтах и отступах и решаем, что объединять, а что убирать.

Три уровня токенов — примитивы, семантика и компонентные значения. Разбираем именование, структуру файла и переводим отступы, скругления и тени в понятные шкалы.

Строим шкалу размеров текста, межстрочных интервалов и начертаний. Переводим её в набор текстовых стилей Figma и проверяем на реальных экранах с длинными текстами.

Собираем базовую палитру со ступенями оттенков, привязываем к ней семантические токены и получаем светлую и тёмную тему. Проверяем контраст и правим проблемные пары.

Собираем компоненты на токенах и вариантах: от кнопок и полей ввода до карточек и модальных окон. Прорабатываем полный набор состояний для каждого элемента.

Задаём сетки и контрольные точки для разных размеров экрана. Разбираем плотность интерфейса, вертикальный ритм и правила, по которым компоненты складываются в макет.

Описываем компоненты так, чтобы систему поняли без вас: назначение, анатомия, состояния и запреты. Передаём систему команде и настраиваем версионирование и приём изменений.