How to import a Figma design into Bubble step by step guide

Importing a Figma Design into Bubble

In this video, I'm going to be demonstrating how to import a design like this into your Bubble app. I'm not going to be showing how to do it using the automated import tool. There's another video we've got demonstrating that and talking about why I prefer to do it manually and that's what I'm going to demonstrate to you now. For the sake of keeping this video brief, let's focus on copying one of these contact cards into Bubble.

Setting Up the Bubble Page

So here's my Bubble page. I'm just going to upgrade that to the responsive engine. There we go. So what do I need? I'm going to be creating a card which has got a gray border and then content within it. So let's build it right in the middle of this page. So I'm going to add in a group, align it to the middle and let's have a look at the dimensions we're working with.

Creating the Card Structure

So we've got a width of 265. I'm changing this to a column because I need that to lay out the rest of my items. 265 and then a height of 300. In fact, we'll put in a min height of 323 because we want it to be a little bit adaptive. Then let's have a look. If we go over to inspect we can view some of the CSS properties and part of doing this manual process of looking at the Figma design and bringing it over to Bubble is understanding where to look.

Inspecting CSS Properties

So just by double clicking repeatedly I can drill down to different elements and often the one I find I'm looking for is labeled as background or BG and here we go this is the information I need. The border is solid one pixel, there's the color and the radius is 12. So to put this onto this group I remove the default style around this 12 border, solid and then okay and there we go already looking good. Let's move that out of the way.

Structuring the Card Content

So inside we're looking at two areas. We've got this bottom area and the top area. So let's create our top area first and that's going to be, in fact it doesn't give a height because of how they've arranged in here. The reason I'm doing two areas is because I want to fully replicate this bottom line.

Adding the Price Tag

So let's, this is our top, we want it to be again a column and width 100% to fully fill out that space and that's set in that price tag so we can just use some text and it says $17 and by clicking in on it I can get the details. So there's my text color, where's my font? That font is Latto already set to that but it is a weight 700 which is bold, size 14 and there's a background to it.

Styling the Price Tag

So if I go onto the background there's the background color and the border radius is 8 and it needs to be centered and also centered vertically in order to place it in the middle of the piece of text but that's looking fairly close and so let's just align that to the left hand side and because I've got this second container my primary one my secondary one I can apply some margins, sorry some padding to it.

Adding Padding and Image

So I can see here that 18 16 so let's work with that. So padding from the top is 18 bottom 18 16 16 brings it in from the edge. We then got an image and the image size is 66 and just so it stands out we'll give it a back yeah we'll give it a border just so it stands out because I'm not actually going to upload an image right now and it's got a border to it and let's not forget that border of 8.

Adding Text Fields

Okay, we align this into the middle okay we've now got two text fields so I'm going to make it 100% of the width so it's 100% confined by the padding of its parent and I'm doing that because I'm building with responsive design in mind and so we want to copy the color here so it's Latto 716 and then center it right in name there's a little bit of margin so we can give this 18 on the top and screw that min height so we want to just be working cleanly with margins and paddings without kind of the min height and the width getting in the way and then we have a sub menu well not sub menu like a sub piece of text so this is font weight 414 size so let's put in that color and get rid of that top margin probably going to be a little bit close about one so we'll just add in two put in position okay okay then we have got a progress bar.

Adding a Progress Bar

So let me check if I've got this already installed no so I can go into plugins let's get a progress bar use the default Bubble one that'll be fine okay and so the progress bar is going to be made up of two colors there's a background color and we can see the border radius there that's the font color now we don't actually want a font in there so I'm just going to set this to zero so you can see it gives the percentage but we don't actually want that to copy the design for the radius three we don't want to border either and let's just get that green color because that's what we want up here and we'll put in a percentage just so that it's visible up the progress card didn't go in so I'll start picked up what's going on there there we go and set the width to the affix width of a hundred percent and then its height is just four it's very slim cool and oh there are some labels above that so I'm going to create a group because I need to be able to put a row in here to show my labels so my row and then let's just make that a little bit bigger and I'm going to copy this piece of text and reformat it for the label so there's my color it's 14 and it's 400 and so this time I don't want it to be 100% of width I want it to fit to the content get rid of the min width so we'll say that's job progress and then I'm going to copy and paste this into the same box because we want to be able to display our percentage value so this time it is of 700 and then we go on to this row and we choose this option here in order to put the space in between the items let's add a little bit of margin onto the bottom of our progress bar and let's check how that's looking cool so we need some margin above the bar there we go so if I click in the item and then on Mac I'm holding option it tells me that there's a 27 pixel gap between those items here so I'm going to add in a 27 pixel margin to the bottom and then on here we need a gap below it 34 so I select my in fact we can use the padding here so 34 okay brilliant.

Adding Buttons at the Bottom

Now last bit let's add in these effectively what buttons at the bottom and so how are we going to do that and make it look all neat and tidy so this is why everything up here is in a group because I want to add in the padding here if I added padding to the parent then I wouldn't still be able to hit the full width so easily here so it's going to be a row and of a hundred and I don't want it to fit the content height but I do want to add a border to the top which is here that's my gray color okay you see that up right if we go into here I think you'll see it clear so I've added the border to the to the whole of the group down here and you can see that there's a slightly off-putting to the eye double-boarded effect going around so I actually need to set the border here to independent just the top okay that's fixed that and then let's yeah just to save time I'm going to put some text in there instead so we can place in one of our text buttons here so this time it is 900 and size 12 and here's the color and we're just going to center it remove them in height and it's called email and we will that bill wasn't strictly necessary because she wanted to be fit to width without a min width okay duplicate it yeah wrong called cool and space them apart oh and actually we want equal spacing like that there we go.

Adding a Border Between Buttons

Now there is one thing missing here and 40 records for slightly longer than I plan to but let's finish the job which is that there is a borderline down the middle so let's have a go approaching that so rather than fit to content if we uncheck both of those yeah it ends up being equal and then if we set the height to hundred percent yeah there we go we fill the space and then we need to center it vertically and then so we don't get that nasty double border one work around is to just apply it to one of the one of the buttons and I've made the same mistake again I need to do it as the as independent borders so this is just on the left and then I'm just going to copy formatting and paste formatting okay that's copied the board that didn't mean to do that I meant I was hoping as still me going to groups to the new response engine I was hoping that it would copy the spacing and the height that I'd applied so height used to be hundred percent because one reason for ensuring that it fills the space is that if I wanted to make this into a button I would like my user to be able to click anywhere in the the shape that they see as well as just the text in the middle.

Previewing and Comparing the Result

So let's preview that on the front end and let's compare the two and I think that is not bad for 15 minutes we have copied this really quite attractive engaging design of a contact card and we've copied it into Bubble demonstrating where you can find different elements the colors the font sizes etc in Figma and where you plug that data into Bubble.