Дизайн-система
Дизайн-система — цвета, типографика, кнопки, сетка, состояния. ИИ помогает набросать кит, но правила утверждает команда.
Зачем дизайн-система, а не «ещё один макет»
UI kit — набор макетов кнопок и полей. Система ещё и правила: когда какая кнопка, как ошибка, как тёмная тема.
Что входит в систему
- Общие кнопки, цвета, шрифты, сетка и правила состояний. Экраны не рисуют каждый раз с нуля.
- UI kit — набор макетов кнопок и полей. Система ещё и правила: когда какая кнопка, как ошибка, как тёмная тема.
- Имена вместо «вот этот синий»: цвет-текст, отступ-карточка. По ним синхронизируют Figma и код, чтобы палитра не разъехалась.
- ИИ набросает кит за вечер. Какие состояния канон — решает команда, иначе каждый дизайнер снова изобретает кнопку.
- Когда продуктов больше одного экрана: сайт, кабинет, лендинги. На одном промо-лендинге часто избыточна.
Система и скорость
| Проблема | Норма | Действие | |
|---|---|---|---|
| Ситуация | Так нельзя | Так надо | Проверка |
| Дизайн-система | Общие слова | Конкретный факт | Страница / отчёт |
| Команда | Нет ответственного | Регламент | Раз в месяц |
ПрактикаКогда продуктов больше одного экрана: сайт, кабинет, лендинги. На одном промо-лендинге часто избыточна.
Дизайн-система: как применяют
Нужна, когда продуктов больше одного экрана. На одном лендинге часто избыточна.
Частые вопросы
Что такое дизайн-система?
Общие кнопки, цвета, шрифты, сетка и правила состояний. Экраны не рисуют каждый раз с нуля.
UI kit и дизайн-система
UI kit — набор макетов кнопок и полей. Система ещё и правила: когда какая кнопка, как ошибка, как тёмная тема.
Токены дизайна
Имена вместо «вот этот синий»: цвет-текст, отступ-карточка. По ним синхронизируют Figma и код, чтобы палитра не разъехалась.
Дизайн-система с ИИ
ИИ набросает кит за вечер. Какие состояния канон — решает команда, иначе каждый дизайнер снова изобретает кнопку.
Зачем дизайн-система?
Когда продуктов больше одного экрана: сайт, кабинет, лендинги. На одном промо-лендинге часто избыточна.