Дизайн-система: когда она экономит деньги, а когда нет

Слово «дизайн-система» часто произносят там, где хватило бы аккуратного набора компонентов. Разберёмся, что за этим стоит по существу и при каком размере продукта вложение действительно возвращается.

Из чего состоит дизайн-система

Основа — не библиотека компонентов, а токены: именованные значения цветов, отступов, шрифтов и радиусов. Компоненты пользуются токенами, а не конкретными значениями. Именно это делает возможной смену темы без правки каждого файла.

:root {
  /* Смысловые имена, а не названия цветов:
     через год «синий» может стать зелёным */
  --background: oklch(0.99 0 0);
  --foreground: oklch(0.21 0.01 260);
  --primary: oklch(0.55 0.18 255);
  --primary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.96 0.005 260);
  --muted-foreground: oklch(0.52 0.01 260);
  --border: oklch(0.91 0.005 260);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.17 0.01 260);
  --foreground: oklch(0.97 0 0);
  /* Тёмная тема — переопределение токенов,
     а не отдельный набор компонентов */
}

Когда она окупается

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

Как внедрять в работающий проект

Останавливать разработку ради переписывания интерфейса не нужно и почти всегда вредно. Мы внедряем постепенно, начиная с инвентаризации того, что уже есть.

1. 01Соберите список используемых цветов, размеров шрифта и отступов. Обычно обнаруживается двенадцать оттенков серого там, где нужны три.
2. 02Сведите их к минимальному набору и опишите токенами.
3. 03Переведите на токены общие элементы: кнопки, поля, карточки, заголовки.
4. 04Введите правило: новый код использует только токены. Старый переводится при следующей правке файла.
5. 05Через несколько месяцев проверьте, остались ли жёстко заданные значения, и уберите остатки.

Три признака системы, которая не работает

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

Дизайн-система — это договорённость, а не папка с файлами. Если договорённости нет, самая аккуратная библиотека компонентов разъезжается за квартал.

Что это даёт заказчику

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