Figma

Before connecting Bubble to the Figma API, understand the design handoff workflow — it's the fastest path and covers the most common use case. Open your Figma file and press F to enter Dev Mode (or click the '</>' icon in the top-right toolbar). If you're using Figma's free plan, Dev Mode may require a paid seat — check your plan's feature access. In Dev Mode, click on any element in the Figma canvas. The right-hand inspect panel displays all CSS properties: fill color as a hex code, padding values in pixels, border radius, font family, font weight, font size, and line height. Here's how to translate each value into Bubble's editor: - **Colors**: In Bubble, click on any element → Style tab → Background color or Border color → paste the hex code from Figma's fill color property. - **Typography**: Bubble's Styles tab (Styles panel in the editor) → create a reusable text style → enter the font family, size, and weight from Figma's typography panel. Set line-height in the element's advanced style settings. - **Spacing**: In Bubble, select an element → Layout tab → set margin and padding values from Figma's spacing values. - **Border radius**: In Bubble, element Properties → Border radius → enter the pixel value from Figma. For complex layouts, use Figma's alignment guides and the spacing numbers to set Bubble element positions and widths. Bubble's layout engine (Columns and Rows) doesn't map 1:1 to Figma's auto-layout, but the visual values from Dev Mode give you the exact numbers to aim for.

1// Figma Dev Mode value extraction cheatsheet
2// (Values shown in Figma's right-hand inspect panel when in Dev Mode)
3
4// Colors → Bubble: Background color field (hex code)
5// Example: Fill #1E40AF → Bubble hex input #1E40AF
6
7// Typography → Bubble: Styles panel → Text style
8// Example: Inter 16px 600 weight → Font: Inter, Size: 16, Weight: Semi-bold
9
10// Spacing → Bubble: Layout tab (margin/padding)
11// Example: Padding 16px top/bottom 24px left/right → Margin: 16 top, 24 left
12
13// Border radius → Bubble: Property panel → Border radius
14// Example: Corner radius 8px → Border radius: 8
15
16// Shadow → Bubble: Style → Box shadow
17// Figma: box-shadow: 0 4px 6px rgba(0,0,0,0.1)
18// Bubble: X 0, Y 4, Blur 6, Color #000000 at 10% opacity

To call the Figma REST API from Bubble, you need a Personal Access Token (PAT). This token authenticates your Bubble API Connector as if it were you — it has access to all Figma files in your account. In Figma, click your profile avatar in the top-left corner of the Figma home screen. Click 'Settings' in the dropdown menu. Scroll down to the 'Personal access tokens' section. Click 'Generate new token'. Give it a descriptive name like 'Bubble API Connector' and select the permissions scope — for read-only access to files (sufficient for most use cases), leave the default read permissions. Click 'Generate token'. Copy the token immediately — Figma only shows it once. If you lose it, you'll need to delete and regenerate. The token looks like a long string starting with `figd_...` (newer tokens) or a mix of alphanumeric characters (older format). Note your Figma File Key as well. Open the Figma file you want to access, look at the browser URL: `https://www.figma.com/file/ABC123XYZ/My-Design-File`. The `ABC123XYZ` portion is the File Key you'll use in API calls. Treat the Figma token like a password — anyone with this token can read all your Figma files. In Bubble's API Connector, always mark the header value as 'Private' so it's encrypted server-side.

1// Figma Personal Access Token location:
2// Figma Home → Profile avatar (top-left) → Settings
3// → Scroll to 'Personal access tokens' → Generate new token
4
5// Token format (newer API):
6// figd_AbCdEfGhIjKlMnOpQrStUvWxYz1234567890
7
8// File Key location (in browser URL):
9// https://www.figma.com/file/{FILE_KEY}/My-Design-File
10//                             ↑
11//                        Copy this value
12//
13// Example: https://www.figma.com/file/AbC123XYZ456/Brand-Design-System
14// File Key: AbC123XYZ456

Now set up Bubble's API Connector to authenticate with the Figma API. This step has one critical gotcha: Figma uses the custom header `X-Figma-Token`, NOT the standard `Authorization: Bearer` format. If you enter the token in Bubble's built-in 'Authorization' field, you'll get 403 errors. In the Bubble editor, click Plugins in the left sidebar. If you don't see the API Connector, click 'Add plugins', search for 'API Connector', and install it (it's the official plugin by Bubble, free). Click on API Connector. Click 'Add another API'. Name it 'Figma API'. In the 'Root URL' field, enter `https://api.figma.com/v1`. Do NOT click the 'Authentication' dropdown — Figma doesn't use a standard Bearer token auth; it uses a custom header. Instead, scroll down to 'Shared headers'. Click 'Add a shared header'. In the 'Key' field, type exactly: `X-Figma-Token`. In the 'Value' field, paste your Figma Personal Access Token. Click the 'Private' checkbox — this is essential to keep the token server-side and out of the browser. Do not add a second Authorization header. With just the `X-Figma-Token` custom header configured, all calls in this API group will authenticate automatically.

1// Bubble API Connector configuration for Figma
2// (Conceptual — configured visually in Bubble editor)
3{
4  "api_name": "Figma API",
5  "root_url": "https://api.figma.com/v1",
6  "shared_headers": [
7    {
8      "key": "X-Figma-Token",
9      "value": "figd_YOUR_PERSONAL_ACCESS_TOKEN",
10      "private": true
11    }
12  ]
13}
14
15// CRITICAL: Figma does NOT use "Authorization: Bearer"
16// Wrong (causes 403 error):
17// Authorization: Bearer figd_your_token
18
19// Correct:
20// X-Figma-Token: figd_your_token

Before building more complex Figma API calls, verify your token is working with a simple 'get me' endpoint that returns information about the authenticated Figma user. This call also initializes the API in Bubble's system. In the Figma API you created, click 'Add a call'. Name it 'Get Current User'. Set the method to GET. In the path field, enter `/me`. Leave the body empty. Click 'Initialize call'. Bubble sends a real request to `https://api.figma.com/v1/me` with your `X-Figma-Token` header. If authentication is working, you'll see a response with your Figma user data: `id`, `email`, `handle` (username), and `img_url`. Set 'Use as' to 'Data' (this call returns a single object, not an action). Bubble auto-detects the field types from the response. Click 'Save'. If the Initialize call returns a 403 Forbidden error, the most common cause is entering the token in the wrong header. Double-check: the key must be `X-Figma-Token` (capital X, capital F, capital T) with the exact casing Figma expects. The value should be only the token string, no quotes, no 'Bearer' prefix.

1// Figma API: Get Current User
2// Method: GET
3// Path: /me
4// Headers (from shared config): X-Figma-Token: [private]
5
6// Expected successful response:
7{
8  "id": "123456789",
9  "email": "designer@company.com",
10  "handle": "designer_name",
11  "img_url": "https://s3-alpha.figma.com/profile/..."
12}
13
14// 403 Forbidden response (wrong header):
15{
16  "status": 403,
17  "err": "Forbidden"
18}
19
20// 401 Unauthorized (missing or invalid token):
21{
22  "status": 401,
23  "err": "Unauthorized"
24}

With authentication working, build the core Figma API calls for your use case. The two most useful calls for Bubble integrations are: reading file structure (to display pages and frames) and exporting component images (to get thumbnail URLs). For reading file structure, add a new call: name it 'Get File', method GET, path `/files/{fileKey}`. In the call parameters, add a path parameter `fileKey` (the File Key you noted earlier) — mark it as a literal value or let users provide it. Add the query parameter `depth=1` to limit the response depth; without this parameter, large Figma files return the complete document tree and can exceed Bubble's 5MB API response limit. For exporting images, add another call: name it 'Export Frame Images', method GET, path `/images/{fileKey}`. Add query parameters: `ids` (the node IDs of frames to export, comma-separated) and `format` (set to `svg`, `png`, or `jpg`). The response contains a `images` object mapping node IDs to signed S3 URLs for the exported images. Important: Figma's export image URLs are pre-signed S3 URLs that expire in approximately 14 days. Never store these URLs permanently in your Bubble database — always re-fetch them on demand. Store only the node IDs and generate fresh export URLs when needed. RapidDev's team builds custom design-ops tools in Bubble that connect to Figma's API for asset management — if you're building a complex integration, a free scoping call at rapidevelopers.com/contact can help you architect the right approach.

1// Call 1: Get File Structure
2// Method: GET
3// Path: /files/{fileKey}?depth=1
4// Parameters:
5//   fileKey: AbC123XYZ456 (your Figma File Key)
6//   depth: 1 (limits response depth to avoid 5MB limit)
7
8// Sample response structure (depth=1):
9{
10  "name": "Brand Design System",
11  "role": "viewer",
12  "lastModified": "2026-07-10T12:00:00Z",
13  "document": {
14    "id": "0:0",
15    "name": "Document",
16    "type": "DOCUMENT",
17    "children": [
18      { "id": "1:0", "name": "Page 1", "type": "CANVAS" },
19      { "id": "2:0", "name": "Components", "type": "CANVAS" }
20    ]
21  }
22}
23
24// Call 2: Export Frame Images
25// Method: GET
26// Path: /images/{fileKey}?ids={nodeIds}&format=png&scale=2
27// Parameters:
28//   fileKey: AbC123XYZ456
29//   ids: 1:23,1:45  (comma-separated node IDs)
30//   format: png
31//   scale: 2 (2x for retina)
32
33// Sample response:
34{
35  "err": null,
36  "images": {
37    "1:23": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/runs/...",
38    "1:45": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/runs/..."
39  }
40}
41// WARNING: These S3 URLs expire in ~14 days — never store permanently

With the Figma API calls configured, build a Bubble page that displays file structure and component thumbnails. This step creates a practical admin tool that team members can use to browse Figma assets without needing a Figma account. In Bubble's page editor, add a Repeating Group to display Figma file pages. In the Repeating Group's data source, set it to 'Get data from an external API' → select your 'Get File' call. The Repeating Group populates with the pages (CANVAS nodes) from your Figma file. For each row in the Repeating Group, add a Text element bound to `Current cell's document children name` to show the page name. Add a second level Repeating Group inside the first to show frames within each page (requires a second API call to `/files/{fileKey}?ids={pageId}` for each page's children). For component thumbnails, use a workflow triggered by a button click: 'When button is clicked → Plugins → Figma API → Export Frame Images → set State → show image from dynamic URL'. The Image element's URL is set to the state variable containing the signed S3 URL. For the design token sync use case (optional): create a Bubble data type called 'Design Token' with fields `token_name` (text), `token_value` (text), and `token_type` (text). Create a Backend Workflow that calls the Figma Variables API (`GET /files/{fileKey}/variables/local`) and loops through the response to create or update Design Token records. Schedule this workflow to run daily via Bubble's Recurring Events (requires a paid plan).

1// Bubble Workflow: Sync Figma Design Tokens to Bubble Database
2// (Backend Workflow, requires paid Bubble plan)
3//
4// Trigger: API call or scheduled recurring event
5//
6// Step 1: Call 'Get Variables' (Figma Variables API)
7// Method: GET
8// Path: /files/{fileKey}/variables/local
9//
10// Sample response:
11{
12  "status": 200,
13  "meta": {
14    "variables": {
15      "VariableID:1": {
16        "id": "VariableID:1",
17        "name": "color/primary",
18        "resolvedType": "COLOR",
19        "valuesByMode": {
20          "1:0": { "r": 0.118, "g": 0.251, "b": 0.686, "a": 1 }
21        }
22      },
23      "VariableID:2": {
24        "id": "VariableID:2",
25        "name": "spacing/base",
26        "resolvedType": "FLOAT",
27        "valuesByMode": {
28          "1:0": 8
29        }
30      }
31    }
32  }
33}
34
35// Step 2: Bubble workflow - Create or update 'Design Token' thing
36// For each variable in response:
37//   - Search for Design Token where token_name = variable.name
38//   - If found: update token_value and token_type
39//   - If not found: create new Design Token with name, value, type