UI kit для дизайнера: что это такое и как с ним работать

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

Собрать такие решения в одном месте, чтобы их было удобно использовать повторно, помогает UI-кит. Это общая библиотека разных элементов интерфейса, благодаря которой команде проще создавать новые экраны и придерживаться общих стандартов оформления.

В этом материале вместе с дизайнером Анастасией Суроегиной разбираемся:

• что такое UI-кит и чем он отличается от дизайн-системы и библиотеки компонентов;
• из каких компонентов состоит UI kit;
• почему он нужен не только дизайнерам;
• с чего начать разработку своего UI-кита, где его создавать самостоятельно и где найти готовые;
• какие частые ошибки совершают новички.

Что такое UI-кит и зачем он нужен

UI-кит (User Interface Kit) — это коллекция визуальных элементов интерфейса: цветов, текстовых стилей, кнопок, полей, иконок, карточек, меню и других компонентов. Обычно его создают в графическом редакторе, например Figma или Sketch, и используют как общую библиотеку для одного продукта или команды.

Главная идея UI-кита — фиксировать уже принятые решения, чтобы использовать их повторно. Например, если в продукте есть три типа кнопок, дизайнеру не нужно каждый раз вспоминать их размеры, скругление, цвет и состояние. Все эти параметры уже определены в UI-ките.

UI-кит помогает:

• Ускорить работу над интерфейсом. Дизайнер может собрать новый экран из существующих элементов вместо того, чтобы создавать их заново.

• Поддерживать единый стиль. UI-кит задаёт ключевые правила: какие цвета и шрифты использовать, как выглядят основные компоненты и какие состояния они имеют. Так разные экраны воспринимаются как части одного продукта.
• Упростить работу разработчикам. Как и дизайнеры, через сформированный UI kit они узнают, какие элементы должны появляться в интерфейсе и как с ними взаимодействовать. На больших проектах такой подход становится частью более широкой дизайн-системы: помимо компонентов, туда входят документация, правила, токены, кодовые библиотеки и рекомендации по использованию.

• Масштабировать продукт. Когда проект растёт, появляются новые разделы и к работе подключается больше людей. UI-кит даёт команде общую основу: готовые компоненты можно использовать повторно и адаптировать под разные задачи. Интерфейс при этом остаётся цельным, но не однообразным.

Анастасия Суроегина

продуктовый дизайнер с опытом в UI и маркетинге, иллюстратор

---

— Может случиться так, что ты как дизайнер ещё не знаешь, до каких масштабов разрастётся продукт. Всё начинается с пары страниц, а в итоге у вас целая экосистема. Чтобы потом не тратить кучу времени на пересборку макетов на компонентах, лучше начинать вести UI kit сразу на старте разработки макетов.

Первое время файл будет хаотичным, но он поможет окинуть взглядом все появляющиеся компоненты и оценить их совместимость. Новые компоненты будут создаваться сразу в системе, и исправлять неконсистентные отступы или скругления не придётся. Когда доделаете проект, можно и в UI kit прибраться :)

Чем UI-кит отличается от дизайн-системы и библиотеки компонентов

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

UI-кит — это набор визуальных элементов и правил, по которым строится интерфейс.

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

Дизайн-система шире обоих этих понятий. Это продуманная структура, которая не только описывает, как должны выглядеть элементы, но и объясняет, как и почему их используют. В ней могут быть собраны принципы дизайна, токены, правила доступности, документация, паттерны взаимодействия, библиотеки для дизайнеров и разработчиков и кодовые компоненты.

Поэтому UI-кит можно считать частью дизайн-системы, но полноценная дизайн-система не сводится к UI-киту.

Читайте также:

Лучшие примеры дизайн-систем мира

Из чего состоит UI-кит

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

Цветовая палитра

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

Нужно учитывать и контрастность. Цветовая система должна работать для текста, интерактивных элементов и разных состояний интерфейса. Например, доступность нельзя оставлять на конец проекта: современные дизайн-системы рассматривают её как часть компонентов и паттернов.

Анастасия Суроегина

продуктовый дизайнер с опытом в UI и маркетинге, иллюстратор

---

— Лучшее решение — собирать палитру на токенах. Они могут закрепляться за базовыми цветами проекта, состояниями элементов и типом контента (текст, фон, акценты). Токены также закладывают возможность темизации: определить, как изменится тот или иной цвет в конкретном состоянии при выборе тёмной или светлой темы (такая настройка, например, есть в Figma).

Типографика

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

Кнопки и формы

Кнопки — один из базовых компонентов любого UI kit. Для них обычно задают размер, высоту, внутренние отступы, цвет, радиус, типографику.

Отдельно описывают состояния: обычное, наведённое, нажатое, недоступное. Для сложных интерфейсов могут понадобиться состояния загрузки, фокусировки и другие варианты.

То же относится к формам. В UI-кит могут входить текстовые поля, чекбоксы, радиокнопки, переключатели, выпадающие списки, поля поиска и другие элементы ввода.

На самом деле нужно предусмотреть не только «идеальное» состояние. Например, поле ввода должно иметь варианты с введённым текстом, ошибкой, подсказкой, фокусом и недоступностью. Иначе при проектировании реального экрана дизайнеру снова придётся создавать недостающие состояния вручную.

Иконки

Иконки помогают обозначать действия, статусы и разделы интерфейса. В UI-ките их объединяют в едином стиле и задают правила использования.

Здесь важны размер, толщина линий, форма, сетка и визуальный вес. Если рядом находятся иконки, созданные в разное время и в разных стилях, интерфейс быстро начинает выглядеть несогласованным.

Для повторяющихся элементов удобно использовать компоненты или библиотеку иконок. При этом не стоит превращать каждую разновидность иконки в отдельный сложный компонент, если для неё достаточно обычного набора графических элементов.

Карточки, меню и другие компоненты

Помимо базовых элементов, UI-кит содержит более сложные: карточки товаров, навигацию, модальные окна, уведомления, тултипы, списки и другие элементы.

Компонент должен решать конкретную задачу. Карточка товара и карточка статьи могут быть похожи, но не обязательно должны становиться одним универсальным компонентом с десятками настроек. Чем больше исключений приходится предусматривать, тем сложнее поддерживать такой компонент.

«В создании UI-китов ты всегда балансируешь между минимальной вариативностью и миллионом настроек. Для отдельных компонентов (например, кнопок) могут существовать несколько десятков вариантов, но настроек у них будет не так много», — отмечает Анастасия Суроегина.

UI-паттерны

UI-паттерн — это уже не отдельный элемент, а типовое решение задачи пользователя: паттерн фильтрации товаров, многошаговая форма регистрации или сценарий подтверждения удаления и другие. Он строится из разных компонентов.

Компоненты — это отдельные элементы интерфейса, а паттерны описывают, как они работают вместе в типовом сценарии. Например, кнопка — компонент, а многошаговая форма с полями ввода, сообщениями об ошибках и правилами перехода между этапами — паттерн.

Кто использует UI-кит

В первую очередь UI-киты используют UX/UI-дизайнеры.

Кроме них, к UI-китам прибегают и другие специалисты. Арт-директор или дизайн-лид может использовать их как инструмент контроля качества: если основные решения зафиксированы, проще проверять макеты разных дизайнеров. Разработчики обращаются к UI-киту, чтобы сопоставить дизайн с реализацией. А UX-исследователям и продуктовым менеджерам он помогает понимать, какие типовые решения уже существуют в продукте и какие изменения затронут несколько экранов.

«UI-китами обязательно пользуются не только дизайнеры продукта, но и коммуникационные дизайнеры, создающие, например, промолендинги. Пусть это не сложный разветвленный продукт, но во всех проявлениях бренда должно быть единство», — подчёркивает Анастасия.

Как создать UI-кит

Не нужно пытаться сразу нарисовать сотню компонентов. Сначала стоит посмотреть на уже существующий продукт и найти повторяющиеся решения.

1. Определите базовые стили

Начинать нужно с фундамента интерфейса: цвета, шрифты, размеры текста, сетку, отступы, радиусы, тени и другие визуальные параметры.

На этом этапе полезно провести аудит существующих экранов. Если в продукте уже используют четыре похожих оттенка серого для текста, нужно решить, действительно ли нужны все четыре. То же касается размеров шрифта, вариантов кнопок и других повторяющихся решений.

2. Соберите основные компоненты

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

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

3. Настройте варианты и состояния

Один компонент часто существует в нескольких вариантах. У кнопки может быть несколько размеров и типов, у поля — разные состояния, у переключателя — включённое и выключенное положение.

В Figma для этого используют опции Variants и Component properties. Например, свойства могут описывать размер, цвет или состояние компонента. Figma рекомендует разделять независимые характеристики: вместо одного свойства «Стиль» со значениями Primary Large и Secondary Small лучше использовать отдельные свойства Type и Size.

Так компонент остаётся управляемым. Дизайнеру не приходится искать среди десятков почти одинаковых элементов нужную кнопку.

«Если в вашем компоненте появляется какая-то функция, которая может быть или не быть (как у Шекспира), то используйте тип варианта Boolean. В дочерних компонентах вы будете видеть обычный свитчер и сможете легко управлять состоянием элемента, например включать и выключать иконку в кнопке», — советует Анастасия.

4. Продумайте структуру библиотеки

Даже хороший набор компонентов бесполезен, если в нём сложно ориентироваться. Нужно заранее определить систему названий и группировки элементов.

Структура папок и названия должны быть понятны любому, кто работает с UI-китом. Если к проекту подключится новый дизайнер, он сможет быстро сориентироваться в библиотеке и найти нужный элемент без дополнительных пояснений.

Анастасия Суроегина

продуктовый дизайнер с опытом в UI и маркетинге, иллюстратор

---

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

5. Поддерживайте UI-кит в актуальном состоянии

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

Если команда добавила новый компонент, изменила цвет бренда или обновила поведение кнопки, соответствующие изменения нужно внести в UI-кит. Иначе через несколько месяцев библиотека и продукт начнут существовать независимо друг от друга. Можно назначить человека или команду, которые отвечают за наполнение библиотеки, и продумать, как лучше вносить изменения.

Где создавать UI-кит

Выбор инструмента зависит от команды и проекта. Сам по себе редактор не делает UI-кит хорошим — важнее структура компонентов, правила и то, насколько удобно ими пользоваться.

• Figma. Один из наиболее удобных вариантов для командной работы. Поддерживает компоненты и их свойства, варианты, переменные и библиотеки. UI-киты можно подключать и использовать как библиотеки, а готовые наборы доступны в Figma Community и среди официальных UI-китов. Плюс Figma — в ней можно работать совместно и удобно передавать макеты разработчикам. Минус — зависимость от подключения к интернету и ограничений тарифов.
• Sketch. Подходит для команд, которые работают в экосистеме Sketch. В нём есть библиотеки компонентов и стилей, которые можно использовать между документами. Главное ограничение — Sketch ориентирован прежде всего на macOS.
• Adobe XD. Технически позволяет создавать и использовать UI-киты и библиотеки, но сегодня выбирать его для нового проекта стоит с осторожностью. Adobe официально указывает, что XD находится в режиме техобслуживания: компания не развивает продукт и не выпускает новые функции, ограничиваясь лишь исправлениями ошибок и вопросами безопасности.
• Другие инструменты. Помимо графических редакторов, для работы с UI-китами и дизайн-системами используют специализированные сервисы. Например, Penpot подходит для создания интерфейсов и компонентов, Zeroheight — для документации дизайн-системы, а Storybook — для разработки и документирования компонентов в коде. Такие инструменты обычно используют вместе с основным редактором, а не вместо него.

Где взять готовый UI-кит

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

• Бесплатные библиотеки. Их можно найти в Figma Community, в официальных библиотеках платформ и в открытых дизайн-системах. Например, Figma предлагает UI-киты от Figma и партнёров, среди которых есть наборы Material 3 и интерфейсы Apple. Открытые дизайн-системы также публикуют свои компоненты и рекомендации — например, Material Design и Atlassian Design System.
• Платные UI-киты. Их можно купить в специализированных каталогах и на дизайн-маркетплейсах, например UI8 или Designmodo. Платный набор может содержать больше компонентов, экранов, шаблонов и состояний, но перед покупкой стоит проверить лицензию, актуальность и совместимость с вашим продуктом.

Готовый UI-кит может стать хорошей основой для проекта, но использовать его без изменений не всегда имеет смысл. Часть компонентов может не пригодиться, а стандартные решения — сделать интерфейс шаблонным. Лучше оставить нужные элементы и адаптировать их под задачи и визуальный стиль продукта.

Какие ошибки допускают при создании UI-кита

Слишком много компонентов. Иногда дизайнер пытается предусмотреть любой возможный сценарий и создаёт десятки вариантов одного элемента. В результате библиотека становится сложнее самого продукта.

Дубли элементов. Одна и та же кнопка может оказаться в библиотеке несколько раз с небольшими различиями. Со временем дизайнеры начинают использовать разные версии, и единый стиль снова нарушается.

UI-кит не обновляется вместе с продуктом. Это одна из самых серьёзных проблем. Если команда уже изменила интерфейс, а библиотека осталась прежней, новые макеты будут собираться на устаревшей основе.

Пытаться сделать UI-кит «идеальным» до начала работы с продуктом. На практике библиотека развивается вместе с интерфейсом. Лучше создать небольшой набор действительно нужных компонентов, проверить его в работе и постепенно расширять.

Анастасия Суроегина

продуктовый дизайнер с опытом в UI и маркетинге, иллюстратор

---

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

Главное о UI-китах для дизайнера

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

Частые вопросы о UI kit

Можно ли создать UI-кит одному дизайнеру?

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

Главное — определить правила, по которым будут создаваться элементы, и поддерживать библиотеку в порядке. Если проект вырастет, UI-кит можно постепенно расширять вместе с командой.

Чем UI-кит отличается от шаблона интерфейса?

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

UI-кит состоит преимущественно из отдельных переиспользуемых элементов: кнопок, полей, карточек, иконок и других компонентов. Из них можно собрать разные экраны.

Проще говоря, шаблон — это скорее готовый результат, а UI-кит — набор деталей для его создания.

Нужно ли обновлять UI-кит после релиза продукта?

Да, его всегда нужно поддерживать в актуальном состоянии. Если после релиза меняются компоненты, стили или правила интерфейса, изменения стоит отражать в UI-ките. В идеале библиотека должна развиваться вместе с продуктом.

Можно ли использовать один UI-кит для нескольких проектов?

Можно, если у проектов действительно много общих элементов и правил. Например, одна компания может использовать общую библиотеку для нескольких цифровых продуктов.

Но полностью одинаковый UI-кит подходит не всегда. Разным продуктам могут требоваться разные компоненты, стили и сценарии. Поэтому часто используют общую базу и отдельные продуктовые расширения.

Как передать UI-кит разработчикам?

Самый простой вариант — дать разработчикам доступ к библиотеке и документации. В ней должны быть не только картинки компонентов, но и информация о вариантах, состояниях, поведении и правилах использования. Ещё лучше, когда дизайн-компоненты связаны с компонентами в коде. Тогда дизайнер и разработчик имеют дело с одной системой терминов и решений.