Need to talk to an expert ?

Contact an expert

New Feature Import Figma & How To Use It

Reading time:
September 4, 2020

From July 31, 2020, you can now import your Figma models directly to Bubble. A huge time saver for page integration? We were able to test it, and you will find here our feedback on this new Bubble.

How do I use Figma import on Bubble?

We’ve done a detailed summary of the set-up, and you’ll also be able to see the rendering on a demo page. To begin with, in order to achieve the Figma import, we will need some keys to connect it to your Bubble platform. Here are the different steps:

Get your API key

Towards Figma’s settings by clicking on your profile at the top left.

The API key must be generated on Personal Access Tokens.

Recover the Figma ID from the file

Open your Figma file. In your URL, you will have something like

Take what is right after file; in the example, it is id.

Bubble setting

Once you have these items, enter them in your Bubble “Settings” and then in the “General” tab:
If all goes well, your import will start.

If you want to see the result obtained from this Figma, you will find the Bubble here. Saas Design made the Figma.

This feature will make it even smaller for your app to develop. In a matter of seconds, all your screens are imported.

Our opinion on the Figma Bubble import

Importing saves significant time for the import of screens. But it will have to be retired because the import will not create groups but usually shapes, which can make the responsive more complex.

In short, a nice addition, but that will not revolutionize the integration time as many elements need to be reworked.

You have questions on your Bubble platform, ask it in the comment section or contact us.

Dominique Silvestre
CEO, Co-Founder
Do you have a project ?
Let's talk about it !
Work with No Code specialists
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.