Sketch

Sketch Cloud uses token-based authentication — simpler than OAuth, no redirect URIs required. Tokens are generated in your Sketch account settings and grant API access to all workspaces your account can access. Open your browser and go to www.sketch.com. Log in to your Sketch account. Click your profile avatar in the top-right corner and select 'Settings' from the dropdown. In the left sidebar, find 'API Access' or 'Developer Settings' (the exact label may vary — look for 'Personal Access Tokens' or similar under your account settings). Click 'Create Token' or 'New Token'. Give it a descriptive name like 'Bubble Integration'. Copy the token immediately — Sketch may only show it once. Store it somewhere safe like a password manager. Security note: this token grants API access to all workspaces and documents your Sketch account can see. For a production Bubble app, create a dedicated Sketch account with viewer-only access to the relevant workspace, generate the token from that account, and use it in Bubble. This limits the blast radius if the token is ever compromised. Do not create the token from an admin account that can edit or delete shared documents.

Open your Bubble app editor in the browser. Click the Plugins tab in the left sidebar (the puzzle piece icon). If the API Connector is not listed in your installed plugins, click Add plugins, search for 'API Connector' — the one published by Bubble — and click Install. Return to the Plugins tab and click API Connector. Click Add another API to create a new API group. Set the API name to 'Sketch Cloud'. In the Shared headers section, click Add a shared header: - Key: `Authorization` - Value: `Token YOUR_SKETCH_TOKEN` — replace `YOUR_SKETCH_TOKEN` with the token you copied in Step 1. Note that Sketch uses the format `Token {token}` (not `Bearer {token}` — this is important). - Check the 'Private' checkbox on this header. This tells Bubble to process the header server-side only, so the Sketch token never appears in users' browsers. You will set the base URL at the individual call level since Sketch's API is straightforward. The base URL for all calls is: `https://www.sketch.com/api/v1` Leave other API-level settings at defaults for now. Your API group is ready — all calls you add will automatically include the Private Authorization header.

1{
2  "API Name": "Sketch Cloud",
3  "Shared Headers": {
4    "Authorization": "Token <private>"
5  },
6  "Base URL": "https://www.sketch.com/api/v1"
7}

With the Sketch Cloud API group set up, add two GET calls: one to list all shared documents, and one to fetch the artboard list (scenes) for a specific share. Call 1 — List Shares: - Click Add another call inside the Sketch Cloud API group - Name: 'Get Shares' - Method: GET - URL: `https://www.sketch.com/api/v1/shares` - Use as: Data - Click Initialize call. You need at least one shared document in your Sketch Cloud account for initialization to return data. Bubble will detect fields like `shortId`, `name`, `createdAt`, `updatedAt`, and `userIsOwner`. Call 2 — Get Artboard Scenes (Preview Images): - Click Add another call - Name: 'Get Share Scenes' - Method: GET - URL: `https://www.sketch.com/api/v1/shares/{shortId}/scenes` - Add a parameter named `shortId` (Bubble will treat this as a URL-path parameter) - Use as: Data - Click Initialize — for the `shortId` parameter, enter the actual short ID from one of your Sketch share URLs (the part after sketch.com/s/). Bubble needs a real response to detect fields. Expected fields from scenes: `name` (artboard name), `previewURL` (CDN image URL for the artboard thumbnail), `frame` (width/height dimensions), `artboardID`. Critical: if Initialize returns 'There was an issue setting up your call', the most common cause is a wrong token format (must be `Token {token}`, not `Bearer {token}`) or the shortId doesn't exist on your account.

1GET https://www.sketch.com/api/v1/shares/{shortId}/scenes
2Headers:
3  Authorization: Token <private>
4
5Example response:
6{
7  "shares": [
8    {
9      "shortId": "abc123de",
10      "name": "Mobile App Redesign",
11      "updatedAt": "2026-06-15T14:30:00Z"
12    }
13  ],
14  "scenes": [
15    {
16      "name": "Onboarding Screen 1",
17      "previewURL": "https://sketch-cdn.com/assets/preview/abc123.jpg",
18      "artboardID": "artboard-uuid",
19      "frame": { "width": 375, "height": 812 }
20    }
21  ]
22}

With the API calls ready, build the Bubble page that clients will use to review designs and submit feedback. Go to the Design tab in your Bubble editor. Create a new page (or use an existing one). The page layout has two main sections: Section 1 — Document List (optional, for multi-project portals): - Add a Repeating Group - Type of content: 'Sketch Cloud Get Shares' - Data source: 'Get data from an external API' → Sketch Cloud - Get Shares - Inside the cell: a Text element showing the share name, and a Button that sets a Custom State (Page State) to the current cell's shortId Section 2 — Artboard Gallery (main section): - Add another Repeating Group with layout 'Grid' (so artboards display in columns) - Type of content: 'Sketch Cloud Get Share Scenes' - Data source: 'Get data from an external API' → Sketch Cloud - Get Share Scenes → set shortId to the Page State (or hardcode one specific shortId if you're building a single-project portal) - Inside the cell: - An Image element → set its Source to 'Current cell's Sketch Cloud Get Share Scenes's previewURL'. The CDN URLs from Sketch's API are directly loadable in Bubble Image elements without any proxy or additional processing. - A Text element showing the artboard name - A 'Leave Feedback' Button that opens a Popup Feedback Popup: - Add a Popup element to the page - Inside the Popup: a Multiline Input element, a Text element showing the artboard name (pass it via a Page State when opening the popup), and a Button labeled 'Submit Feedback' - Create a Workflow triggered by Submit Feedback: action 'Create a new Thing' → Type: 'ArtboardFeedback' → Fields: artboard_id (from Page State), feedback_text (Multiline Input value), client_email (if authenticated), submitted_at (Current date/time) Data tab: Go to Data → Privacy → ArtboardFeedback. Configure a Privacy Rule so only admins can see all feedback records, and clients only see their own submissions.

Sketch Cloud can send webhook events when documents are updated, new versions are published, or shares are created. You can configure a Bubble Backend Workflow URL as the webhook target so Bubble takes action automatically when Sketch changes occur — for example, creating a notification or sending an email to reviewers. Important prerequisite: Backend Workflows require a paid Bubble plan. On the Free plan, Bubble cannot expose a public webhook endpoint. If you're on the Free plan, skip this step and use a manual 'Refresh' button on your Bubble page that triggers the API call to re-fetch artboards instead. For paid plan users: 1. In your Bubble editor, go to Settings → API in the left sidebar. Enable the option 'This app exposes a Workflow API' by checking the checkbox. Save. 2. Go to the Backend Workflows section (in the left sidebar). Click 'Add API Workflow'. Name it 'sketch_document_updated'. 3. Set the API type to allow incoming requests from any source (or configure Bubble's secret token validation). 4. Inside the workflow, add a 'Detect request data' step. Bubble will show a URL like: `https://yourappname.bubbleapps.io/api/1.1/wf/sketch_document_updated/initialize` 5. Copy this initialization URL (drop the `/initialize` suffix for the production endpoint URL — the production URL is: `https://yourappname.bubbleapps.io/api/1.1/wf/sketch_document_updated`) 6. In Sketch, go to your workspace Settings → Integrations → Webhooks → Add Webhook. Paste the production Bubble URL as the Webhook URL. Select the events you want (e.g., 'Document Updated'). Save. 7. Send a test event from Sketch to populate the 'Detect request data' fields in Bubble. Once detected, map the fields (document name, share ID, event type) to workflow actions (Create Notification, send email, etc.). RapidDev's team has set up dozens of design-review portals and webhook-driven notification systems in Bubble — if you want expert help configuring the full approval workflow, book a free scoping call at rapidevelopers.com/contact.

1Production webhook endpoint URL (after enabling Workflow API on paid plan):
2https://yourappname.bubbleapps.io/api/1.1/wf/sketch_document_updated
3
4Example Sketch webhook payload:
5{
6  "event": "share.updated",
7  "share": {
8    "shortId": "abc123de",
9    "name": "Mobile App Redesign",
10    "updatedAt": "2026-07-10T09:00:00Z"
11  },
12  "triggeredBy": {
13    "name": "Jane Designer"
14  }
15}