Adobe XD

Before configuring anything in Bubble, decide which path matches your goal. Path A — Design Handoff (No API): If you want to display XD designs in a Bubble app for client review, feedback, or portfolio purposes, you do not need to interact with any Adobe API. The workflow is: 1. In Adobe XD, open your design file 2. Select File → Export → All Artboards (or Export → Selected) 3. Choose PNG or SVG format 4. Export the files to your computer 5. In Bubble's editor, go to the Data tab → File Manager → Upload files 6. Upload your exported artboard images 7. Reference these file URLs in Bubble Image elements or a Repeating Group gallery This path takes under 15 minutes and requires no API credentials whatsoever. The limitation is that artboard images are static — they don't update automatically when your XD design changes. Path B — CC Libraries API (Dynamic Design Tokens): If you need to programmatically access design data from Adobe Creative Cloud Libraries (color palettes, character styles, graphic components), proceed to the following steps which configure Bubble's API Connector with Adobe IMS OAuth 2.0 authentication. Important: Do not attempt to embed XD share links (xd.adobe.com/view/...) in Bubble using an HTML element iframe. Adobe sets X-Frame-Options headers that block iframe embedding — the embedded content will show a blank or error screen.

For Path B (CC Libraries API), you need to create an application in the Adobe Developer Console to get a Client ID and Client Secret. Open your browser and go to developer.adobe.com. Sign in with your Adobe ID (the same account linked to your Creative Cloud subscription). Click 'Create new project' or 'Add project'. On the project overview page, click 'Add API'. In the API catalog, find and select 'Creative Cloud Libraries'. Click 'Next'. Adobe will ask you to select an authentication type. Choose 'Server-to-Server' (also called Client Credentials or OAuth Server-to-Server) — this is the approach that works with Bubble because it doesn't require a redirect URI or user login flow. Click 'Save configured API'. On the project's credential page, you will see your Client ID and Client Secret. Copy both values. The Client Secret is shown only once in some Adobe Developer Console views — copy it immediately and store it in a password manager. You will use these in the next step to request an access token. Note: Adobe Creative Cloud subscription scopes are attached to your Adobe account — the credentials you generate here grant access to libraries owned by your Adobe ID. For multi-user scenarios where clients have their own CC Libraries, the Authorization Code flow is required, which needs a redirect URI and cannot be handled natively in Bubble without a paid plan and Backend Workflow proxy.

Adobe's IMS (Identity Management System) requires you to exchange your Client ID and Client Secret for a time-limited access token. This token lasts approximately 24 hours and must be used in all subsequent CC Libraries API calls. You need to set this up in Bubble's API Connector. In your Bubble editor, go to the Plugins tab. If the API Connector is not installed, click Add plugins, search for 'API Connector' (by Bubble), and install it. Return to Plugins → API Connector → Add another API. Name this API 'Adobe IMS'. Add a call named 'Get Access Token': - Method: POST - URL: `https://ims-na1.adobelogin.com/ims/token/v3` - In the Body section (form-encoded, not JSON), add these parameters: - `grant_type`: `client_credentials` - `client_id`: your Adobe Client ID (you can mark this non-private since Client ID is a public identifier) - `client_secret`: your Adobe Client Secret (mark this as Private — it must never reach the browser) - `scope`: `openid,creative_sdk` - Set 'Use as': Action Click Initialize call with these real values filled in. Adobe will return a JSON response containing `access_token` (a long JWT string) and `expires_in` (typically 86399 seconds = ~24 hours). Bubble will detect the `access_token` field — you'll use this in the next step. Critically, the access token expires after ~24 hours. For a production Bubble app, you need a strategy to refresh it — either manually re-run the initialization, or (on a paid Bubble plan) create a scheduled Backend Workflow that runs every 23 hours to call this endpoint and save the new token to a Bubble data type.

1POST https://ims-na1.adobelogin.com/ims/token/v3
2Content-Type: application/x-www-form-urlencoded
3
4grant_type=client_credentials
5&client_id=YOUR_CLIENT_ID
6&client_secret=<private>
7&scope=openid%2Ccreative_sdk
8
9Example response:
10{
11  "access_token": "eyJhbGciOiJSUzI1NiIsIn...",
12  "token_type": "bearer",
13  "expires_in": 86399
14}

With an access token mechanism in place, configure the actual Creative Cloud Libraries API calls in Bubble. In the API Connector, click Add another API (separate from Adobe IMS). Name this API 'Adobe CC Libraries'. Configure a shared header: - Header key: `Authorization` - Header value: `Bearer {access_token}` — in Bubble's API Connector, you can make this a dynamic parameter so you paste in the token you stored in your Bubble database - Check the 'Private' checkbox on this header Base URL for calls: `https://cc-api-storage.adobe.io` Add a call named 'Get Library Elements': - Method: GET - URL: `/libraries/{libraryId}/elements` - Add a URL parameter `libraryId` so you can pass different library IDs dynamically from your Bubble workflows - Set 'Use as': Data To find your `libraryId`: open Adobe Creative Cloud on desktop, go to Libraries, right-click on a library → Copy link. The ID is embedded in the URL. Alternatively, call GET /libraries first to list all libraries and extract their IDs from the response. Initialize the call with a real libraryId from your Adobe account. Bubble will detect fields like element name, type (color, characterStyle, graphic), and thumbnail URLs. Color elements will have an RGB or hex value in their data attributes. Once initialized, you can bind a Bubble Repeating Group to this call to display color swatches, component names, or asset thumbnails pulled directly from your live Adobe CC Libraries.

1GET https://cc-api-storage.adobe.io/libraries/{libraryId}/elements
2Headers:
3  Authorization: Bearer <private>
4  x-api-key: YOUR_CLIENT_ID
5
6Example response:
7{
8  "items": [
9    {
10      "id": "element-uuid",
11      "name": "Primary Blue",
12      "type": "application/vnd.adobe.element.color+dcx",
13      "representation": {
14        "content_type": "application/vnd.adobe.color+json",
15        "color": { "value": { "r": 0.0, "g": 0.4, "b": 0.9, "a": 1.0 } }
16      }
17    }
18  ]
19}

Now connect the CC Libraries API data to a visible page in your Bubble app. Go to the Design tab. On your target page, add a Repeating Group. Set: - Type of content: the Bubble data type from your initialized CC Libraries call - Data source: 'Get data from an external API' → Adobe CC Libraries - Get Library Elements → set the libraryId parameter dynamically (either hardcoded from a dropdown or from a URL parameter) Inside the Repeating Group's first cell, add: - A Text element bound to the element's name field - For color elements, add a Shape or Group with its background color set to a dynamic expression — Bubble can interpret hex color strings if you format the API response correctly - A Text element showing the element type For the token refresh problem: Adobe access tokens expire in ~24 hours. A simple production strategy is: 1. Create a Bubble data type called 'App Settings' with fields: adobe_access_token (text), token_expires_at (date) 2. After running the 'Get Access Token' call manually (or via a workflow), store the result and expiry time in this data type 3. In any workflow that calls the CC Libraries API, add a conditional step: 'If token_expires_at < Current date/time → run Get Access Token workflow first' 4. On paid plans, add a scheduled Backend Workflow that runs every 23 hours to auto-refresh the token RapidDev's team has built hundreds of Bubble apps with complex API integrations like this OAuth token management pattern — book a free scoping call at rapidevelopers.com/contact if you're building a design system tool or client portal on Bubble.