Sync Figma design and track design activity

Design and Data usually live in silos. Designers work in Figma, while product data, copy, and project statuses live in Baserow. Traditionally, teams use plugins to bridge this gap, but plugins rely on the designer manually opening them and clicking “Sync.”

Connecting Baserow to Figma allows teams to use a single source of truth for design content, UI copy, or asset management. Whether you are populating mockups with real data or tracking design progress in a database, this integration streamlines the Design Ops lifecycle.

This guide covers how to sync data from your Baserow tables into Figma layers.

Key Use Cases

  • Dynamic Content Mockups: Replace “Lorem Ipsum” with real product names, prices, or descriptions from Baserow.
  • Design System Management: Store design token values (colors, spacing, etc.) in Baserow and reference them in Figma.
  • Asset Tracking: Use Baserow to manage status, assignees, and feedback for Figma frames or components.

The Architecture

The Enterprise Infrastructure approach uses the Figma REST API directly. This allows you to push data from Baserow into Figma Variables programmatically, or pull design activity logs into Baserow for project management.

We will focus on two core infrastructure patterns:

  1. Data Sync (Baserow → Figma): Managing “Design Tokens” (Colors, Copy, Numbers) in Baserow and syncing them to Figma Variables via the REST API.
  2. Activity Logging (Figma → Baserow): Using Figma Webhooks to log comments and file updates into Baserow for a master project view.

Why this is better than a plugin: Plugins can break if the designer forgets to run them or if the plugin author stops maintaining it. This script interacts directly with the Figma server. It works even if no one has the file open.

Pattern A: Variables Sync (Baserow → Figma)

Instead of designers manually typing hex codes or copy, they bind their design layers to Figma Variables. Baserow acts as the database for these variables. When Marketing updates a price or a tagline in Baserow, a script pushes that update directly to Figma.

Use Cases

  • Localization: Manage text strings for different languages in Baserow columns.
  • Theming: Manage color tokens (Light Mode / Dark Mode) in Baserow.
  • Product Data: Manage live pricing or inventory numbers that appear in design mocks.

1. Prerequisites

  • Figma Personal Access Token: Personal access tokens allow you to access your own data via the API. From the Figma file browser, click the account menu in the top-left corner and select Settings → Security tab. In the Personal access tokens section, click Generate new token to open the configuration modal.

  • Baserow Database Token.

    Do not give out your tokens to anybody who you don’t want to access your files.

  • Figma File Key: Found in the URL of your design file (e.g., figma.com/{file_type}/{file_key}/{file_name}). The file key is the alphanumeric value that appears between the file type and the file name in the URL.

You can now use the token to make requests to the Figma API. You can do so by passing the token to the API in the X-Figma-Token header of your request.

2. The Bridge Script

Since Figma’s API is passive, you need a Runner (like a GitHub Action or a simple Cron script) to move the data.

The Workflow:

  1. GET data from Baserow (e.g., a “Brand Assets” table).

  2. POST updates to Figma’s /v1/files/:file_key/variables endpoint.

    The POST /v1/files/:file_key/variables endpoint lets you bulk create, update, and delete variables and variable collections.

import requests

# Configuration
BASEROW_API_URL = "https://api.baserow.io/api/database/rows/table/YOUR_TABLE_ID/"
FIGMA_API_URL = "https://api.figma.com/v1/files/YOUR_FILE_KEY/variables"
HEADERS_BASEROW = {"Authorization": "Token YOUR_BASEROW_TOKEN"}
HEADERS_FIGMA = {"X-Figma-Token": "YOUR_FIGMA_TOKEN", "Content-Type": "application/json"}

def sync_design_tokens():
    # 1. Fetch "Single Source of Truth" from Baserow
    response = requests.get(BASEROW_API_URL, headers=HEADERS_BASEROW, params={"user_field_names": "true"})
    data = response.json()
    
    # Initialize the list to hold all our value updates
    value_updates = []
    
    # 2. Iterate through rows and prepare Figma updates
    for row in data['results']:
        variable_id = row['Figma Variable ID'] # e.g., "VariableID:123"
        mode_id = row['Figma Mode ID']         # e.g., "1:0" (Required by Figma)
        new_value = row['Value']               # e.g., "Welcome Home" 
        
        # 3. Append to our update list using Figma's required schema
        value_updates.append({
            "variableId": variable_id,
            "modeId": mode_id,
            "value": new_value 
        })
        
    # 4. Construct the final payload and push to Figma
    payload = {
        "variableModeValues": value_updates
    }
    
    # 5. Make the atomic POST request
    response = requests.post(FIGMA_API_URL, headers=HEADERS_FIGMA, json=payload)
    
    if response.status_code == 200:
        print(f"Successfully updated {len(value_updates)} variable values!")
    else:
        print(f"Failed to update variables. Error: {response.status_code}")
        print(response.json())

sync_design_tokens()

Figma expects specific data types (Strings, Numbers, or RGBA Objects). Your script acts as the translator between how you store data in Baserow and how Figma expects to receive it.

Pattern B: Project Tracking (Figma → Baserow)

If you want to track work rather than content, use Figma Webhooks. This allows Baserow to act as a live activity feed for your design operations.

Webhooks allow you to observe when specific events happen in files. For example: a collaborator comments on a file, or you add a new version to a file’s history.

Creating webhooks is a Tier 2 operation. Ensure your Personal Access Token was generated with the webhooks:write scope selected.

Use Case

  • Design QA: When a new comment is added to a file, create a “Task” in Baserow.
  • Version Control: When a file is “Published” (Library update), log the version history in Baserow.
Event Type Best Use Case Key Data Sent to Baserow
FILE_COMMENT Design QA: Capture feedback and turn it into actionable tasks. Comment text, @mentions, and timestamp.
DEV_MODE_STATUS_UPDATE Handoff Tracking: Know exactly when a frame is “Ready for Dev.” Node ID, Status (READY_FOR_DEV), and Change Message.
LIBRARY_PUBLISH Version Control: Log when a design system component is updated. List of created/modified components and variables.

1. Set up the Baserow Automation

  1. Create a “Design Log” table in Baserow.
  2. Create an Automation: Trigger: “Receive an HTTP request (webhook)”.
  3. Copy the Webhook URL.

2. Create the Figma Webhook

You must register your listener via a POST request. You can run this command from your terminal or a tool like Postman.

Use the POST Webhook endpoint to attach a webhook to a context. By default, this webhook will automatically send a PING event to the endpoint when it is created. This means your webhook is working and will receive any updates.

Command to track Comments:

Create a new webhook which will call the specified endpoint when the event triggers. This tells Figma: “Whenever a file is updated, tell Baserow.”

curl -X POST https://api.figma.com/v2/webhooks \
-H "X-Figma-Token: YOUR_PERSONAL_ACCESS_TOKEN" \
-H "Content-Type: application/json" \
-d '{
  "event_type": "FILE_COMMENT",
  "context": "file",
  "context_id": "YOUR_FILE_KEY",
  "endpoint": "YOUR_BASEROW_WEBHOOK_URL",
  "passcode": "my_secure_secret",
  "status": "ACTIVE",
  "description": "Sync Figma comments to Baserow Task Log"
}'

If you want to track all files in a project or team, change the context to project or team and use the corresponding ID.

Set a passcode. When Figma sends data to Baserow, it will include this string. You can use it in Baserow to verify that the request actually came from Figma and not a random source.

3. Map the Figma Payload to Baserow

When a designer leaves a comment, Figma sends a complex JSON payload. You need to map these specific fields in your Baserow Automation:

  • Triggering User: triggered_by.handle → Assignee
  • The Message: comment[0].text → Task Description
  • Direct Link: https://www.figma.com/file/YOUR_FILE_KEY?node-id=... → URL Field

4. Troubleshooting Common Issues

  • 401 Unauthorized: Ensure your Database Token has “Write” permissions if you are pushing data from Figma. Check that you included the word Token before your Baserow database token in the header.
  • The 30-Minute Rule: If you use the FILE_UPDATE event, remember it only fires after 30 minutes of inactivity. If you want instant logging, stick to FILE_COMMENT.
  • Verification: Use the GET /v2/webhooks/:webhook_id/requests endpoint to see a log of every time Figma tried to talk to Baserow.
  • Color Formatting: Figma variables expect colors in RGBA decimal format (e.g., {"r": 1, "g": 0.5, "b": 0, "a": 1}) rather than Hex codes. Ensure your Baserow values match the expected type.

Resources

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.