Что такое дизайн-система и чем она отличается от UI-кита

Путаница в терминах колоссальная. Стайлгайд, UI-кит, компонентная библиотека — это всё части одного целого, но не синонимы.

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

UI-кит — это уже готовые элементы интерфейса, собранные в Figma (или другом редакторе). Кнопки, инпуты, карточки, модальные окна — всё, из чего строится интерфейс.

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

На практике для небольших и средних проектов не обязательно строить что-то уровня Material Design от Google или Primer от GitHub. Достаточно выстроить свою рабочую систему, которая решает конкретные задачи конкретного проекта.

Почему единый стиль сайта — это не про красоту, а про деньги

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

Реальная арифметика из практики: на одном проекте — интернет-магазин, около 15 типов страниц — внедрение базовой дизайн-системы заняло примерно две недели дополнительной работы на старте. Зато дальше каждая новая страница собиралась в 2–3 раза быстрее, а количество багов, связанных с визуальной рассинхронизацией, упало практически до нуля.

Дизайн-токены: фундамент, с которого всё начинается

Дизайн-токены — самая недооценённая часть любой дизайн-системы. При этом именно с них стоит начинать.

Токен — это именованное значение дизайн-решения. Не просто `#2980b9`, а `--color-primary`. Не `16px`, а `--spacing-md`. Не `Inter, sans-serif`, а `--font-family-base`.

Зачем это нужно? Допустим, через полгода заказчик решает сменить основной цвет бренда. Без токенов — проходите по всему проекту и меняете hex-код в десятках мест. С токенами — меняете одно значение в одном файле.

Как структурировать токены в CSS

Трёхуровневая система токенов отлично масштабируется:

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

:root {
  /* Палитра цветов */
  --color-blue-500: #2563eb;
  --color-blue-600: #1d4ed8;
  --color-gray-50: #f9fafb;
  --color-gray-900: #111827;

  /* Шкала размеров */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;

  /* Типографика */
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-20: 1.25rem;
  --font-size-32: 2rem;
}

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

:root {
  --color-brand: var(--color-blue-500);
  --color-brand-hover: var(--color-blue-600);
  --color-text-primary: var(--color-gray-900);
  --color-surface: var(--color-gray-50);

  --spacing-section: var(--space-48);
  --spacing-block: var(--space-24);
  --spacing-element: var(--space-16);

  --text-body: var(--font-size-16);
  --text-heading: var(--font-size-32);
}

Третий уровень — компонентные токены. Это токены конкретных элементов интерфейса:

:root {
  --button-bg: var(--color-brand);
  --button-bg-hover: var(--color-brand-hover);
  --button-padding-y: var(--space-8);
  --button-padding-x: var(--space-16);
  --button-radius: 8px;

  --card-padding: var(--spacing-block);
  --card-radius: 12px;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

Такая структура может показаться избыточной для лендинга на три экрана. Но стоит проекту подрасти до 10–15 страниц — и система начинает окупаться с каждым новым компонентом.

Тёмная тема — бонус трёхуровневых токенов

Когда токены структурированы правильно, добавить тёмную тему — дело 20 минут. Достаточно переопределить семантический слой:

[data-theme="dark"] {
  --color-text-primary: #f3f4f6;
  --color-surface: #1a1a2e;
  --card-bg: #16213e;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

Примитивы остаются прежними, компонентные токены подхватывают изменения автоматически. Никакого дублирования стилей, никаких отдельных CSS-файлов для тёмной темы.

UI-кит в Figma: как организовать компоненты

С Figma работа идёт плотно — и при забирании макетов, и при проектировании интерфейсов. После появления Variables и обновлённых режимов (modes) Figma стала мощным инструментом для построения дизайн-систем.

Что обычно включает UI-кит для рабочего проекта:

Цветовые стили и переменные. Figma Variables позволяют переключать режимы (светлый / тёмный) в один клик и работают по той же логике примитив → семантика, что и CSS-токены. Дизайн и код говорят на одном языке.

Типографика. Набор текстовых стилей с чёткой иерархией: Display, Heading 1–4, Body Large, Body, Caption, Overline. Каждый стиль — с заданным размером, высотой строки, межбуквенным расстоянием. Оптимально ограничиться 6–8 стилями.

Базовые компоненты. Кнопки (primary, secondary, ghost, danger — каждая с состояниями default, hover, active, disabled), инпуты, чекбоксы, радио, селекты, тоглы, бейджи, аватары, иконки.

Составные компоненты. Карточки, хедер, футер, модальные окна, дропдауны, табы, аккордеоны, хлебные крошки, пагинация.

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

Ключевой принцип: компоненты в Figma должны соответствовать компонентам в коде один к одному. Если в Figma есть `Button/Primary/Large`, то и в React (или HTML/CSS) есть аналогичный компонент с теми же вариантами. Это сильно сокращает недопонимание между дизайном и вёрсткой.

Компоненты дизайн-системы: от Figma к коду

Когда UI-кит в Figma готов и токены определены, наступает самое интересное — перенос всего этого в код.

Структура компонентов

Каждый компонент живёт в отдельной папке с предсказуемой структурой:

components/
  Button/
    Button.tsx
    Button.module.css
    Button.types.ts
    index.ts
  Card/
    Card.tsx
    Card.module.css
    Card.types.ts
    index.ts

Внутри компонента — минимум логики, максимум переиспользуемости. Кнопка принимает варианты (`variant`, `size`), карточка — контент через `children`. Стили привязаны к дизайн-токенам из CSS.

Как токены попадают в компонент

Упрощённый пример кнопки, которая полностью опирается на токены:

/* Button.module.css */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-radius);
  font-size: var(--text-body);
  font-weight: 500;
  transition: background-color 0.2s, transform 0.1s;
  cursor: pointer;
  border: none;
}

.primary {
  background-color: var(--button-bg);
  color: #ffffff;
}

.primary:hover {
  background-color: var(--button-bg-hover);
}

Если завтра бренд-цвет поменяется — достаточно тронуть только файл с токенами. Все кнопки на всех страницах подхватят изменение мгновенно.

Стайлгайд: документ, который спасает проект через полгода

Стайлгайд — это документация к дизайн-системе. И это та часть, которую чаще всего игнорируют на небольших проектах.

Что обычно включает стайлгайд:

Принципы. Короткий текст о том, какую атмосферу создаёт дизайн. «Чистый, спокойный, с акцентом на контент» — это уже ориентир для принятия решений.

Цветовая палитра. Все цвета с токенами, hex-кодами и пометками: где какой использовать. Основной цвет для CTA-элементов, цвет текста, цвет фона, акценты, цвета состояний (успех, ошибка, предупреждение).

Типографика. Название шрифтов, все размеры, высоты строк, примеры использования. Важно указать не просто «заголовок — 32px», а «заголовок секции на десктопе — 32px / 40px line-height, на мобильных — 24px / 32px».

Сетка и отступы. Количество колонок, ширина контейнера, базовый шаг сетки (обычно 8px), отступы между секциями, блоками, элементами.

Иконки и иллюстрации. Стиль, размеры, правила использования. Если иконки линейные — значит, везде линейные, без исключений.

Интерактивные состояния. Как выглядит hover, focus, active, disabled для интерактивных элементов. Это то, что дизайнеры часто забывают отрисовать, а разработчики — реализовать.

Для собственных проектов удобно вести стайлгайд в Notion. Для клиентских — оформлять отдельной страницей в Figma или, если проект серьёзный, делать отдельный раздел в Storybook.

Типичные ошибки при создании дизайн-системы

Слишком много токенов на старте. Создать 80 цветовых токенов ещё до понимания, какие реально нужны — верный путь к хаосу. Лучше начинать с минимального набора и добавлять по мере необходимости.

Несовпадение имён в Figma и в коде. Дизайнер назвал цвет `Brand/Primary`, а в CSS он стал `--color-main`. Итог — постоянные уточнения и ошибки при вёрстке. Номенклатуру токенов нужно согласовывать между дизайном и кодом на старте проекта.

Компоненты без вариантов. Кнопка, которая умеет быть только синей и большой, бесполезна как компонент системы. Правильный компонент — это набор вариантов (variant, size, state), из которых можно собрать любой нужный вид.

Когда дизайн-система не нужна

Есть ситуации, когда она избыточна:

  • Одностраничный лендинг с уникальным дизайном и без планов на развитие — проще написать стили как есть
  • Промо-страница с коротким сроком жизни — инвестиция в систему не окупится
  • Прототип для тестирования гипотезы — скорость важнее порядка

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

Инструменты для работы с дизайн-системами

Figma — для UI-кита и визуальной документации. Variables для токенов, Auto Layout для адаптивности компонентов, Component Properties для вариантов.

CSS Custom Properties — для реализации токенов в коде. Никаких дополнительных библиотек не нужно, работает нативно в браузере, поддерживает наследование и каскадирование.

Style Dictionary — для проектов, где токены нужно экспортировать из единого JSON-источника в несколько платформ (CSS, JS, iOS, Android). Для веб-проектов можно обойтись без него, но на кросс-платформенных — незаменим.

Storybook — для документирования и визуального тестирования компонентов. Позволяет посмотреть каждый компонент изолированно, во всех состояниях и вариантах.

Как начать, если систем раньше не строил

Не надо останавливать всё и уходить на месяц выстраивать идеальную архитектуру. Лучше начинать итеративно:

  1. Определите цветовую палитру и запишите её в CSS-токены. Это полчаса работы, но эффект ощутимый сразу
  2. Вынесите типографику в токены. Размеры, высоты строк, вес шрифта — всё в переменные
  3. Зафиксируйте шкалу отступов. Шаг 4px или 8px — кому что ближе. Главное — чтобы все отступы были кратны базовому значению
  4. Соберите повторяющиеся элементы (кнопки, инпуты, карточки) в компоненты. Сначала в CSS, потом в Figma — или наоборот, порядок не принципиален
  5. Начните вести документацию. Хотя бы в формате README в репозитории. Лучше плохая документация, чем никакой

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