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 ThemeForest. And 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.
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 designer has created and make it responsive.
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 Bubble button, each of these with a Bubble input. 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 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 a follow up video, I'm going to show you how to design this full page in Bubble manually using the Figma template.