New Feature Import Figma & How To Use It

New Feature Import Figma & How To Use It

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.

Table of Contents


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 https://www.figma.com/file/id/name-of-the-file

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.

Subscribe to

NoCode News

Every week a summary of the nocode news Bubble and Adalo, themes, plugins and much more.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

We have been immersed in the development community for several years now, and have been able to identify the power and speed of NoCode development.

All Rights Reserved © 2021 NoxCod

Legal Notices

Contact Us

9 rue Roger Brechan, 69003 Lyon 🇫🇷
Phone: +33 7 56 99 83 92
Email: contact[a]noxcod.com