Разработка UI-кита веб-приложения
UI-кит — это библиотека визуальных компонентов: кнопки, инпуты, карточки, таблицы, иконки, типографика, цветовая палитра — всё собрано в одном месте с консистентным визуальным языком. Не дизайн-система (это шире), а именно набор готовых блоков для сборки интерфейса.
Практическая ценность UI-кита в том, что дизайнер перестаёт рисовать одну и ту же кнопку в каждом макете заново, а разработчик перестаёт переспрашивать «а какой у неё hover-цвет».
Что входит в UI-кит
Полноценный UI-кит для веб-приложения включает:
Foundations (основы)
- Цветовая палитра: primary, secondary, neutral + семантические цвета (success, warning, error, info) с оттенками 50–950 по аналогии с Tailwind
- Типографическая шкала: заголовки H1–H6, body-тексты (lg/md/sm/xs), подписи, code-блоки — с указанием font-family, font-size, line-height, letter-spacing
- Сетка: количество колонок, gutters, margins для каждой breakpoint'а
- Радиусы скруглений, тени (elevation system), иконографика (размеры, библиотека)
Компоненты (atoms)
- Кнопки: primary/secondary/ghost/destructive × default/hover/active/disabled/loading
- Инпуты: text, email, password, number, textarea, select, checkbox, radio, toggle, date picker
- Badges, tags, chips, tooltips, alerts
- Аватары, прогресс-бары, спиннеры
Составные компоненты (molecules)
- Карточки (базовая, с изображением, с action)
- Навигация: breadcrumbs, tabs, pagination, stepper
- Таблицы с сортировкой, фильтрами, пагинацией
- Модальные окна и drawer'ы
- Dropdown-меню, contex-меню
Глубокий разбор: Component Variants в Figma
Правильная структура компонентов в Figma определяет, насколько удобно будет работать с UI-китом через 6 месяцев.
Современный подход — Component Properties (введены в Figma 2022). На примере кнопки:
Button
├── Properties:
│ ├── Variant: Primary | Secondary | Ghost | Destructive
│ ├── State: Default | Hover | Active | Disabled | Loading
│ ├── Size: SM | MD | LG
│ ├── Icon Left: boolean (instance swap)
│ ├── Icon Right: boolean (instance swap)
│ └── Label: text
Это позволяет менять любое свойство через панель справа без переключения между вариантами вручную. Итого: вместо 4 × 5 × 3 = 60 отдельных компонентов — один компонент с Properties.
Для инпутов обязательны состояния: Default, Focused, Filled, Error, Disabled. Плюс варианты с Label/без, с Hint text/без, с иконкой/без. Всё это покрывается через Component Properties, не умножением компонентов.
Auto Layout — всё в UI-ките должно быть построено на Auto Layout. Это гарантирует корректное поведение компонентов при изменении текста (кнопка растягивается под длинный лейбл, а не обрезает его) и упрощает адаптивность.
Токены и связь с кодом
Профессиональный UI-кит оперирует design tokens — именованными переменными для всех визуальных значений. Цвета, отступы, радиусы, тени — не конкретные значения (#3B82F6), а токены (color.primary.500).
Инструменты для экспорта токенов из Figma в код:
- Tokens Studio (плагин Figma) — экспорт в JSON формат W3C Design Tokens
- Style Dictionary (Amazon) — трансформация токенов в CSS custom properties, SCSS, JS/TS объекты, Swift, Android XML
- Figma Variables (нативно) — синхронизация через Figma REST API
Пример цепочки: дизайнер меняет color.primary.500 в Figma Variables → CI/CD подхватывает экспорт через API → Style Dictionary генерирует обновлённый tokens.css → компоненты автоматически получают новый цвет.
Документация UI-кита
UI-кит без документации используется неправильно. Минимальная документация в Figma:
- Cover page — назначение, версия, ответственный
- Usage guidelines для каждого компонента: когда применять, когда не применять, примеры правильного и неправильного использования
- Changelog — что изменилось в каждой версии
Сроки
UI-кит для небольшого веб-приложения (20–30 компонентов) — 10–15 рабочих дней. Полноценный UI-кит для крупного продукта (50+ компонентов, токены, документация) — 4–6 недель.