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.
Upgrading to the Bubble New Responsive Engine
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 grey 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.
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 three, two, three, because we want it to be a little bit adaptive. Then let's have a look.
Inspecting CSS in Figma
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. So just by double clicking repeatedly, I can drill down to different elements. And often the one I find them looking for is labelled as background or BG. And here we go.
This is the information I need. The border is a solid one pixel. There's the colour and the radius is twelve. So to put this onto this group, I remove the default style roundness twelve border solid. And then there we go.
Already looking good. Let's move that out of the way. 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're arranged in here. The reason I'm doing two areas is because I want to fully replicate this bottom line.
This is our top. We want it to be, again, a column and width 100% to fully fill out that space. And let's add in that price tag so we can just use some text and it says $17 and by clicking in on it, I get the details. So there's my text colour.
Typography
Where's my font? Font is Lato, already set for that, but it is a weight 700, which is bold size 14, and there's a background to it. So if I go into the background there's, the background colour and border radius is eight.
And it needs to be centred and also centred 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. So I can see here that 1816 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.
Borders
Yeah we'll give it a border that 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 eight.
The border is going to look a little bit funny because of the dashed effect. So let's bring that down. There we go. 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 colour here so it's latto 716 and then centre it, write a name there's a little bit of margin so we can give this 18 on the top and lets get rid of that min height. So we, we want to just be working cleanly with margins and padding without kind of the min height and the width getting in the way. And then we have a sub menu. No not a sub menu like a sub piece of text.
So this is front weight, 414 size. So let's put in that colour and get rid of that top margin probably going to be a little bit close about one so we'll just add in two. I'll put in position.
Okay then we have got 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.
Colors
The progress bar is going to be made up of two colours. There's a background colour and we can see the border radius there. That's the font colour. Now we don't actually want a font in there so I'm just going to set this to zero because you can see it gives the percentage but we don't actually want that to copy the design border radius three. We don't want to border either and let's just get that green colour because that's what we want up here and we'll put in a percentage just so that it's visible.
The progress card didn't go in, that's why it's not picked up. What's going on there? There we go. And set the width to fixed width of 100% 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 colour. It's 14 and it's 400.
And so this time I don't want it to be 100% the width, I want it to fit to the content, get rid of the min width. So we'll say that's job progress.
And now 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 onto 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.
Brilliant. Now, last bit, let's add in these effectively what are buttons at the bottom and so how are we going to do that? To make it look cool, 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 100 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 grey colour.
You can see that up. Right. If we go into here, I think you'll see it clearer. So I've added the border to the whole of the group down here and you can see that there's a slightly off putting to the eye, double bordered effect going round. So I actually need to set the border here to independent.
Just the top.
Okay, let's fix that and then let's 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 twelve. And here's the colour and we're just going to centre it, remove the min height and it's called email.
That bit wasn't strictly necessary because she wanted to be fit to width without a min width. There we go. Duplicate it. We have one called Call and space them apart. Oh, actually we want equal spacing like that.
There we go. Now, there is one thing missing here and I've already recorded for slightly longer than I planned to, but let's finish the job, which is that there is a border line down the middle. So let's have a go at 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 100% yeah, there we go.
Content alignment
We fill the space.
And then we need to centre 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 buttons.
And I've made the same mistake again, I need to do it 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 border. I didn't mean to do that. I was hoping, it's still me going to grips with the new response engine.
I was hoping that it would copy the spacing and the height that I'd applied. So height needs to be 100%, 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 shape that they see, as well as just the text in the middle. 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 colours, the font sizes, et cetera, in Figma and where you plug that data into Bubble.