UI/UX дизайн

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

Дизайн-система (design system) — это единый набор правил и готовых элементов продукта: цвета, шрифты, отступы, кнопки, поля, карточки, а также описание того, когда и как их использовать. Она существует одновременно и в макетах, и в коде.

Без дизайн-системы каждый новый экран рисуют с нуля, и со временем в продукте появляются пять оттенков синего и четыре вида кнопок. Дизайн-система убирает эти расхождения и ускоряет работу: экран собирают из готовых блоков.

Главное условие — соответствие макетов и кода. Компоненты в Figma и компоненты в коде должны совпадать, иначе система становится красивой, но ненужной документацией. Кроме элементов, в неё входят правила доступности, поведение состояний и тексты интерфейса.

Где применяется

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

Польза очевидна. Новый экран собирают из готовых блоков за часы, а не дни; изменение кнопки сразу применяется во всём продукте; доступность проверяют один раз в компоненте, а не на каждой странице. Крупные компании даже публикуют свои системы открыто — Material от Google, Carbon от IBM.

Пример

Дизайнер меняет основной цвет бренда в одном месте библиотеки, и он обновляется на всех макетах. Разработчик меняет одну переменную в токенах, и цвет меняется на всём сайте — без правок в сотне файлов.

:root {
  --color-brand: #5b6cff;
  --color-text: #12141c;
  --radius-md: 12px;
  --space-3: 16px;
}

.btn-primary {
  background: var(--color-brand);
  border-radius: var(--radius-md);
  padding: var(--space-3) calc(var(--space-3) * 1.5);
}

Токены дизайн-системы в CSS: компоненты используют переменные, поэтому тему или бренд меняют в одном месте.

Частые вопросы

Чем дизайн-система отличается от UI kit?

UI kit — это набор готовых элементов в макете. Дизайн-система добавляет правила их использования, рабочие компоненты в коде и процесс обновления. Проще: UI kit показывает, как выглядит кнопка, а дизайн-система ещё и объясняет, когда её использовать.

Нужна ли дизайн-система небольшому проекту?

Полная — нет, она будет стоить больше, чем принесёт пользы. Но базовый набор токенов стоит создать сразу: цвета, размеры текста, шаг отступов, радиусы скругления. Это почти не отнимает времени на старте и спасает от хаоса, когда проект растёт.

Кто поддерживает дизайн-систему?

В крупных компаниях — отдельная команда из дизайнера и фронтенд-разработчика. В небольших это общая ответственность: кто создаёт новый компонент, тот и добавляет его в библиотеку. Без ответственного система быстро перестаёт соответствовать продукту, и ею перестают пользоваться.

Что входит в дизайн-систему, кроме компонентов?

Токены: цвета, шрифты, отступы, тени, скругления. Правила доступности: минимальный контраст, размеры зон нажатия, управление с клавиатуры. Тексты интерфейса и тон общения. А также описание состояний: загрузка, пустой экран, ошибка.

Обучение UI/UX-дизайну в OWU

Освойте профессию UI/UX-дизайнера на практических курсах с менторами и реальными проектами.

Выбрать курс