Дизайн-система: когда она нужна продукту и сколько стоит

Дизайн-система нужна продукту, когда интерфейс разрастается, над ним работают несколько дизайнеров и разработчиков, а одинаковые элементы начинают выглядеть и работать по-разному. Это общий набор правил, токенов и готовых компонентов в макетах и в коде, который ускоряет разработку новых экранов и делает интерфейс единообразным. Для лендинга или небольшого MVP полноценная дизайн-система избыточна — хватит UI-кита.

Разберём, из чего она состоит, когда окупается и как её внедрять постепенно.

Что такое дизайн-система?

Дизайн-система — это единый источник правил интерфейса: цвета, шрифты, отступы, компоненты и принципы их использования, оформленные и в макетах, и в коде. Её главное отличие от набора макетов в том, что компоненты в коде соответствуют компонентам в дизайне, и изменение в одном месте распространяется на весь продукт.

Из чего обычно состоит:

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

Когда дизайн-система окупается?

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

Ситуация	Что нужно
Лендинг, корпоративный сайт	Стилевой гид и несколько блоков в макетах
MVP продукта	UI-кит: базовые компоненты в макетах и в коде
Растущий продукт с несколькими разработчиками	Дизайн-токены и библиотека компонентов в коде
Несколько продуктов одного бренда	Полноценная дизайн-система с документацией и владельцем

Фото: Unsplash

Как дизайн-система выглядит в коде?

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

:root {
  --color-primary: #1e3a8a;
  --color-danger: #b91c1c;
  --color-text: #111827;
  --font-size-body: 1rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --radius-md: 8px;
}

.button {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
}

Что даёт связка токенов и компонентов

1. Смена фирменного цвета или шрифта — одна правка в токенах.
2. Тёмная тема — другой набор значений тех же токенов.
3. Состояния — фокус, ошибка, загрузка — реализованы один раз и везде одинаковы.
4. Доступность закладывается в компоненты и наследуется всеми экранами — о требованиях в статье доступность сайта.

Сколько стоит дизайн-система?

Стоимость зависит от масштаба: UI-кит для MVP — часть обычного дизайна и разработки, а полноценная система с документацией и командой поддержки — отдельный постоянный проект. Главная ошибка — строить большую систему заранее, когда продукт ещё ищет форму и интерфейс меняется каждую неделю.

Что влияет на затраты:

• число компонентов и их состояний;
• количество платформ: веб, iOS, Android;
• нужна ли документация и каталог компонентов;
• кто будет поддерживать систему после создания.

Дизайн-система без владельца быстро устаревает: команда начинает делать компоненты «рядом», и через год их снова два вида.

Как внедрять дизайн-систему постепенно?

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

Порядок:

• провести аудит: собрать все варианты кнопок, полей и цветов, которые уже есть;
• договориться о токенах и вынести их в переменные;
• сделать 10–15 базовых компонентов, которые покрывают большую часть экранов;
• все новые экраны собирать только из компонентов системы;
• назначить владельца, который принимает изменения и следит за соответствием макетов и кода.

Если вы ещё выбираете фреймворк для фронтенда, учтите, что готовые библиотеки компонентов для него тоже ускоряют старт — об этом в статье Vue или React.

Коротко

• Дизайн-система — единые токены, компоненты и правила интерфейса в макетах и в коде.
• Она окупается в большом развивающемся продукте с несколькими дизайнерами и разработчиками.
• Для лендинга хватит стилевого гида, для MVP — UI-кита.
• Начинайте с токенов и частых компонентов, старые экраны переводите постепенно.
• Без владельца дизайн-система устаревает — назначьте ответственного.