Інтеграція Figma та Бітрікс24: автоматизація дизайну

Інтеграція Figma та Бітрікс24: автоматизація дизайну

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

Чому ця інтеграція необхідна?

Без зв'язки дизайн-процес перетворюється на пошук актуальних посилань. На одному з наших проєктів (велика продуктова компанія) розробники витрачали до 30% робочого часу на уточнення версій макетів. Після впровадження інтеграції час на узгодження дизайну скоротився з 2 днів до 4 годин: усі зміни фіксуються в завданнях, а коментарі синхронізуються між 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 зображень.
• Middlepage завантажує зображення та завантажує на диск Б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 успішних проєктів. Сертифіковані спеціалісти гарантують стабільну роботу рішення.

Бажаєте так само прискорити дизайн-процес? Зв'яжіться з нами — оцінимо ваш проєкт і запропонуємо оптимальну архітектуру інтеграції.