Дизайн-система
Дизайн-система — единый набор правил, компонентов и токенов для интерфейса продукта. Объединяет цвета, шрифты, отступы, кнопки и поведение элементов в одну библиотеку, чтобы все экраны выглядели согласованно, а команда работала быстрее.
Определение дизайн-системы
Дизайн-система — это связанная библиотека дизайн-токенов, компонентов и гайдлайнов, которая описывает, как выглядит и ведёт себя интерфейс продукта. Она задаёт палитру, шкалу шрифтов, отступы, состояния кнопок и правила вёрстки в одном источнике истины. В отличие от разрозненных макетов, дизайн-система гарантирует, что кнопка на главной и в личном кабинете выглядит одинаково. Самые известные публичные примеры — Material Design от Google и Ant Design, на котором построены тысячи корпоративных панелей. По данным McKinsey, компании-лидеры по дизайну растут вдвое быстрее рынка отрасли.
Как работает и из чего состоит
Система держится на трёх слоях. Токены — это переменные: цвет primary, базовый отступ 8px, радиус скругления. Компоненты — собранные из токенов элементы: кнопка, поле ввода, карточка. Гайдлайны — текстовые правила, когда и какой компонент применять. Дизайнер хранит библиотеку в Figma, разработчик — в коде, и токены синхронизируют оба слоя. На больших проектах это сокращает время сборки новой страницы на 30-50%, потому что элементы не рисуют заново. Дизайн-система — основа разработки сайта и часть брендинга, где визуальные правила фиксируют единый стиль.
| Слой | Что описывает |
|---|---|
| Токены | Цвета, шрифты, отступы, радиусы, тени |
| Компоненты | Кнопки, поля, карточки, модальные окна |
| Паттерны | Формы, навигация, типовые блоки страниц |
| Гайдлайны | Правила применения и доступности |
Виды дизайн-систем
Делятся по охвату и зрелости. Готовые открытые системы (Material, Ant Design, Carbon от IBM) дают каркас бесплатно, но навязывают свой визуальный язык. Кастомная система строится под конкретный бренд и стоит дороже, зато выражает фирменный стиль. По зрелости различают стайлгайд (только правила на бумаге), UI-кит (библиотека макетов) и полноценную систему, где макет и код связаны токенами и обновляются синхронно. Малому проекту хватает UI-кита, продукту с несколькими командами нужна связанная система.
Метрики и пример
Эффект меряют скоростью сборки страниц, числом визуальных багов и долей переиспользуемых компонентов. Мини-кейс: SaaS-продукт с 4 командами вводит общую дизайн-систему на токенах. До неё каждая команда красила кнопки своим оттенком синего — в коде было 11 разных значений. После сведения к одному токену смена бренд-цвета занимает 1 час вместо недели, а число рассогласований между экранами на приёмке падает примерно на 60%. Система также упрощает адаптивный дизайн: брейкпоинты тоже хранятся как токены.
Связанные концепции
- Figma — редактор, где живёт библиотека компонентов и токенов дизайн-системы.
- UI — визуальный слой, который дизайн-система стандартизирует.
- Типографика — шкала шрифтов как один из ключевых наборов токенов.
- Брендбук — документ фирменного стиля, на основе которого формируют визуальные токены.
- Токены — переменные дизайна (цвет, отступ, радиус), общий язык дизайнера и разработчика.
Частые ошибки
- Делают систему без участия разработчиков — токены не попадают в код, и макет с продуктом расходятся.
- Перегружают библиотеку десятками вариантов одной кнопки, и команда перестаёт понимать, какой брать.
- Создают систему один раз и не обновляют — через полгода она устаревает и её обходят.
- Берут готовый Material под собственный бренд, и продукт выглядит как чужое приложение Google.
Частые вопросы
Чем дизайн-система отличается от UI-кита?
UI-кит — это библиотека готовых макетов компонентов в редакторе. Дизайн-система шире: помимо макетов в неё входят токены, текстовые гайдлайны и связь с кодом, где те же компоненты реализованы и обновляются синхронно с дизайном. UI-кит — часть дизайн-системы, но не заменяет её на проектах с несколькими командами.
Нужна ли дизайн-система небольшому сайту?
Полноценная система избыточна для лендинга. Но даже маленькому проекту полезен мини-набор токенов: 4-5 цветов, две-три шкалы шрифтов и базовый отступ. Это убирает разнобой и ускоряет правки. Полноценная система окупается, когда над продуктом работает несколько дизайнеров или растёт число страниц и экранов.
Что такое дизайн-токены?
Токены — это именованные переменные дизайна: цвет primary, отступ space-2 равный 8px, радиус radius-md. Дизайнер использует их в макете, разработчик — в коде, и при смене значения обновляются оба слоя сразу. Токены — общий язык, который связывает дизайн и разработку и убирает ручную сверку значений.
Сколько стоит и занимает создание дизайн-системы?
Зависит от объёма: компактная система на 15-20 компонентов с токенами собирается за 3-6 недель, корпоративная — несколько месяцев. Дешевле начать с открытого каркаса (Ant Design, Material) и адаптировать под бренд. Полную систему имеет смысл строить, когда есть продукт с регулярным развитием. Оценить объём поможет команда BigPanda.
Можно ли взять готовую систему вроде Material?
Да, открытые системы (Material, Ant Design, Carbon) дают каркас компонентов и экономят месяцы. Минус — узнаваемый чужой стиль. Решение — взять каркас как основу и переопределить токены под фирменные цвета и шрифты. Так продукт получает зрелую базу, но выглядит как собственный бренд, а не как стандартное приложение.