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

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

Представьте: ваш продукт растёт, появляются новые модули, несколько команд параллельно пишут интерфейсы. Через полгода одни и те же элементы — кнопки, формы, карточки — выглядят по-разному в разделах. Дизайнеры рисуют вариации, разработчики множат CSS-классы, скорость разработки падает. Это типичная проблема масштабирования, и решает её дизайн-система.

Дизайн-система — это не просто UI-кит. Это живая инфраструктура: код компонентов, документация, процессы синхронизации между дизайном и разработкой. Она устраняет дрейф интерфейсов и ускоряет вывод новых экранов. По нашим данным, команды с дизайн-системой тратят на 30–50% меньше времени на разработку интерфейсов. Экономия бюджета на интерфейсах достигает 40%.

В одном из наших проектов на стартапе с 5 разработчиками через год интерфейсы разошлись настолько, что каждая кнопка имела 4 стиля. После внедрения дизайн-системы этот же проект сократил время разработки новых экранов на 40% и перестал тратить ресурсы на правки несогласованных стилей.

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

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, но при смене темы может стать другим.

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

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

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

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

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

Как дизайн-система ускоряет разработку?

Исследования показывают, что команды с дизайн-системой тратят на новые экраны на 30–50% меньше времени. Единый визуальный язык повышает узнаваемость бренда и снижает количество багов на стыке компонентов. Наш опыт — более 8 лет разработки дизайн-систем для продуктовых команд — подтверждает: начальные вложения окупаются в течение полугода. Например, один из клиентов сократил время разработки нового модуля на 40% после внедрения.

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

Storybook — де-факто стандарт документирования компонентных библиотек. Каждый компонент описывается через 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 во всех затронутых компонентах. По сравнению с ручными проверками, такой подход в 10 раз быстрее выявляет регрессии.

Почему стоит использовать Chromatic?

Chromatic автоматизирует визуальное регрессионное тестирование и встраивается в CI. Достаточно один раз настроить скриншоты — и каждое изменение будет проверено на соответствие эталону. Это снижает нагрузку на QA и упрощает ревью дизайна.

Как мы настраиваем пайплайн токенов?

Синхронизация токенов между 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 │ └─────────────────────────────────────────┘ 

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