Figma to Bubble Guide: Import Your Designs 3x Faster with Fewer Errors

Native Figma to Bubble integration

Bubble provides a native integration with Figma, allowing users to directly import Figma prototypes into Bubble without relying on third-party tools. 

Advantages

1. No additional fees for third-party services.
2. Independence from third-party tools and their creators. Third-party tools can sometimes encounter issues, and users might need to wait for updates or fixes.

Disadvantages

1. The integration is prone to various bugs and issues, many of which are documented in the official Bubble Manual. These problems often make the import process challenging, leading many Bubble users to rebuild the UI from scratch within Bubble rather than relying on the import feature.

Deezign

Finally, there appeared a better way to import Figma to Bubble. Meet Deezign.io.

This Figma to Bubble plugin allows you to define the types of elements in your Figma prototype in advance. This helps you avoid a situation where, after the import, the Bubble Editor is filled with unknown elements that require cleanup. Without this plugin, you might spend as much time cleaning up the import as you would building the UI from scratch.

Native integration vs Deezign

Let's import the same Figma interface to Bubble using native integration and using Deezign and compare the time, effort, and easiness of both approaches.

Import the prototype using native integration

To convert Figma to Bubble using native integration, open the Bubble Editor of your application and go to "Settings" -> "Design Import".

Here you will need to provide the "API Key" from your Figma account and the "Figma File ID" which is the ID of your Figma file.

To generate the "API Key" go to figma.com and ensure you are logged in. Once logged in, click your profile avatar in the top-left corner and select "Settings" from the dropdown menu.

Once you complete this step, a popup will appear with the "Account" tab selected by default. Scroll down to the "Personal Access Tokens" section and click "Generate new token”.

You will be shown another popup where you have to name the API key, other adjustments could be left as they are already set by default.

Once you generated the API key, copy it and insert it in the Bubble Editor.

To get the Figma file ID, open your prototype in Figma and check the browser's URL.

It will be something like

https://www.figma.com/design/uLUjNEMynLmqPltk4UtAhy/Your-file-name

You need to copy the value in between .../design/.. and .../Your-file-name, in our case it is uLUjNEMynLmqPltk4UtAhy.

Copy it and insert it into the Bubble Editor.

Now you can go to the Bubble Editor and tap "Import".

Now you have to wait for a few moments...

And voila:

The interface is successfully imported, but let's now analyze the issues that occur during the import Figma to Bubble process with the native integration.

The problem is that most of the elements were converted as a fixed layout.

Buttons and inputs are imported as just texts and groups.

The GitHub icon is imported as just a shape.

And that's just for a single page. Now imagine you are using the native import Figma to Bubble.io feature to export the entire prototype. You will need to spend a lot of time fixing the responsive layout, as well as adjusting the inputs, buttons, and images. 

It took me 60 minutes to convert Figma to Bubble and finalize the page using the native integration.

Import the prototype using the Figma to Bubble plugin by Deezign.

Now let's export the same screen using the Figma to Bubble plugin by Deezign. 

First of all, we need to create an account on Deezign. Once you have signed up, you will see a straightforward list of steps to start working with Deezign.

You have to install the Deezign Chrome extension.

Open your Figma file, turn on Developer Mode, install the Deezign Figma plugin, and launch it.

Copy your API key generated on Deezign.

Now you are all set.

Let's export the Figma screen to Bubble.

What you want to do is make sure your screen is set to auto-layout.

If not — just enable it.

Now in the Deezign plugin in Figma open "Buttons/inputs".

Select the input element on your prototype and then tap on "Input" on the Deezign interface.

Do the same thing for the buttons.

Once you go through all inputs, buttons, dropdowns, and multiline inputs, you can go back to the "Convert" section on the Deezign interface.

The next step is to select the parent container of the screen and click "Convert to Bubble" in the Deezign interface, but as you can see in the screenshot above we've run out of credits.

Now we have to click on "Upgrade to Premium", and go to the Deezign interface to subscribe to a monthly plan.

Now, everything is fine on the Deezign interface

Now we can select the parent container and tap on "Convert to Bubble".

Afterward, we have to open the Bubble Editor and enable the Deezign extension. Here, you can find the element that you've converted and copy it.

Now you just have to paste it on the empty Bubble Editor page. Make sure that your page's layout is not fixed.

And voila, your screen is imported from Figma.

Now let's review the result.

All the inputs and buttons are imported properly as relevant element types.

Even the icon on the GitHub login button element was imported properly as HTML.

Let's check the page preview.

It looks exactly like in Figma. We now just need to polish it slightly and we will be ready to go.

Now imagine how many hours you will save when working on an e-commerce checkout or survey interface with numerous inputs, buttons, and icons. There's no doubt that, with the Deezign Figma to Bubble.io plugin, you will build your UI much faster. 

It took me 20 minutes to convert Figma to Bubble and finalize the page using Deezign, which is 3 times faster than with native integration.

Importing multiple pages

When you are using native integration, per every container in Figma, Bubble creates a separate page. You can import all of the pages within a few moments.

However, in Deezign you will need to convert, copy, and paste all pages manually. But it will be faster than fixing all the buttons/inputs/icons in the Bubble Editor for all the pages that you import via native integration.

Bonus: free Figma assets

Designing products might be challenging. But not after you have read this article. You can leverage the efficiency of pre-built UI kits, Design systems, and components, use Deezign, and easily build visually appealing apps by simply bringing together the pre-built blocks and pasting them into your Bubble editor.

If you create a free account on Deezign today, you will get access to numerous free Figma libraries that could be used for your project and that will allow you to save a bunch of time and maybe even design the app yourself.

Create an account and go to "UI Kits" to grab one of the libraries.

Besides the ones listed on Design you can also explore more on Figma community libraries.

If you want to learn more how to use this assets, you can check out the official Figma tutorial.

Example apps we've built using Figma to Bubble native integration

Meet SWOP. A mobile e-Commerce app to exchange/resell clothing. Deezign didn't exist back then when we worked on it. After converting all the screens from Figma to Bubble.io we had to deal with a big amount of different unnecessary groups/shapes. It took us around 6 weeks to finalize MVP, but we believe it could have been around 5 weeks if we'd used Deezign.

Example apps we've built using Deezign

The recent project that we've delivered lately using Deezign is a Business App for a consulting team from Boston Revby. We've spent around 8 weeks on the initial MVP and we believe it would have taken up to 10 weeks without Deezign.

Summary

To sum, up Bubble is a great way to easily and quickly convert Figma to Bubble.io and get a functional MVP. However, you should be aware of the pitfalls of native integration and if you want to save time, you should definitely take a look at Deezign.

If you want us to take a look at your prototype and help you convert Figma to Bubble, please book a call with us.