Разработка дизайн-системы веб-приложения

Разработка дизайн-системы веб-приложения

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

Разница становится очевидна в масштабе: один продукт с одной командой справляется с UI-китом. Несколько продуктов, несколько команд, несколько платформ — без дизайн-системы начинается дрейф: каждая команда делает «свою» версию кнопки, и через год интерфейс выглядит так, будто его делали разные компании.

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

1. Design Tokens — атомарный уровень. Именованные переменные для всех визуальных решений:

{
  "color": {
    "primary": {
      "50":  { "value": "#EFF6FF" },
      "500": { "value": "#3B82F6" },
      "900": { "value": "#1E3A5F" }
    },
    "semantic": {
      "background-default":  { "value": "{color.neutral.50}" },
      "text-primary":        { "value": "{color.neutral.900}" },
      "border-interactive":  { "value": "{color.primary.500}" }
    }
  },
  "spacing": {
    "xs": { "value": "4px" },
    "sm": { "value": "8px" },
    "md": { "value": "{spacing.sm} * 2" }
  }
}

Семантические токены — ключевое отличие от просто палитры. color.primary.500 — это конкретный цвет. color.semantic.border-interactive — это роль: цвет интерактивного бордера, который сейчас равен primary.500, но при смене темы может стать другим.

2. Компонентная библиотека (code) — React/Vue/Angular компоненты, реализующие каждый элемент UI-кита. Для React-стека типичный выбор:

• Headless-компоненты (Radix UI, Headless UI, Ark UI) + собственные стили через CSS Modules или Tailwind
• Готовые стилизованные библиотеки (Shadcn/ui, Mantine, Ant Design) с кастомизацией через токены
• Полностью кастомная реализация (для уникальных требований к дизайну)

3. Документационный сайт — Storybook как стандарт де-факто. Каждый компонент документируется в изоляции: все варианты, все состояния, все props с типами, примеры кода, accessibility-требования.

4. Figma-библиотека — Published компоненты в Figma, доступные всем файлам организации через Libraries. Синхронизирована с кодовой библиотекой: одинаковые имена компонентов и вариантов.

5. Процессы — contribution guidelines (как предложить новый компонент), versioning (semver для библиотеки), deprecation policy (как выводить устаревшие компоненты), review process.

Глубокий разбор: Storybook и интеграция с тестами

Storybook (v8 на 2024) — де-факто стандарт документирования компонентных библиотек. Каждый компонент описывается через stories — именованные варианты использования:

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'ghost', 'destructive'],
    },
    size: {
      control: 'radio',
      options: ['sm', 'md', 'lg'],
    },
  },
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: { variant: 'primary', children: 'Click me' },
};

export const Disabled: Story = {
  args: { variant: 'primary', disabled: true, children: 'Disabled' },
};

На основе stories автоматически запускаются:

• Chromatic (визуальный регрессионный тест) — скриншотит каждую story и сравнивает с baseline. Любое визуальное изменение — диффы на review
• @storybook/addon-a11y — автоматическая проверка accessibility через axe-core прямо в Storybook
• Interaction tests — @storybook/test позволяет писать тесты поведения прямо в story-файлах

Это позволяет поймать регрессию до деплоя: разработчик изменил отступы в кнопке — Chromatic сразу показывает diff во всех затронутых компонентах.

Глубокий разбор: Design Token Pipeline

Синхронизация токенов между Figma и кодом — самая болезненная часть дизайн-системы. Рабочая цепочка:

Figma Variables
    ↓ (экспорт через Tokens Studio или Figma Variables API)
tokens.json (W3C Design Tokens формат)
    ↓ (Style Dictionary трансформация)
┌─────────────────────────────────────────┐
│ CSS Custom Properties  → tokens.css     │
│ JavaScript object      → tokens.js      │
│ Tailwind config        → tailwind.config│
│ iOS Swift              → Colors.swift   │
│ Android XML            → colors.xml     │
└─────────────────────────────────────────┘

Style Dictionary настраивается через sd.config.json. Каждая платформа получает свой трансформер: CSS получает --color-primary-500, JS получает { color: { primary: { 500: '#3B82F6' } } }, Tailwind получает extend-конфиг с теми же значениями.

При изменении токена в Figma — дизайнер выгружает новый tokens.json, коммит в репозиторий, CI запускает Style Dictionary, публикует новую версию пакета в npm (если монорепо) или просто обновляет файлы. Все продукты, подключившие пакет, обновляются через npm update.

Версионирование и Governance

Дизайн-система — это shared dependency. Нарушение контракта ломает все подключённые продукты. Поэтому:

• Semver: major — breaking changes (переименование компонентов, изменение API), minor — новые компоненты, patch — bugfixes и visual tweaks
• Codeowners в Git: изменения в core-компонентах требуют ревью от maintainer'ов системы
• RFC process для новых компонентов — proposal документ с use-cases, alternatives, примерами API

Пример структуры монорепо для дизайн-системы:

design-system/
├── packages/
│   ├── tokens/          # Design tokens, Style Dictionary
│   ├── icons/           # SVG иконки + React-компоненты
│   ├── react/           # React компонентная библиотека
│   └── docs/            # Storybook
├── figma/               # Figma export files
└── .changeset/          # Changesets для версионирования

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

Сроки

MVP дизайн-системы (токены, 20–30 компонентов в Storybook, базовая документация) — 6–10 недель. Полноценная дизайн-система с token pipeline, Chromatic, contribution guide, Figma-библиотекой — 3–6 месяцев с поддержкой на постоянной основе.