Разработка UI-компонентов на Bitrix24 UI Kit (React)

Разрабатываете интерфейс для интеграции с Битрикс24? Готовые UI-киты не учитывают дизайн-систему портала — приходится вручную подгонять стили, цвета и отступы. Bitrix24 UI Kit решает эту проблему: его React-компоненты наследуют тему портала автоматически. Мы используем @bitrix24/b24ui для создания интерфейсов — от кнопок до сложных дашбордов, которые неотличимы от родных. Получите консультацию — оценим ваш проект за один день.

Какие проблемы решает Bitrix24 UI Kit?

Стандартные UI-фреймворки требуют ручной адаптации под тему портала, RTL и специфику Битрикс24. Bitrix24 UI Kit избавляет от этого: компоненты наследуют стили портала, включая тёмную тему. Разработка с ним идёт в 2–3 раза быстрее, чем написание с нуля. Встроенная поддержка RTL и многоязычности сокращает объём кода на треть. За счёт готовых компонентов вы экономите до 40% бюджета на разработку интерфейсов.

Как интегрировать Bitrix24 UI Kit с React?

Интеграция выполняется через пакет @bitrix24/b24ui. Он содержит готовые React-компоненты, которые автоматически подхватывают тему портала через <cite>B24ThemeProvider</cite>. Для работы с REST API используется @bitrix24/b24jssdk с полной типизацией TypeScript. Установка одного пакета заменяет ручную адаптацию каждого компонента.

import { B24ThemeProvider, Button, Input, Table } from '@bitrix24/b24ui';

function App() {
  return (
    <B24ThemeProvider>
      <Dashboard />
    </B24ThemeProvider>
  );
}

// Хук для работы с темой
function ThemeAwareComponent() {
  const { theme, isDark } = useB24Theme();
  return <div className={isDark ? 'dark-specific' : ''}>...</div>;
}

Как кастомизировать компоненты Bitrix24 UI Kit?

Кастомизация возможна двумя способами: через передачу пропсов (например, color, size) и через CSS-переменные дизайн-токенов. Если нужно расширить функциональность — создаёте компонент-обёртку, который наследует стили UI Kit. Дизайн-токены доступны как CSS-переменные: --b24-color-base-3, --b24-radius-md, --b24-font-family. Полный перечень в официальной документации.

Настройка и инициализация темы

Используйте B24ThemeProvider для автоматической синхронизации. Хук useB24Theme возвращает объект темы и флаг isDark. При смене темы в портале приложение обновляется без перезагрузки.

Кейс: дашборд KPI для отдела продаж (из нашей практики)

Клиент — крупный отдел продаж с 30 менеджерами. Потребовался дашборд KPI с реальными данными из CRM Битрикс24. Интерфейс должен быть стилистически неотличим от портала, поддерживать тёмную тему и работать без обучения. Использованные компоненты UI Kit: Table для таблицы менеджеров, Badge для статусов (выполнено/нет), Avatar для фото, Select для периода, Button для экспорта. Кастомные компоненты поверх UI Kit: прогресс-бар KPI (через CSS-переменные UI Kit), спарклайн-графики (Recharts со стилизацией под палитру Битрикс24), таблица рейтинга с drag-and-drop сортировкой. Данные получались через REST API CRM с использованием @bitrix24/b24jssdk. Запросы асинхронные с кэшированием. Результат: пользователи не воспринимают дашборд как стороннее приложение — интерфейс органично вписан. Время разработки сократилось на 40%, общая стоимость в 2,5 раза ниже, чем при разработке с нуля.

Сравнение: свой UI против Bitrix24 UI Kit

Что входит в разработку

• Аудит требований к интерфейсу, составление компонентного плана
• Настройка проекта: @bitrix24/b24jssdk, @bitrix24/b24ui, TypeScript
• Разработка компонентов: базовые (из UI Kit) + кастомные (поверх дизайн-токенов)
• Поддержка тёмной темы, тестирование в обоих вариантах
• Документирование кастомных компонентов для команды поддержки
• Передача исходного кода, инструкция по развёртыванию

Популярные компоненты Bitrix24 UI Kit

Процесс работы

1. Аналитика — изучаем требования, прототипируем
2. Проектирование — определяем состав компонентов, их кастомизацию
3. Реализация — пишем код, используем B24ThemeProvider
4. Тестирование — проверяем все состояния (светлая/тёмная тема, RTL, многоязычность)
5. Деплой — разворачиваем приложение на портале, настраиваем CI/CD

Сроки и стоимость

Базовый набор экранов на UI Kit — 1–2 недели. Кастомная дизайн-система поверх UI Kit токенов — от 3 недель. Стоимость рассчитывается индивидуально после аудита требований. За время работы реализовали более 20 проектов на Битрикс24 — гарантируем качество и соблюдение сроков. Свяжитесь с нами для оценки вашего проекта за один день.

Вступление

Первое, что мы делаем, получив макет от «чистого» дизайнера — смотрим, как он ляжет на bitrix:catalog.section и bitrix:catalog.element. В половине случаев нестандартный фильтр на макете означает переписывание bitrix:catalog.smart.filter с нуля. А это не 2 часа — это неделя. Поэтому мы проектируем интерфейс сразу под компонентную архитектуру Битрикс, а не адаптируем после. С нами вы получаете дизайн, который разработчик соберёт без костылей и переделок.

Редизайн на Битрикс часто упирается в одно и то же: данные приходят из 1С через CommerceML, а дизайнер этого не учитывает. Мы закладываем в макеты реальную структуру торгового каталога — свойства инфоблоков, типы цен, остатки по складам. Тогда карточка товара не ломается, когда появляется 15 характеристик и 4 цены. Это сокращает итерации согласования на 30% и экономит бюджет заказчика — в среднем на 50–80 тыс. руб на одном проекте.

Почему UX/UI для Битрикс требует особого подхода?

Дизайнер нарисовал карточку товара с тремя вкладками, кастомным конфигуратором и аккордеоном характеристик. Красиво. Потом разработчик открывает шаблон catalog.element и понимает: данные приходят из свойств инфоблока плоским списком, а связанные товары тянутся через CATALOG_ELEMENT_ID. Половину макета нужно перерисовать. Мы это знаем — поэтому рисуем то, что можно собрать без костылей.

Вот что мы закладываем на этапе дизайна:

• Компонентная сетка — интерфейс строится из реальных компонентов Битрикс: bitrix:catalog, bitrix:sale.basket.basket, bitrix:sale.order.ajax, bitrix:system.auth.form. Дизайнер знает, какие данные отдаёт каждый компонент и какие параметры у него есть. Это позволяет избежать доработок на стадии вёрстки. Как отмечает документация платформы, «Компонентная модель 1С-Битрикс позволяет строить интерфейсы из готовых блоков без дублирования логики».
• Визуальный редактор — контент-менеджер будет править контент через административную панель. Блочная структура, гибкие секции, управляемые баннеры — всё это продумывается до Figma.
• Данные из 1С — товары, цены типа BASE, RETAIL, остатки со складов приходят через CommerceML. Карточка товара учитывает реальный объём данных: 15 характеристик, 4 типа цен, остатки по 3 складам — а не идеальные три строчки из макета.
• Семантическая вёрстка — иерархия H1–H6, микроразметка Product/Offer, alt-тексты. Всё закладывается на этапе дизайна, потому что «допилить SEO потом» означает перевёрстывать шаблоны.

Типичные проблемы дизайна и их решения

Исследования до открытия Figma

Прежде чем рисовать — копаем в данные.

Мы формируем персоны и сценарии на основе Яндекс.Метрики (Вебвизор, тепловые карты), GA4 и интервью. Не абстрактные «мужчина 25-45 лет», а конкретные: «закупщик, который формирует заказ по артикулам из Excel за 10 минут». Это позволяет точнее проектировать прототипы.

При редизайне проводим UX-аудит текущего сайта: воронки конверсий, записи сессий, точки оттока. На одном проекте обнаружили, что 40% пользователей бросали корзину на шаге выбора доставки — потому что компонент sale.order.ajax рендерил 12 служб доставки без группировки. Переделали — конверсия выросла на 18% (это дало дополнительно 200 тыс. руб в месяц). Конкурентный разбор — не «посмотрели красивые сайты», а структурный анализ: навигация каталога, количество шагов до чекаута, работа фильтра на мобильных.

Прототипирование

Прототип проверяет логику до расхода бюджета на визуал.

• Wireframes — схемы ключевых страниц: главная, каталог (catalog.section), карточка (catalog.element), корзина (sale.basket.basket), чекаут (sale.order.ajax), личный кабинет. Определяем приоритет информации.
• Кликабельные прототипы — Figma с переходами, модалками, работой фильтров. Заказчик «трогает» сайт до начала разработки.
• Тесты с пользователями — модерируемые сессии с представителями ЦА. Проблему навигации дешевле поймать здесь, чем после вёрстки 40 шаблонов компонентов.

Пошаговый процесс проектирования UX/UI для Битрикс

1. Дизайн-аналитика — сбор данных Метрики, интервью, аудит текущего интерфейса. Выявляем точки оттока (если конверсия падает на этапе выбора доставки — видим это в воронке).
2. Прототипирование — wireframes + кликабельный прототип. Проверяем сценарии: поиск товара, добавление в корзину, оформление заказа. Итерации до утверждения.
3. Создание дизайн-системы — типографика, цвета, UI-компоненты, модульная сетка. Всё завязываем на компонентную модель Битрикс.
4. Дизайн ключевых страниц — макеты под все breakpoints (320–2560px). Учитываем реальные данные: свойства инфоблоков, типы цен, остатки.
5. Передача в разработку — Figma с Dev Mode, экспорт SVG/WebP/AVIF, документация по компонентам. Помогаем разработчику адаптировать шаблоны под новый дизайн.

Дизайн-система

Для каждого проекта собираем масштабируемую систему — единый словарь для дизайнеров и фронтенда.

• Типографика — шрифтовые пары, оптимизированные под кириллицу и веб-рендеринг. Размерная шкала, интерлиньяж, иерархия заголовков.
• Цвета — основные, акцентные, состояния (hover, active, disabled, error). Контрастность по WCAG 2.1 AA минимум.
• Модульная сетка — фиксированные отступы, консистентность от 320px до 2560px.
• UI-компоненты — кнопки, формы, карточки, таблицы, уведомления, иконки. Каждый — с вариантами состояний и адаптивными версиями.
• Документация — правила применения, чтобы новый дизайнер не «изобретал» стили. На практике без неё через полгода в проекте 4 оттенка серого и 3 варианта кнопки «Купить».

Что даёт дизайн-система для Битрикс?

Она ускоряет разработку интерфейса в 2–3 раза, потому что верстальщик получает готовые классы и отступы, а не угадывает их по макету. На одном проекте после внедрения дизайн-системы время на вёрстку новой страницы каталога сократилось с 5 дней до 1,5.

Что входит в работу

На выходе вы получаете:

• Figma-файл с дизайн-системой и макетами всех страниц (включая мобильные и планшетные версии).
• Интерактивный прототип для согласования и тестирования.
• Документацию по компонентам (стили, отступы, поведения).
• Доступы к файлам и финальные экспорты в SVG/WebP/AVIF.
• Рекомендации по доработке шаблонов Битрикс под новый дизайн.
• Пост-релизную поддержку (до 2 недель) — помогаем разработчику разобраться в макетах.

Мы — сертифицированные партнёры 1С-Битрикс с 15+ лет опыта. Гарантируем, что дизайн будет реализуем на вашей версии платформы. С нами работали более 50 интернет-магазинов и корпоративных порталов — от лендингов до маркетплейсов.

Mobile-first: не формальность, а порядок работы

Проектируем сначала мобильную версию, потом расширяем.

• Touch-friendly — минимум 44x44px для интерактивных элементов, достаточные отступы. Свайп для галереи, pull-to-refresh для каталога.
• Формы — автотип клавиатуры (inputmode="numeric" для телефона, type="email" для почты), маски ввода через IMask, автозаполнение через DaData. Каждое лишнее поле — минус к конверсии, это не теория, а то, что видно в воронках Метрики.
• Адаптивные изображения — разные ресайзы и кропы для мобильных/десктопных через <picture> и srcset. Art direction для баннеров — на мобильном не уменьшаем, а показываем другой кроп.

Как мы работаем в Figma?

• Структура файла — страницы: исследования, wireframes, UI-kit, макеты по breakpoints, анимации. Не каша, а навигируемый проект.
• Auto Layout — компоненты на Flexbox-логике, корректно тянутся при изменении контента. Разработчик видит в макете ту же модель, что будет в CSS.
• Variables и Variants — переменные для цветов и отступов, компоненты с вариантами состояний. Смена темы — переключение одной коллекции.
• Dev Mode — точные значения, экспорт SVG/WebP/AVIF, инспектирование CSS. Разработчик получает всё без «угадывания по пикселям».

Usability testing

Как мы измеряем эффективность дизайна?

• Модерируемые тесты — реальные пользователи выполняют задачи: найти товар, добавить в корзину, оформить заказ. Фиксируем, где спотыкаются.
• A/B-тесты — два варианта на живом трафике. Побеждает конверсия, а не мнение арт-директора.
• Эвристический аудит — по принципам Нильсена: видимость статуса, соответствие ожиданиям, единообразие, предотвращение ошибок.
• Доступность — контраст, клавиатурная навигация, alt-тексты, aria-метки. Не факультатив, а требование.

Конверсионный дизайн

• Визуальная иерархия — CTA, цены, акции выделены через размер, цвет, контраст. Взгляд идёт туда, куда нужно бизнесу — проверяется через eye-tracking или тепловые карты.
• Минимальное трение — сокращаем шаги до целевого действия. На одном проекте убрали обязательную регистрацию при чекауте — конверсия в заказ поднялась на 18%.
• Социальные доказательства — рейтинги, отзывы, кейсы, логотипы партнёров. Интегрированы в дизайн, а не прилеплены внизу страницы.
• Микроанимации — товар летит в корзину, форма подтверждает отправку. Направляют внимание и снижают тревожность при совершении действия.

Сроки и результаты

Оценим ваш проект за 1 рабочий день. Получите консультацию — свяжитесь с нами. Закажите проектирование интерфейса под ключ: от исследований до финальных макетов.