Setting up the Bitrix24 integration with Figma

Setting up Bitrix24 Integration with Figma

A designer updates the mockup in Figma, but the developer finds out two days later — when a manager happens to ask in chat. Mockup links are scattered across tasks, comments, and direct messages. The current version is unclear: the task has a three-week-old screenshot attached, while the actual mockup lives in a Figma branch known only to its creator. Without a link between Figma and B24, the design process becomes a search for current links.

Integration Architecture

The integration is built on Figma REST API v1, Figma Webhooks v2, and B24 REST API. Figma provides API for getting file, comment, and version data. Webhooks send notifications on changes. Middleware connects Figma events to B24 entities.

Figma (webhook) → Middleware → B24 REST API → Tasks/Chat/Feed
B24 (task/CRM) → Middleware → Figma API → Get file data

Figma Webhooks support events: FILE_UPDATE, FILE_VERSION_UPDATE, FILE_COMMENT, FILE_DELETE. Registration — via POST /v2/webhooks with team_id and event_type.

Linking Mockups to Tasks

Each B24 task related to design gets a link to a Figma file or specific frame. Two implementation options:

• Custom field. A field UF_FIGMA_URL is created in B24 tasks. Middleware validates the link format (https://www.figma.com/file/{file_key}/...) and extracts file_key and node_id for API requests.
• Placement in task card. A local B24 app adds a tab in the task card (TASK_VIEW_TAB) that displays mockup preview and key metadata: file name, last update, comment count.

Mockup preview is obtained via GET /v1/images/{file_key} with the ids parameter (list of node_id). Figma returns a raster image URL, which the middleware caches and serves to B24.

Design Update Notifications

When a file changes in Figma, the middleware sends notifications to B24:

The FILE_VERSION_UPDATE event is most important. It arrives when a designer saves a named version (Save to Version History). The middleware receives the webhook payload with file_key, file_name and timestamp, finds all B24 tasks with this file_key in the UF_FIGMA_URL field, and adds a comment: version name, time, file link.

For FILE_COMMENT, the middleware fetches the comment text via GET /v1/files/{file_key}/comments and translates it to the project chat in B24 via im.message.add.

Design Review Workflow

Set up a process for approving mockups through B24 tasks:

1. Designer completes mockup and changes task status to "Under Review."
2. Middleware, on event ONTASKUPDATE, requests preview from Figma API and attaches current screenshot to task via task.commentitem.add.
3. Reviewer sees screenshot in task, leaves comment.
4. Middleware, if needed, translates comment from B24 back to Figma via POST /v1/files/{file_key}/comments with frame coordinates.

This closes the loop: designer sees feedback in Figma, manager sees it in B24. Nobody switches tools.

Preview Generation

Middleware periodically (by schedule or event) refreshes mockup previews:

• Request GET /v1/images/{file_key}?ids={node_ids}&format=png&scale=2 returns image URLs.
• Middleware downloads images and uploads to B24 disk via disk.file.uploadtofolder.
• File link is updated in task custom field.

Figma API rate limit — 120 requests per minute. Middleware distributes requests accounting for the limit.

Authentication

• Figma: Personal Access Token or OAuth 2.0. For a team, OAuth is recommended — the token is tied to a user and has access to all files the user can access.
• B24: OAuth 2.0 with scope task,im,disk,user.
• Figma webhooks are tied to team_id — one subscription covers all team files.

What We Implement

• Middleware linking Figma files to B24 tasks
• Notifications about mockup updates and comments in B24 tasks and chats
• Automatic mockup preview generation and update
• Design review workflow with bidirectional comment synchronization
• Embedding Figma preview in B24 task card
• Preview caching and rotation accounting for rate limits