Создание дизайн-системы с нуля: компонентный подход, токены, документация

Дизайн-система — это не просто набор UI-компонентов. Это единый язык между дизайнерами и разработчиками, ускоряющий создание продуктов в 2-3 раза. Разбираем полный цикл создания: от токенов до документации.

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

Дизайн-система — это набор стандартов, компонентов и правил, которые обеспечивают единообразие интерфейсов во всех продуктах компании.

Ключевые преимущества:

Скорость разработки — не нужно изобретать кнопку каждый раз
Консистентность — одинаковый UX во всех частях продукта
Масштабирование — новые фичи не ломают старые
Экономия — меньше багов, меньше времени на дизайн
Онбординг — новички быстро вливаются в процесс

Уровень 1: Дизайн-токены (Design Tokens)

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

Цветовая система

                        // colors.tokens.json

                        {

                          "color": {

                            "primary": {

                              "50": "#eff6ff",

                              "100": "#dbeafe",

                              "500": "#3b82f6",

                              "700": "#1d4ed8",

                              "900": "#1e3a8a"

                            },

                            "neutral": {

                              "50": "#f8fafc",

                              "100": "#f1f5f9",

                              "700": "#334155",

                              "900": "#0f172a"

                            },

                            "semantic": {

                              "success": "#10b981",

                              "warning": "#f59e0b",

                              "error": "#ef4444",

                              "info": "#3b82f6"

                            }

                          }

                        }

Типографика

                        // typography.tokens.json

                        {

                          "font": {

                            "family": {

                              "sans": "Inter, system-ui, sans-serif",

                              "mono": "JetBrains Mono, monospace"

                            },

                            "size": {

                              "xs": "12px",

                              "sm": "14px",

                              "base": "16px",

                              "lg": "18px",

                              "xl": "20px",

                              "2xl": "24px",

                              "3xl": "30px",

                              "4xl": "36px"

                            },

                            "weight": {

                              "normal": "400",

                              "medium": "500",

                              "semibold": "600",

                              "bold": "700"

                            },

                            "lineHeight": {

                              "tight": "1.25",

                              "normal": "1.5",

                              "relaxed": "1.75"

                            }

                          }

                        }

Отступы и spacing

                        // spacing.tokens.json

                        {

                          "spacing": {

                            "0": "0",

                            "1": "4px",

                            "2": "8px",

                            "3": "12px",

                            "4": "16px",

                            "5": "20px",

                            "6": "24px",

                            "8": "32px",

                            "10": "40px",

                            "12": "48px",

                            "16": "64px"

                          }

                        }

Уровень 2: Базовые компоненты (Atoms)

Атомы — это самые маленькие строительные блоки, которые нельзя разложить на части.

Пример: Кнопка (Button)

                            // React-компонент Button

                            interface ButtonProps {

                              variant: 'primary' | 'secondary' | 'danger';

                              size: 'sm' | 'md' | 'lg';

                              disabled?: boolean;

                              children: React.ReactNode;

                            }

                            export const Button = ({ variant, size, disabled, children }: ButtonProps) => {

                              const className = `btn btn--${variant} btn--${size}`;

                              return <button className={className} disabled={disabled}>{children}</button>;

                            };

Другие атомы:

Input — текстовое поле, поиск, пароль
Checkbox / Radio — выбор опций
Avatar — аватар пользователя
Badge — статус, счётчик
Icon — иконки (обычно через SVG-спрайт)
Typography — компоненты для текста (Heading, Text, Link)

Уровень 3: Составные компоненты (Molecules)

Молекулы — это комбинации атомов, которые решают небольшие задачи.

SearchBar — Input + Button + Icon
Card — контейнер с заголовком, текстом и кнопкой
FormField — Label + Input + ErrorMessage
Dropdown — Select + OptionList
ModalHeader — Title + CloseButton

                        // Card компонент

                        export const Card = ({ title, description, image, actionButton }) => {

                          return (

                            <div className="card">

                              {image && <img src={image} className="card__image" />}

                              <div className="card__content">

                                <h3 className="card__title">{title}</h3>

                                <p className="card__description">{description}</p>

                                {actionButton}

                              </div>

                            </div>

                          );

                        };

Уровень 4: Организмы (Organisms) и шаблоны

Организмы — это сложные секции интерфейса, состоящие из молекул и атомов.

Header — логотип + навигация + поиск + профиль
Footer — ссылки + копирайт + соцсети
ProductGrid — сетка из Card с пагинацией
Sidebar — меню + фильтры + реклама
DataTable — таблица с сортировкой, фильтрацией и пагинацией

Уровень 5: Страницы и шаблоны (Templates & Pages)

Шаблоны — это макеты страниц без конкретного контента. Страницы — заполненные данными шаблоны.

Layout — общая структура (Header + Main + Footer)
AuthTemplate — центрированная форма логина/регистрации
DashboardTemplate — sidebar + контент
LandingTemplate — hero + фичи + отзывы + CTA

Документация: сердце дизайн-системы

Без документации дизайн-система умирает. Используйте Storybook, Zeroheight или самописный сайт-документацию.

Что должно быть в документации:

Правила использования каждого компонента
Интерактивные примеры (props, состояния)
Code snippets (React, CSS, Figma)
Accessibility (a11y) требования
Do's and Don'ts — что можно и нельзя

                        // Пример документации кнопки в Storybook

                        export const Primary: Story = {

                          args: {

                            variant: 'primary',

                            children: 'Click me',

                          },

                        };

                        export const Disabled: Story = {

                          args: {

                            variant: 'primary',

                            disabled: true,

                            children: 'Disabled',

                          },

                        };

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

Дизайн: Figma (с библиотекой компонентов), Sketch, Adobe XD
Разработка: Storybook, Style Dictionary (токены), Chromatic (визуальное регрессионное тестирование)
Документация: Zeroheight, Storybook Docs, Docusaurus, GitBook
Тестирование: Jest + React Testing Library, Percy, Playwright

Чек-лист внедрения дизайн-системы

✅ Аудит существующих компонентов
✅ Создание дизайн-токенов
✅ Разработка атомов (5-10 базовых компонентов)
✅ Сборка Storybook
✅ Документация для дизайнеров (Figma Library)
✅ CI/CD для публикации пакета (npm)
✅ Миграция одного пилотного проекта
✅ Сбор обратной связи и итерации
✅ Коммуникация и обучение команды

🎯 Пример успешных дизайн-систем

Material Design (Google) — самая известная система
Carbon Design System (IBM) — для enterprise продуктов
Atlassian Design System — для сложных B2B интерфейсов
Polaris (Shopify) — для e-commerce
Evergreen (Segment) — открытая React-система

Заключение: Создание дизайн-системы — это инвестиция, которая окупается через 3-6 месяцев активного использования. Начинайте с малого: токены + 5 компонентов. Документируйте всё. Вовлекайте разработчиков в процесс. И помните: дизайн-система — живой организм, она должна развиваться вместе с продуктом.