How to import Figma template into Bubble

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

In this Bubble.io tutorial video, we explain how to quickly import a Figma template into Bubble.io and the reasons why you might decide to manually build the design instead.

In this video, I'm going to demonstrate how to import a Figma template into your Bubble app using the built in design import tool that Bubble provides down here in the settings panel.

Bubble UI templates


So I'm going to do that using this NFT Marketplace template that I've purchased from
.

Import Figma into Bubble


So let's go back into Bubble. This is a completely clean install. I've not created any pages, set up any templates yet. So there are two parts to the form in order to complete the import. One is an API key and then the Figma file ID.

So you'll find the Figma file ID between the two forward slashes. So I'm going to copy that and then the API token with the API key is going to be in account settings and then scroll down. We have to create one, just labelling it Bubble Temp and then copy it and paste into there. And then I click import.

What the Figma import does


And there we go. I've just skipped ahead because it took rather a long time to import. And one of the reasons for that, well, I mean, the reason for that is that every single image that the Figma template designer incorporates into their design has been imported into my Bubble app. So even icons of individual backgrounds, you can see I've now got 1288 images have been imported into my Bubble app through doing the Figma file import.

But let's have a look at what we're left with. So we've got our header up here. Let's have a look in the elements tree how well this import is worked.

Okay, so we have got nested groups, so header. Yeah, but one of the things I'd say and the reason that I'm having got this far, this illustrates the point really well. I use Figma templates a lot and I build them manually step by step in Bubble because you just get a lot of unnecessary parts coming across. So that's the background, but why not use that as the background? And I think that's just because there's not going to be a perfect import process, because there will be some algorithms behind the scenes that's trying to work out where things are placed, how to lay things out.

Maybe, manual import is better


But it's not going to be perfect and in my experience, and my gut feeling on it is, you're going to end up taking longer than needed. It's going to take even longer to do it. Let's have a look at how responsive it is. Okay, so yeah, there we go.

It's not responsive at all and I wouldn't expect it to be. You need a very clever algorithm to take what the Figma
.

Let's just point out one or two other things. So, yeah, these aren't inputs. That's not a button. It is literally just shapes, shapes in the right place with the right background colour. But I'm going to have to go through and replace each of these with a
. There's a lot of manual laying outs that I'm going to have to do to make this page usable in my app.

Manual Figma import into Bubble


So that's an illustration of how to
into Bubble. But I think it also illustrates very clearly why it's much easier to do it manually.

So I'm going to stop there and in a follow up video, I'm going to show you
.