Что такое UI Kit и зачем он вообще нужен

UI Kit — это набор готовых компонентов интерфейса: кнопки, поля ввода, карточки, иконки, типографика, цвета. Всё собрано в одном месте и задокументировано так, чтобы любой дизайнер или разработчик мог открыть файл и сразу понять, как выглядит и работает интерфейс продукта.

Представь: ты работаешь над большим сайтом. Дизайнер нарисовал кнопку в одном разделе — синюю, с радиусом 8px. В другом разделе нарисовал её же, но чуть темнее и с радиусом 4px. Разработчик сделал третий вариант прямо в коде, потому что не нашёл исходник. Итог — в интерфейсе три разных кнопки, которые должны выглядеть одинаково. Пользователь этого явно не заметит, но подсознательно сайт начнёт казаться сырым.

UI Kit решает именно эту проблему — даёт единый источник правды для всей команды.

Кому нужен UI Kit

Короткий ответ: всем, кто делает продукт дольше одного месяца и с командой больше одного человека.

Стартапам. Продукт растёт быстро, команда меняется. Без UI Kit новый дизайнер или разработчик будет тратить дни, чтобы разобраться, как всё устроено. С ним — несколько часов.

Агентствам и студиям. Когда ведёшь несколько проектов параллельно, UI Kit позволяет не изобретать велосипед на каждом из них. Берёшь базовый набор, адаптируешь под бренд клиента — и экономишь 20–40% времени на дизайн.

Крупным компаниям. Здесь UI Kit превращается в полноценную дизайн-систему с правилами, документацией и версионированием. Без этого поддерживать консистентность продукта с десятками команд просто невозможно.

Маленьким проектам. Если делаешь лендинг для одного клиента и больше к нему не вернёшься — UI Kit избыточен. Но если сайт будет развиваться, лучше потратить лишние 4–6 часов сразу, чем разгребать хаос через полгода.

Из чего состоит UI Kit

Хороший UI Kit — это не просто набор картинок. Это живой документ со структурой.

Цвета. Основная палитра: primary, secondary, accent. Нейтральные: фоны, текст, разделители. Статусные: успех, ошибка, предупреждение, информация. Для каждого цвета — HEX, RGB и переменная для кода, например --color-primary: #3B5BDB.

Типографика. Все уровни заголовков (H1–H6), основной текст, caption, labels. Для каждого — шрифт, размер, межстрочный интервал, вес. Хорошая типографическая система строится на нескольких базовых значениях — обычно 4px или 8px grid.

Отступы и сетка. Система отступов — фиксированный набор значений: 4, 8, 12, 16, 24, 32, 48, 64px. Никаких 13px или 17px. Сетка: количество колонок, ширина гаттера, максимальная ширина контейнера.

Базовые компоненты. Кнопки со всеми состояниями (default, hover, active, disabled, loading), поля ввода, чекбоксы, радиокнопки, переключатели, выпадающие списки, теги, badges.

Составные компоненты. Карточки, модальные окна, тосты и уведомления, навигация, хлебные крошки, таблицы, пагинация.

Иконки. Единый стиль — outline или filled, но не вперемешку. Единый размер или несколько стандартных: 16, 20, 24px.

Иллюстрации и изображения. Если в продукте есть иллюстрации — их стиль тоже часть UI Kit. Аспектные соотношения для изображений, плейсхолдеры.

Как создать UI Kit: пошаговый процесс

Шаг 1. Начни с аудита

Если UI Kit создаётся для существующего продукта, сначала нужно понять, что уже есть. Сделай скриншоты всех экранов, выпиши все уникальные кнопки, цвета, шрифты. Обычно на этом этапе обнаруживается, что в продукте 5–7 слегка разных синих цветов вместо одного и три варианта основной кнопки.

Для нового проекта этот шаг заменяется анализом бренда: цветовая палитра из брендбука, шрифты, общее настроение.

Шаг 2. Определи токены

Токены — базовые переменные дизайна: цвета, размеры, тени, радиусы. Их имена должны быть семантическими, а не описательными.

Плохо: blue-500, gray-200. Хорошо: color-primary, color-background-secondary.

Почему это важно? Если завтра primary-цвет изменится с синего на зелёный, ты меняешь значение одного токена — и всё обновляется везде. Если использовать blue-500 напрямую, придётся менять вручную в каждом месте.

В Figma токены реализуются через Variables (появились в 2023 году). В коде — через CSS Custom Properties или JS-объект для Tailwind и Styled Components.

Шаг 3. Собери базовые компоненты

Начинай с атомов: цвета, типографика, отступы. Потом переходи к молекулам: кнопки, инпуты, иконки. Затем организмы: формы, карточки, навигация.

Это принцип Atomic Design, предложенный Брэдом Фростом. Необязательно следовать ему строго, но логика «от простого к сложному» помогает избежать путаницы.

Для каждого компонента прорисуй все состояния. Кнопка без состояния hover — это не компонент, это картинка. Разработчик всё равно спросит, как она должна выглядеть при наведении, и ты либо ответишь сразу, либо он придумает сам.

Шаг 4. Документируй по ходу

Не оставляй документацию на потом. Пока делаешь компонент, напиши рядом: для чего он, когда использовать, какие есть варианты. Достаточно 2–3 строки на компонент. Потом будешь благодарен себе — или коллега будет благодарен тебе.

В Figma для этого удобно использовать аннотации или отдельную страницу с описаниями. Если проект большой — Notion или Confluence с линками на компоненты в Figma.

Шаг 5. Свяжи дизайн с кодом

UI Kit в Figma — это хорошо. Но если разработчик делает компоненты с нуля, не глядя на Figma, ценность UI Kit теряется наполовину.

Есть несколько подходов:

  • Storybook — библиотека для документирования React/Vue/Angular компонентов. Разработчики собирают компоненты, дизайнеры смотрят результат прямо в браузере.
  • Tokens Studio — плагин для Figma, который синхронизирует токены в JSON для использования в коде.
  • Figma Dev Mode — разработчики видят CSS-значения прямо из Figma без лишних вопросов и переспрашиваний.

Идеальная ситуация: дизайнер обновил кнопку в Figma, токены синхронизировались, разработчик обновил npm-пакет — и кнопка изменилась во всём продукте.

Инструменты

Figma — стандарт де-факто. Компоненты, варианты, Variables, Auto Layout, Dev Mode. Для большинства проектов этого более чем достаточно.

Sketch — популярен на Mac, но постепенно теряет позиции. Хорошая экосистема плагинов, но нет облачного коллаборейшна как в Figma.

Adobe XD — фактически заморожен в развитии. Adobe перестала его активно развивать в 2023 году, лучше не начинать с него новые проекты.

Penpot — открытый аналог Figma, можно поднять на своём сервере. Интересен для тех, кто не хочет зависеть от облака. Пока уступает Figma по функциональности, но активно развивается.

Storybook — для кодовой части UI Kit. Компоненты документируются с живыми примерами, можно смотреть разные состояния и передавать параметры прямо в браузере.

Типичные ошибки

Начать со сложного. Попытка сразу построить идеальную систему с токенами, документацией и автоматической синхронизацией приводит к тому, что через месяц работа не завершена, а команда уже устала. Начни с малого: 10 базовых компонентов — и используй. Потом расширяй.

Не обновлять. UI Kit, который создали год назад и забыли, быстро устаревает. Компоненты живут в Figma, а в продукте — совсем другие. Доверие к UI Kit теряется, и команда перестаёт им пользоваться. Нужен процесс обновления: кто отвечает, как часто, как фиксировать изменения.

Сделать для галочки. UI Kit ради UI Kit — пустая трата времени. Он должен решать реальную проблему: ускорять работу, снижать количество ошибок, помогать новым людям быстро войти в проект.

Игнорировать разработчиков. Дизайнер сделал красивый UI Kit, но разработчики не знают, что он существует, или не понимают, как им пользоваться. Результат — разрыв между дизайном и кодом. UI Kit должен создаваться совместно или хотя бы с учётом того, как его будут использовать в коде.

Переусложнить именование. Компонент с именем Button/Primary/Large/WithIcon/Active звучит исчерпывающе, но когда таких компонентов 200 — ориентироваться невозможно. Найди баланс между точностью и простотой.

UI Kit vs дизайн-система — в чём разница

Эти термины часто используют как синонимы, но разница есть.

UI Kit — набор компонентов. Это инструмент дизайнера: файл в Figma, откуда тащат элементы на экраны.

Дизайн-система — это UI Kit плюс принципы, плюс правила использования, плюс документация, плюс кодовая библиотека компонентов. Это живой продукт внутри компании с владельцами, бэклогом и релизами.

Для небольшого проекта UI Kit более чем достаточно. Дизайн-система оправдана, когда над продуктом работают несколько команд одновременно или когда продуктов несколько под одним брендом.

Сколько времени нужно

Минимальный UI Kit для среднего проекта (50–70 компонентов) — 2–3 дня при наличии бренд-гайдлайна. Если бренда нет и нужно создавать с нуля — 5–7 дней.

Полноценная дизайн-система с кодовой частью — несколько недель минимум.

В REEXY при разработке корпоративных сайтов и интернет-магазинов UI Kit создаётся как часть работы над проектом: это не отдельная платная опция, а способ работать быстрее и не переделывать одно и то же по несколько раз.

Когда UI Kit можно не делать

  • Одностраничный лендинг без дальнейшего развития
  • Прототип для валидации идеи
  • Личный проект, который ты делаешь сам и всё держишь в голове

Во всех остальных случаях время, потраченное на UI Kit, окупается. Обычно уже на третьем месяце работы над проектом.