Дизайн-системы: компонентные библиотеки

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

Зачем нужно

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

Где используется

  • Крупные продукты с несколькими командами (Google — Material Design, Apple — HIG)
  • SaaS-компании с несколькими приложениями на общей платформе
  • Публичные UI-библиотеки: Material UI, Ant Design, Chakra UI, Radix UI
  • Проекты, где важна консистентность бренда

Структура дизайн-системы

Tokens (дизайн-токены)
├── Цвета: --color-primary: #0070f3
├── Типографика: --font-size-base: 16px
├── Отступы: --spacing-4: 16px
└── Тени, радиусы, z-index

Компоненты (иерархия Atomic Design)
├── Atoms: Button, Input, Icon, Badge, Tag
├── Molecules: FormField, SearchBar, Toast
├── Organisms: Header, DataTable, Modal
└── Templates: PageLayout, DashboardLayout

Документация (Storybook)
└── Stories, Props API, Usage Guidelines

Дизайн-токены через CSS Custom Properties

/* tokens.css — единый источник дизайн-решений */
:root {
  /* Цвета */
  --color-primary-500: #0070f3;
  --color-primary-600: #0060df;
  --color-neutral-100: #f5f5f5;
  --color-neutral-900: #111111;

  /* Типографика */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Отступы (4px grid) */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-4: 16px;
  --spacing-6: 24px;

  /* Скругления */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Использование токенов в компоненте

// Button.jsx — использует токены вместо хардкода
function Button({ children, variant = 'primary', size = 'md', ...props }) {
  return (
    <button
      className={`btn btn--${variant} btn--${size}`}
      {...props}
    >
      {children}
    </button>
  );
}

/* Button.module.css */
.btn {
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
}

.btn--primary {
  background: var(--color-primary-500);
  color: white;
  padding: var(--spacing-2) var(--spacing-4);
}

.btn--md {
  font-size: var(--font-size-base);
  padding: var(--spacing-2) var(--spacing-4);
}

Популярные готовые библиотеки

Библиотека Стек Особенность
Material UI (MUI) React Реализация Material Design
Ant Design React Enterprise, богатый набор
Chakra UI React Простая кастомизация
Radix UI React Headless, доступность
shadcn/ui React + Tailwind Copy-paste, не npm

Частые ошибки

  • Начинают с компонентов, не токенов — без токенов компоненты хардкодят значения, и централизованное изменение темы становится невозможным.
  • Слишком ранняя абстракция — создают дизайн-систему для стартапа из 2 человек; это оправдано при 4+ командах.
  • Нет Storybook / документации — компоненты есть, но никто не знает как их использовать.

Связанные темы

Ресурсы