UI-кит
Синонимы: UI kit, user interface kit, набор компонентов, библиотека UI, UI library
NAME
UI-кит — дизайн и ux
DESCRIPTION
UI-кит (User Interface Kit) — библиотека готовых UI-компонентов в едином стиле: кнопки, формы, карточки, навигация, иконки, алерты. Это «конструктор LEGO» для дизайнеров и разработчиков. Вместо того чтобы каждый раз рисовать кнопку с нуля, берём готовую из UI-кита. Ускоряет дизайн в 3-5 раз и обеспечивает визуальное единство.
UI-кит vs Дизайн-система:
| Параметр | UI-кит | Дизайн-система |
|---|---|---|
| Состав | Только визуальные компоненты | Компоненты + принципы + документация + код |
| Масштаб | Один проект или стиль | Вся компания (несколько продуктов) |
| Код | Часто отсутствует | Всегда есть (React/Vue-компоненты) |
| Поддержка | Разовая работа | Постоянный процесс |
| Примеры | Material UI Kit, Ant Design Kit | Material Design, Apple HIG, Shopify Polaris |
Что входит в UI-кит (обязательный минимум):
| Категория | Компоненты |
|---|---|
| Typography | H1-H6, параграфы, ссылки, списки |
| Colors | Палитра (primary, secondary, success, error, neutral) |
| Buttons | Primary, secondary, ghost, icon button + все состояния |
| Inputs | Text, textarea, select, checkbox, radio, toggle |
| Cards | Product card, article card, user card |
| Navigation | Menu, tabs, breadcrumbs, pagination |
| Feedback | Alerts, tooltips, modals, notifications |
| Icons | Набор SVG-иконок в единой толщине |
Правила организации UI-кита в Figma:
- Auto Layout — все компоненты на автоматических отступах
- Variants — варианты компонента в одном месте (size: S/M/L)
- Properties — переключатели (icon on/off, state: hover/error)
- Компонент-страница — отдельная страница в файле Figma
- Publish as library — доступ из других файлов Figma
Где взять готовые UI-киты:
- Figma Community — тысячи бесплатных китов
- UI8 — премиум-киты (от $30)
- Material Design Kit — от Google
- Ant Design Kit — от Alibaba
- Untitled UI — один из лучших платных (10 000+ компонентов)
Преимущества использования:
- Скорость — дизайн страницы за 30 минут вместо 4 часов
- Консистентность — все кнопки одинаковые на всём сайте
- Легкость правок — изменили компонент в ките → обновилось везде
- Проще разработка — фронтендер берёт готовые CSS-классы
- Онбординг — новый дизайнер входит в проект за 1 день
Кейс WEBVISUAL: Клиент — сеть клиник (12 филиалов). Задача: редизайн личного кабинета пациента (80+ экранов). Без UI-кита проект занял бы 4 месяца. Мы начали с создания UI-кита (2 недели):
- 48 базовых компонентов
- 120 вариантов (размеры, состояния, темы)
- Светлая и тёмная темы
- Библиотека из 240 иконок
Результат: оставшиеся 78 экранов нарисовали за 3 недели (вместо плановых 3 месяцев). Разработка прошла в 2 раза быстрее, так как фронтендеры использовали готовый React-кит, собранный параллельно. Экономия бюджета: 480 000 ₽. Бюджет UI-кита: 140 000 ₽ (окупился мгновенно).