Getly
UI-кит, или UI-библиотека, это обещание сэкономить время. Вы покупаете набор кнопок, форм, карточек и экранов, чтобы не рисовать их заново и чтобы следующий экран выглядел частью того же продукта, что и предыдущий. Хороший кит держит это обещание месяцами. Слабый даёт красивое превью, папку разрозненных фреймов и неделю уборки, прежде чем им можно пользоваться.
Этот текст для дизайнеров и разработчиков, которые выбирают кит, и для тех, кто думает сделать свой на продажу. В нём форматы, что проверить до оплаты, как оценить кит только по скриншотам и какие сейчас цены.
Дизайн-кит и кит в коде: это разные продукты
Слово «UI-кит» обозначает две вещи, которые только похожи. Дизайн-кит это файл для редактора: Figma, Sketch или Adobe XD. Он даёт компоненты, из которых собирают макеты и прототипы. Кит в коде это исходники: компоненты React, шаблоны на Tailwind, компоненты Vue или Svelte, виджеты Flutter, представления SwiftUI. Он даёт то, что запускается.
Многие продавцы предлагают оба варианта, и лучшие держат их согласованными: те же названия, те же токены, те же состояния. Если кит заявлен как оба сразу, проверьте, что файл и код действительно совпадают. Кнопка в Figma с четырьмя размерами и кнопка в React с двумя это расхождение, которое каждый раз будет стоить вашему разработчику отдельного разговора.
Вот как сравниваются основные форматы.
| Тип кита | Кому подходит | Что проверить |
|---|---|---|
| Figma | Большинству продуктовых дизайнеров и командам, которые передают файлы разработчикам | Компоненты с вариантами, auto layout в каждом компоненте, локальные стили или переменные для цвета, шрифтов и отступов, светлая и тёмная тема |
| Sketch | Дизайнерам на Mac, которые уже работают в Sketch | Символы с overrides, общие стили текста и слоёв, версия Sketch, в которой сохранён файл, открывается ли он без предупреждений об отсутствующих шрифтах |
| Adobe XD | Командам, которые ещё поддерживают старые проекты в XD | Состояния компонентов, обновляет ли продавец кит, способ экспорта, если вы планируете переход на другой редактор |
| React или Next.js | Фронтенд-разработчикам веб-приложений | Типы TypeScript, подход к стилям, как компоненты принимают props, атрибуты доступности, живое демо |
| Шаблоны на Tailwind | Разработчикам, которым нужен готовый HTML или JSX с utility-классами | Версия Tailwind, конфиг темы с токенами, адаптивные классы в каждой секции, классы тёмной темы |
| Flutter | Мобильным разработчикам, которые выпускают iOS и Android из одной кодовой базы | Версия Flutter и Dart, null safety, файл темы, поведение на маленьких и больших экранах |
| Мобильные дизайн-киты (iOS, Android) | Дизайнерам нативных приложений | Соблюдение гайдлайнов платформы (safe area, паттерны навигации), реальные размеры экранов устройств, размеры зон нажатия |
Выбирайте формат, в котором уже работает ваша команда. Красивый кит для Sketch плохая покупка для команды на Figma: при конвертации теряются auto layout и варианты, то есть ровно то, за что вы платили.
Что входит в хороший UI-кит
Превью продают кит. Полезным его делает то, что внутри. Вот на что смотреть.
Компоненты с вариантами и auto layout
Каждый повторяющийся элемент должен быть компонентом, а не скопированной группой слоёв. У кнопки размеры, типы (основная, второстепенная, ghost, деструктивная) и состояния (обычное, наведение, нажатие, фокус, отключена, загрузка) должны быть вариантами одного компонента, чтобы вы переключали их из меню, а не искали нужный фрейм.
Auto layout важен не меньше. Впишите в кнопку длинную подпись, и она должна вырасти. Добавьте строку в таблицу, и строки ниже должны сдвинуться. Если всё приходится растягивать руками, кит это картинка интерфейса, а не система.
Дизайн-токены и стили
Цвет, типографика и отступы должны быть заданы один раз и использоваться везде. В Figma это переменные или локальные стили, в коде файл темы, CSS-переменные или конфиг Tailwind. Ищите именованную палитру с понятными ролями (фон, поверхность, текст, граница, основной, опасность), шкалу шрифтов с фиксированными размерами и межстрочным интервалом и шкалу отступов, обычно кратную 4 или 8 пикселям.
Проверка простая: поменяйте основной цвет в одном месте. В хорошем ките обновятся все кнопки, ссылки и бейджи. В слабом вы найдёте зашитые hex-значения в пятидесяти слоях.
Светлая и тёмная тема
Тёмную тему сейчас ждут в большинстве продуктов. Если кит её предлагает, она должна работать через токены, а не через вторую копию каждого экрана. Проверьте, что в обеих темах нормальный контраст, что границы и тени читаются на тёмных поверхностях и что картинки и иллюстрации не светятся на чёрном фоне.
Доступность
- Контраст. Основной текст должен соответствовать WCAG AA, то есть контраст не меньше 4.5:1 к фону, и 3:1 для крупного текста и границ элементов управления. Светло-серый текст на белом самая частая ошибка китов, которые элегантно смотрятся на превью.
- Состояние фокуса. Каждому интерактивному компоненту нужен видимый стиль фокуса для тех, кто работает с клавиатуры. Если у кнопки есть наведение и нажатие, но нет фокуса, кит делали без мысли о клавиатуре.
- Зоны нажатия. Область нажатия должна быть не меньше 44 на 44 пункта на iOS и 48 на 48 dp на Android. Маленькие кнопки-иконки в мобильных китах часто до этого не дотягивают.
- В китах в коде ищите семантический HTML, подписи у полей форм, ARIA-атрибуты там, где они нужны, и поддержку клавиатуры у меню, диалогов и вкладок.
Адаптивные брейкпоинты
Веб-кит должен показывать макеты на нескольких ширинах, обычно телефон, планшет и десктоп. В дизайн-файле ищите фреймы под каждый брейкпоинт и компоненты, которые подстраиваются. В коде проверьте, что сетка, навигация и таблицы ведут себя разумно на узком экране, а не просто сжимаются.
Иконки и шрифты и их лицензии
Большинство китов идут с набором иконок, многие используют конкретную гарнитуру. У обоих свои лицензии. Узнайте, какая библиотека иконок внутри: открытый набор под MIT или похожей лицензией легко использовать в продукте, а иконки, нарисованные продавцом, подпадают под лицензию самого кита. По шрифтам проверьте, бесплатна ли гарнитура для коммерческого использования (многие шрифты Google Fonts бесплатны по лицензии SIL Open Font License) или лицензию на шрифт нужно покупать отдельно. Кит может быть разрешён для коммерции, а шрифт в нём нет.
Документация
Даже короткое руководство помогает: как устроен файл, как названы токены, как сменить тему, как установить кит в коде и какие зависимости ему нужны. Обложка со списком компонентов и журнал изменений признаки продавца, который поддерживает продукт.
Обновления
Редакторы и фреймворки меняются. В Figma появились переменные, Tailwind перешёл на новую мажорную версию, React продолжает развиваться. Кит, который не трогали несколько лет, может и работать, но ему могут не хватать возможностей, которые упрощают работу. Ищите номер версии, дату последнего обновления и описание того, что в нём изменилось.
Лицензии для клиентской и коммерческой работы
Этот вопрос пропускают, а потом жалеют. До покупки выясните:
- Можно ли использовать кит в коммерческом продукте, который вы продаёте или запускаете?
- Можно ли использовать его в клиентских проектах, и если да, для одного клиента или для многих?
- Можно ли использовать его внутри шаблона или кита, который вы потом перепродаёте? Почти любая лицензия это запрещает, и это честно.
- Распространяется ли лицензия на всю команду или на одного дизайнера?
- Действуют ли те же условия для иконок и шрифтов внутри?
Если в описании об этом не сказано, спросите продавца до оплаты. Одна строка письменного ответа стоит больше любого предположения.
Как оценить кит по скриншотам
Открыть файл до покупки обычно нельзя, поэтому учитесь читать превью.
- Ищите лист компонентов, а не только готовые экраны. Страница с кнопкой во всех состояниях, полями с ошибками и подсказками и полной шкалой шрифтов говорит о том, что система существует.
- Посмотрите на панель слоёв, если она попала на скриншот. Названные компоненты и фреймы говорят об аккуратном файле, а «Group 214» и «Rectangle copy 3» об обратном.
- Смотрите на реалистичные экраны. Пустые состояния, сообщения об ошибках, длинные имена в таблицах и скелетоны загрузки показывают кит для настоящих продуктов. Десять версий идеального дашборда с круглыми цифрами показывают кит для скриншотов.
- Приблизьте текст и края. Низкий контраст и кривые отступы видны на превью, если смотреть внимательно.
- Для китов в коде попросите живое демо и поменяйте ширину окна браузера. Пройдите по нему клавишей Tab. Пять минут такой проверки скажут больше любого описания.
- Посчитайте, что в комплекте. Хорошее описание называет число компонентов, экранов и файлов, форматы и версии редакторов.
Передача разработчикам
Дизайн-кит отрабатывает свою цену, когда разработчик может верстать по нему, ничего не угадывая. Единые названия токенов, совпадающие с тем, что будет в коде, компоненты, которые соответствуют реальным компонентам в коде, и отступы по шкале, а не случайные значения, сокращают переписку. Если команда пользуется режимом разработчика в Figma или похожим инструментом инспекции, auto layout и переменные превращаются в читаемые значения, а нарисованные вручную фреймы в список пиксельных сдвигов.
Самый сильный вариант для продуктовой команды часто пара: дизайн-кит и кит в коде из одного источника на одних токенах. Если покупаете их по отдельности, выбирайте так, чтобы основы совпадали, или закладывайте время на их согласование.
Сколько стоят UI-киты
На Getly, по замеру 2 октября 2026 года, 18 активных UI-китов в категориях UI Kits и Mobile UI Kits. Бесплатных среди них нет. Нижний квартиль цены $7.00, медиана $12.00, верхний квартиль $19.75. Чаще всего они приходят архивом .zip.
Это даёт полезную рамку. Примерно до $7 ждите узкий кит: экраны одного приложения или небольшой набор компонентов. Около $12 ждите приличную библиотеку компонентов со стилями. Ближе к $20 и выше честно просить варианты, токены, обе темы, документацию и понятную лицензию. Крупные коммерческие дизайн-системы в других местах стоят намного дороже, поэтому вопрос никогда не только в цене, а в том, покрывает ли кит то, что вы на самом деле будете строить.
Для продавцов, которые делают UI-кит
Если вы делаете кит на продажу, чек-лист выше это и есть ваше техническое задание. Важнее всего несколько пунктов:
- Показывайте систему, а не только картинки. Добавьте превью листа компонентов, страницы токенов и обеих тем. Покупатели, которые знают, что искать, хотят это увидеть.
- Укажите формат и версии в названии или первой строке: Figma, Sketch, React, Tailwind, Flutter и какая версия.
- Напишите лицензию простыми словами, включая клиентскую работу, использование командой и условия для иконок и шрифтов внутри.
- Перечислите содержимое с числами: компоненты, экраны, брейкпоинты, файлы.
- Положите короткий readme в .zip, чтобы покупатель знал, с чего начать, как только откроет архив.
- Обновляйте кит и говорите об этом. Журнал изменений в описании показывает покупателю, что кит живой.
UI-кит это небольшой продукт с долгой жизнью. Выберите тот, что устроен как система, проверьте лицензию до того, как строить на нём, и он окупится на первом же проекте.
