Вы когда-нибудь открывали проект, в котором одна и та же кнопка существует в 14 вариациях? Синяя, фиолетовая, с тенью, без тени, скруглённая, прямоугольная — и каждая прописана инлайново в том месте, где она используется. Именно так выглядит продукт без дизайн-системы. И именно поэтому на любое изменение интерфейса уходят дни вместо минут.
Дизайн-система — это не модный тренд и не «приятное дополнение». Это инженерный инструмент, который радикально ускоряет разработку, повышает консистентность интерфейса и сокращает количество багов. В этой статье мы разберём, как построить дизайн-систему, которая реально работает — от первых токенов до полноценной документации.
Что такое дизайн-система (и чем она не является)
Дизайн-система — это набор переиспользуемых компонентов, правил и инструментов, которые позволяют команде строить продукты быстро и единообразно. Она включает три уровня:
- Дизайн-токены: примитивные значения — цвета, шрифты, отступы, тени, скругления
- Компоненты: переиспользуемые элементы интерфейса — кнопки, инпуты, карточки, модалки
- Паттерны: готовые решения для повторяющихся задач — формы, таблицы, навигация
Дизайн-система — это не UI kit. UI kit — это набор красивых картинок в Figma. Дизайн-система — это живой продукт: Figma-компоненты синхронизированы с кодом, есть документация, есть правила использования, есть процесс обновления.
Дизайн-система — это продукт для тех, кто создаёт продукты. Относитесь к ней именно так.
Зачем дизайн-система вашему продукту
Давайте посчитаем. Без дизайн-системы разработчик тратит в среднем 30-40% времени на стилизацию компонентов: подбирает отступы, ищет нужный цвет, копирует стили из другого места. С дизайн-системой он вызывает готовый компонент с нужными параметрами — 2 минуты вместо 30.
Основные преимущества:
- Скорость разработки: новый экран собирается из готовых блоков за часы, а не за дни
- Консистентность: все кнопки, отступы и цвета одинаковы на всех страницах
- Масштабирование команды: новый разработчик продуктивен с первого дня — он использует готовые компоненты
- Качество: компоненты тестируются один раз, используются везде
- Дизайн-ревью: вместо «эта кнопка не того цвета» — «используй
Button variant="primary"»
По данным Figma, компании с дизайн-системами выпускают продукты в среднем на 34% быстрее. А по нашему опыту, после внедрения системы количество UI-багов снижается на 60-70%.
Анатомия дизайн-системы
Уровень 1: Дизайн-токены
Токены — это фундамент. Это именованные переменные, которые хранят примитивные значения дизайна. Вместо #6c5ce7 в 47 местах кода у вас --accent — одно изменение меняет весь продукт.
Токены делятся на три категории:
- Глобальные (primitive): базовая палитра —
purple-500,gray-100,spacing-4 - Семантические (semantic): смысловые —
--text-primary,--bg-surface,--border-error - Компонентные (component): для конкретных компонентов —
--button-bg,--card-shadow
Пример структуры токенов в CSS:
:root {
/* Primitive tokens */
--purple-500: #6c5ce7;
--teal-500: #00cec9;
--gray-900: #e8e8ef;
--gray-500: #6b6b80;
/* Semantic tokens */
--text: var(--gray-900);
--text-dim: var(--gray-500);
--accent: var(--purple-500);
--accent2: var(--teal-500);
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
/* Typography */
--font-body: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 48px;
}Важно: используйте семантические токены в компонентах, а не примитивные. Это позволит легко добавить тёмную/светлую тему — переопределив только семантический слой.
Уровень 2: Базовые компоненты
Начните с минимального набора. Вот 12 компонентов, которые покрывают 80% интерфейса:
- Button — primary, secondary, ghost, danger, disabled
- Input — text, email, password, search, с иконками
- Select — выпадающий список с поиском
- Checkbox / Radio — с label и группировкой
- Card — контейнер с тенью, бордером, hover-эффектом
- Badge — статус, категория, count
- Avatar — изображение, инициалы, fallback
- Modal — диалог с overlay, анимация, focus trap
- Toast — уведомления success, error, info, warning
- Tooltip — подсказки по hover
- Tabs — горизонтальная навигация с контентом
- Skeleton — состояние загрузки
Каждый компонент должен поддерживать: варианты (variants), размеры (sizes), состояния (states: hover, focus, disabled, active) и accessibility (ARIA-атрибуты, keyboard navigation).
Уровень 3: Составные паттерны
Паттерны — это комбинации базовых компонентов для решения конкретных задач:
- Форма авторизации: Input + Button + Link + Divider + OAuth-кнопки
- Таблица данных: Table + Pagination + Search + Filters + Sorting
- Навигация: Logo + Links + CTA + MobileMenu + Breadcrumbs
- Карточка товара: Image + Badge + Title + Price + Button + Rating
Паттерны не обязательно оформлять как отдельные компоненты — достаточно задокументировать, как комбинировать базовые элементы.
Как организовать Figma-библиотеку
Figma — стандарт де-факто для дизайн-систем в 2026. Вот как организовать библиотеку правильно:
Структура файлов
- Foundations: цвета, типографика, иконки, сетка, отступы
- Components: все базовые компоненты с вариантами
- Patterns: составные паттерны и готовые блоки
- Documentation: гайдлайны, do/don't, примеры использования
Правила для компонентов
Каждый Figma-компонент должен:
- Использовать Auto Layout (никаких абсолютных позиций)
- Быть привязан к Variables (цвета, отступы, скругления)
- Иметь все Variants (состояния, размеры, типы)
- Содержать Description с правилами использования
- Быть протестирован на resize — не ломаться при изменении размера
Используйте Figma Variables для токенов. Это позволяет переключать тему (светлая/тёмная) одним кликом и автоматически обновлять все компоненты.
От дизайна к коду: синхронизация
Самая большая проблема дизайн-систем — рассинхронизация между Figma и кодом. Дизайнер обновил кнопку, а в коде осталась старая версия. Через месяц система начинает расходиться.
Решение — design tokens pipeline:
- Определите токены в JSON/YAML (единый источник правды)
- Используйте Style Dictionary или Token Transformer для генерации CSS-переменных, SCSS-переменных, Tailwind-конфига
- Синхронизируйте токены с Figma через Tokens Studio (бывший Figma Tokens)
- Автоматизируйте: push в Git запускает сборку токенов, обновляет npm-пакет, уведомляет команду
Для компонентов используйте Storybook — это каталог всех компонентов с интерактивной документацией, визуальным тестированием и playground для экспериментов.
Инструменты для построения дизайн-системы
| Задача | Инструмент | Примечание |
|---|---|---|
| Дизайн | Figma | Variables, Auto Layout, Dev Mode |
| Токены | Tokens Studio + Style Dictionary | Синхронизация Figma и код |
| Документация | Storybook | Интерактивный каталог компонентов |
| Компоненты (React) | Radix UI / shadcn/ui | Unstyled, accessible, composable |
| Визуальное тестирование | Chromatic | Ловит визуальные регрессии |
| Иконки | Lucide / Phosphor | Открытые, консистентные наборы |
Типичные ошибки при создании дизайн-системы
1. Начинать слишком масштабно
Не нужно сразу строить Material Design. Начните с токенов и 10 компонентов. Добавляйте новые по мере необходимости. Лучше иметь 15 отточенных компонентов, чем 80 сырых.
2. Не документировать
Компонент без документации — это компонент, который не будут использовать. Для каждого элемента нужно: описание, примеры, do/don't, props API. Минимум — Storybook с описанием.
3. Забыть про accessibility
Доступность — это не «бонус», а требование. Каждый компонент должен быть доступен с клавиатуры, иметь правильные ARIA-атрибуты и проходить тест цветового контраста (WCAG AA).
4. Не назначить владельца
Дизайн-система без владельца — это мёртвая система. Нужен человек (или команда), который отвечает за обновления, ревью PR, разрешение конфликтов и roadmap системы.
5. Не тестировать визуально
Unit-тесты не ловят визуальные баги. Используйте Chromatic или Percy для snapshot-тестирования — они автоматически находят визуальные регрессии при каждом PR.
Пошаговый план: от нуля до дизайн-системы за 4 недели
Неделя 1: Аудит и токены. Соберите все цвета, шрифты и отступы из текущего продукта. Определите палитру, типографическую шкалу, spacing-шкалу. Создайте файл токенов.
Неделя 2: Базовые компоненты. Создайте Button, Input, Card, Badge, Avatar в Figma и в коде. Каждый с вариантами, состояниями и accessibility.
Неделя 3: Составные компоненты и паттерны. Modal, Toast, Tabs, Table. Настройте Storybook.
Неделя 4: Документация и процесс. Напишите гайдлайны, настройте CI/CD для пакета компонентов, обучите команду.
Если вам нужна помощь с созданием дизайн-системы — это одна из наших ключевых компетенций. Подробнее об услуге UI/UX дизайна.