Что такое дизайн-система?
Дизайн-система — единый набор правил и готовых компонентов продукта: палитра, типографика, отступы, кнопки, поля, карточки, а также описание того, когда и как их применять. Она существует одновременно в макетах и в коде.
Без неё каждый новый экран рисуется заново, и в продукте со временем появляются пять оттенков синего и четыре вида кнопок. Дизайн-система убирает эти расхождения и заметно ускоряет работу: экран собирается из готовых блоков, а не создаётся с нуля.
Ключевое условие — синхронность. Компоненты в 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);
}Частые вопросы
Чем дизайн-система отличается от UI kit?
UI kit — это набор готовых элементов в макете. Дизайн-система добавляет к нему правила применения, живые компоненты в коде и процесс их обновления. Проще говоря, UI kit показывает, как выглядит кнопка, а дизайн-система отвечает ещё и на вопрос, когда её использовать.
Нужна ли дизайн-система маленькому проекту?
Полноценная — нет, она будет дороже пользы. Но минимальный набор токенов стоит завести сразу: цвета, размеры текста, шаг отступов, радиусы. Это почти не требует времени в начале и избавляет от разнобоя, когда проект начнёт расти.
Кто поддерживает дизайн-систему?
В крупных компаниях — отдельная команда из дизайнера и фронтенд-разработчика. В небольших это общая ответственность: кто добавляет новый компонент, тот и заносит его в библиотеку. Без владельца система быстро расходится с реальным продуктом и перестаёт использоваться.
Что входит в дизайн-систему кроме компонентов?
Токены — цвета, типографика, отступы, тени, радиусы. Правила доступности: минимальный контраст, размеры зон нажатия, поведение при навигации с клавиатуры. Тексты интерфейса и тон общения. А также описание состояний: загрузка, пустой экран, ошибка.