UI Kit и основы дизайн-системы
Каждая команда рисовала свои компоненты — консистентность и скорость страдали.
Семантические переменные — единая основа темы.
5 вариантов, 3 размера, единые состояния.
Одинаковое поведение, ошибки и подсказки.
Общие правила размеров и отступов.
С чего всё началось
В продукте параллельно работали три команды, каждая переизобретала кнопки, поля и модалки. Разработчики жаловались на бесконечные ревью и разные отступы.
Как принимала решения
Провела аудит: собрала все существующие компоненты и посчитала дубли.
Определила токены — цвет, типографика, отступы, радиусы, тени.
Собрала базовый набор компонентов и правила их использования.
Внедрила через воркшопы и парные ревью с командами.
Что сделала
Сначала договорилась о языке
До компонентов зафиксировала токены: цвет, типографику, отступы, радиусы. Всё остальное строилось поверх и не разъезжалось между командами.
Начала с самых частых компонентов
Кнопки, поля, модалки — то, что каждая команда рисовала заново. Их закрытие сразу сняло большую часть дублей.
Сделала правила короткими
Вместо длинной документации — короткие карточки «когда использовать / когда нет» рядом с компонентом.
Внедряла через людей, не через приказ
Воркшопы с дизайнерами и парные ревью с фронтендом — так система становилась общей, а не спущенной сверху.
Оставила систему живой
Настроила регулярный ритм ревизии: что добавляем, что удаляем, что переосмысляем — чтобы UI Kit не превратился в музей.
Дизайн-система работает не тогда, когда она красиво описана, а тогда, когда командам проще взять компонент, чем нарисовать свой.