Настройка интеграции Битрикс24 с Figma

Наша компания занимается разработкой, поддержкой и обслуживанием решений на Битрикс и Битрикс24 любой сложности. От простых одностраничных сайтов до сложных интернет магазинов, CRM систем с интеграцией 1С и телефонии. Опыт разработчиков подтвержден сертификатами от вендора.
8+Лет на рынке900+Реализованных проектов100+Разработчиков в штате19+Партнеров
Предлагаемые услуги
Показано 1 из 1 услугВсе 1626 услуг
Настройка интеграции Битрикс24 с Figma
Простая
~1 рабочий день
Часто задаваемые вопросы
Наши компетенции:
Этапы разработки
Последние работы
  • image_website-b2b-advance_0.png
    Разработка сайта компании B2B ADVANCE
    1173
  • image_bitrix-bitrix-24-1c_fixper_448_0.png
    Разработка веб-сайта для компании ФИКСПЕР
    811
  • image_bitrix-bitrix-24-1c_development_of_an_online_appointment_booking_widget_for_a_medical_center_594_0.webp
    Разработка на базе Битрикс, Битрикс24, 1С для компании Development of an Online Appointment Booking Widget for a Medical Center
    564
  • image_bitrix-bitrix-24-1c_mirsanbel_458_0.webp
    Разработка на базе 1С Предприятие для компании МИРСАНБЕЛ
    745
  • image_crm_dolbimby_434_0.webp
    Разработка сайта на CRM Битрикс24 для компании DOLBIMBY
    655
  • image_crm_technotorgcomplex_453_0.webp
    Разработка на базе Битрикс24 для компании ТЕХНОТОРГКОМПЛЕКС
    976
Показать больше работ

Настройка интеграции Битрикс24 с Figma

Дизайнер обновляет макет в Figma, но разработчик узнаёт об этом через два дня — когда менеджер случайно спрашивает в чате. Ссылки на макеты разбросаны по задачам, комментариям и личным сообщениям. Актуальная версия — непонятно какая: в задаче прикреплён скриншот трёхнедельной давности, а текущий макет живёт в ветке Figma, о которой знает только автор. Без связки между Figma и Б24 дизайн-процесс превращается в поиск актуальных ссылок.

Архитектура интеграции

Интеграция строится на Figma REST API v1, Figma Webhooks v2 и Б24 REST API. Figma предоставляет API для получения данных о файлах, комментариях и версиях. Webhooks отправляют уведомления при изменениях. Middleware связывает события Figma с сущностями Б24.

Figma (webhook) → Middleware → Б24 REST API → Задачи/Чат/Лента
Б24 (задача/CRM) → Middleware → Figma API → Получение данных о файле

Figma Webhooks поддерживают события: FILE_UPDATE, FILE_VERSION_UPDATE, FILE_COMMENT, FILE_DELETE. Регистрация — через POST /v2/webhooks с указанием team_id и event_type.

Привязка макетов к задачам

Каждая задача в Б24, связанная с дизайном, получает ссылку на Figma-файл или конкретный фрейм. Два варианта реализации:

  • Кастомное поле. В задачах Б24 создаётся поле UF_FIGMA_URL типа «строка». Middleware валидирует формат ссылки (https://www.figma.com/file/{file_key}/...) и извлекает file_key и node_id для API-запросов.
  • Плейсмент в карточке задачи. Локальное приложение Б24 добавляет вкладку в карточку задачи (TASK_VIEW_TAB), которая отображает превью макета и основные метаданные: название файла, последнее обновление, количество комментариев.

Превью макета получается через GET /v1/images/{file_key} с параметром ids (список node_id). Figma возвращает URL растрового изображения, который middleware кеширует и отдаёт в интерфейс Б24.

Уведомления об обновлениях дизайна

При изменении файла в Figma middleware отправляет уведомления в Б24:

Событие Figma Действие в Б24 Получатель
FILE_VERSION_UPDATE Комментарий в привязанной задаче Исполнитель задачи
FILE_COMMENT Сообщение в чат проекта Участники проекта
FILE_UPDATE (значимое) Уведомление в ленту Ответственный

Событие FILE_VERSION_UPDATE — самое важное. Оно приходит, когда дизайнер сохраняет именованную версию (Save to Version History). Middleware получает webhook payload с file_key, file_name и timestamp, находит все задачи Б24 с этим file_key в поле UF_FIGMA_URL и добавляет комментарий: название версии, время, ссылка на файл.

Для FILE_COMMENT middleware подтягивает текст комментария через GET /v1/files/{file_key}/comments и транслирует его в чат соответствующего проекта Б24 через im.message.add.

Workflow дизайн-ревью

Настраиваем процесс согласования макетов через задачи Б24:

  1. Дизайнер завершает макет и меняет статус задачи на «На ревью».
  2. Middleware по событию ONTASKUPDATE запрашивает превью из Figma API и прикрепляет актуальный скриншот к задаче через task.commentitem.add.
  3. Ревьюер видит скриншот в задаче, оставляет комментарий.
  4. Middleware при желании транслирует комментарий из Б24 обратно в Figma через POST /v1/files/{file_key}/comments с координатами фрейма.

Это замыкает цикл: дизайнер видит фидбек в Figma, менеджер — в Б24. Никто не переключается между инструментами.

Генерация превью

Middleware периодически (по расписанию или по событию) обновляет превью макетов:

  • Запрос GET /v1/images/{file_key}?ids={node_ids}&format=png&scale=2 возвращает URL изображений.
  • Middleware скачивает изображения и загружает на диск Б24 через disk.file.uploadtofolder.
  • Ссылка на файл обновляется в кастомном поле задачи.

Rate limit Figma API — 120 запросов в минуту. Middleware распределяет запросы с учётом лимита.

Аутентификация

  • Figma: Personal Access Token или OAuth 2.0. Для команды рекомендуется OAuth — токен привязан к пользователю и имеет доступ ко всем файлам, к которым имеет доступ этот пользователь.
  • Б24: OAuth 2.0 с scope task,im,disk,user.
  • Webhooks Figma привязаны к team_id — одна подписка покрывает все файлы команды.

Что внедряем

  • Middleware для связки Figma-файлов с задачами Б24
  • Уведомления об обновлениях макетов и комментариях в задачах и чатах Б24
  • Автоматическую генерацию и обновление превью макетов
  • Workflow дизайн-ревью с двусторонней синхронизацией комментариев
  • Встраивание превью Figma в карточку задачи Б24
  • Кеширование и ротацию превью с учётом rate limits
1С Битрикс презентация1С Битрикс24 презентация1С Предприятие презентация