How to import Figma template into Bubble

Importing a Figma Template into Bubble

In this video, I'm going to demonstrate how to import a Figma template into your Bubble.io app using the built-in design import tool that Bubble provides down here in the settings panel. I'm going to do that using this NFT marketplace template that I've purchased from Themeforest. You can see here a very talented designer has created all of these different pages and layouts that I can make use of in my Bubble app while building my NFT marketplace.

Accessing the Import Tool in Bubble

Let's go back into Bubble. This is a completely clean app and I've not created any pages or set up any templates yet. There are two parts to the form in order to completely import. One is an API key and then the Figma file ID. You'll find the Figma file ID between the two forward slashes, so I'm going to copy that. The API token or the API key is going to be in account settings. Then scroll down and we have to create one. Just labeling it Bubble temp and then copy it and paste into there. Then I click import and there we go.

The Import Process

I've just skipped ahead because it took rather a long time to import. 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. Even icons with individual backgrounds - you can see I've now got 1288 images that have been imported into my Bubble app through doing the Figma file import.

Examining the Imported Design

But let's have a look at what we're left with. We've got our header up here. Let's have a look in the elements tree how well this import has worked. Okay, so we have got nested groups. 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.

Challenges with Imported Designs

That's the background, but why not use that as the background? I think that's just because there's not going to be a perfect import process. There will be some algorithms behind the scenes that's trying to work out where things are placed, how to lay things out, but it's not going to be perfect. In my experience and my gut feeling on it is you're going to end up taking longer than needed.

Responsiveness Issues

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'd need a very clever algorithm to take what the Figma designer has created and make it responsive.

Manual Work Required After Import

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

Conclusion and Next Steps

That's an illustration of how to import a Figma design 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 the follow-up video, I'm going to show how to design this full page in Bubble manually using the Figma template.