Дизайн-система
Дизайн-система — это не просто Figma-файл с компонентами. Это связка визуальных решений, кода и правил их использования.
Из чего состоит
- Дизайн-токены — числовые и цветовые переменные: цвета, шрифты, размеры отступов и радиусов.
- Компоненты в Figma — переиспользуемые элементы для дизайнеров.
- Кодовая библиотека — те же компоненты для разработчиков (React, Vue и т. д.).
- Документация и правила — когда применять компонент, как себя ведёт, какие у него состояния.
Что даёт
- Консистентный продукт без «зоопарка стилей».
- Скорость новых фич: их собирают из готовых кирпичиков.
- Качество доступности и адаптива — заложены в компонентах.
- Общий язык между дизайном и разработкой.
Когда применять и когда нет
Применять
- Когда несколько дизайнеров и разработчиков работают над одним продуктом
- Когда у компании несколько продуктов и стиль должен быть общим
- Когда новые экраны делаются часто и стабильность важна
Не применять
- Маленькая команда на 1–2 дизайнеров и одном продукте — для начала достаточно общего файла компонентов без отдельной дизайн-системы
Примеры применения
В компании было четыре продукта, каждый со своим набором компонентов и стилями. Время на новый экран — несколько дней, и часто «новая кнопка» в одном продукте через месяц нашла копию с другим радиусом в соседнем. После запуска дизайн-системы у дизайнеров появилась общая Figma-библиотека, у разработчиков — единая npm-пакет с компонентами. Скорость новых фич выросла, число визуальных багов упало в несколько раз.
Часто задаваемые вопросы
UI-кит — это обычно набор экранов или компонентов в Figma. Дизайн-система шире: туда же входят правила использования, кодовая библиотека, документация, процесс развития. Любой UI-кит может быть стартовой точкой для дизайн-системы, но не всякий UI-кит ей становится.
Для большинства продуктов разумно начать с готовой и постепенно подстраивать её под бренд: цвета, типографика, отдельные компоненты. Полностью свою с нуля делают там, где визуальная уникальность критична — премиальные продукты, медиа, развлекательные сервисы.