'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Bubble and Figma
Before you start
Who can use this feature
Users on any Figma team or plan.
This feature is available to all Bubble users and creating an account is free at bubble.io
Bubble lets you create interactive, multi-user apps for desktop and mobile web browsers, without having to write a single line of code.
Turn your designs into working prototypes and full-fledged applications. Import your Figma frames into Bubble, then add logic, workflows, and database capabilities to your designs. No coding required.
Bubble's Figma integration will:
- Import Figma frames as new pages of your app in Bubble
- Upload images from your Figma file to your app in Bubble
- Label the newly created Bubble elements with the same names as your Figma file
This feature is available to all Bubble users and creating an account is free at bubble.io
Tip! For more information about how the import works, known limitations, and tips for setting up your Figma file for best results with this import, visit the Bubble Manual.
Connect Bubble to Figma
The import tool exists in the Bubble editor and will ask for your Figma API Key. This is so Bubble can access the Figma file you specify and see all its contents. This integration can only access the specific files you tell it to, and will not make any changes to those files in Figma.
In Figma
To import a Figma file to Bubble, you'll need:
- Your account's Figma API Key
- The ID of the file you want to import
To add a Figma API key in Bubble, you will need to generate a Personal Access Token in Figma.
- Go to the File Browser.
- Click your name at the top left and go to the Settings tab.
- Under Personal Access Tokens, click Create a new personal access token.
- Copy this token. This is your Figma API key.
Each Figma file has a unique URL containing its ID. The file ID is the string of random alphanumeric characters found in the section of the URL after figma.com/file/.
To find and copy the ID of the Figma file you want to import:
- Open the Figma file you want to import.
- Copy the file's ID from your browser's address bar. If you're in the Figma Desktop App, right-click the file's tab to Copy link and paste it in a browser's address bar to view and copy the file ID.
In Bubble
- Navigate to your app in Bubble.
- Click Settings from the left side panel.
- In the General tab, scroll down to the Design import section.
- Enter your Figma API key and the file ID.
- Click Import. The import can take a few moments depending on the size of your Figma file.