Единая дизайн-система для продуктов группы

У шести продуктов группы было шесть наборов компонентов. Кнопки отличались высотой на пару пикселей, поля ввода — поведением при ошибке, а модальные окна закрывались по-разному. По отдельности мелочь; вместе — постоянный налог на каждую новую задачу.

Мы собрали общую библиотеку: токены цвета и типографики, сетка, состояния компонентов, правила отступов. Библиотека живёт в двух местах одновременно — в Figma для дизайна и в виде пакета для фронтенда, и меняется в них согласованно.

Что было сложнее, чем казалось

Технически собрать библиотеку — не проблема. Проблема — договориться. У каждой команды были причины, почему её кнопка именно такая, и часть этих причин оказалась справедливой: у NeoCredit форма заполняется на ходу с телефона, и увеличенные зоны нажатия там не прихоть.

Поэтому библиотека получилась не жёсткой: базовые токены общие, а плотность интерфейса настраивается на уровне продукта. Это компромисс, но он держится — в отличие от строгого стандарта, который команды тихо обходят.

Что изменилось

• Новый экран собирается из готовых компонентов, а не рисуется с нуля.
• Доступность заложена в компоненты: контраст, фокус и размеры зон нажатия проверяются один раз, а не в каждом проекте.
• Дизайнер и разработчик говорят одними именами — «поле в состоянии ошибки», а не «то поле, которое краснеет».