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

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

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

Почему эта интеграция необходима?

Без связки дизайн-процесс превращается в поиск актуальных ссылок. Разработчики тратят до 30% времени на уточнение версий макетов. Интеграция через middleware в 3 раза сокращает время на согласование дизайна: все изменения фиксируются в задачах, а комментарии синхронизируются между Figma и Битрикс24.

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

Интеграция строится на Figma REST API и Битрикс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:

Событие 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
• Документация и передача доступов
• Техническая поддержка на этапе внедрения

Сравнение: ручной процесс vs автоматизация

Наш опыт — более 5 лет интеграций Figma и Битрикс24, более 50 успешных проектов. Сертифицированные специалисты гарантируют стабильную работу решения.

Хотите так же ускорить дизайн-процесс? Свяжитесь с нами — оценим ваш проект и предложим оптимальную архитектуру интеграции.