We can't all be amazing UI designers. Thankfully, there are plenty of UI kits and themes that you can purchase. Many of them open in applications like Figma in this short video, I'll show you how to take this design by zoom mouse a little bit and translate it into a Bubble page. So, first thing I'll do is I've created a new page.
New Responsive Engine
And I'm going to be using the new response engine in this demo. So I'm converting or upgrading the page. And then the next thing I'll check is how large is each canvas that the designer of this template has used.
2 column layout
So they have set and I'm setting this to a row as it's gonna contain two columns.They're width in my builder I want to that figure there 1440. And that's just give ourselves a little bit more height to work.
So this design here is made up of two columns. One, I'd say that's about 60% and then that's 40%. This looks like it is more of a background just based on the curves on the border there. So I'm going to just by double clicking down, find the bottom layer. I can see that it's a gradient. I'm just gonna take one of these blues for the demo and set it as my background column. Perfect. Okay.
And now let's take our left hand column when using the responsive engine beta the new one, I find it really helpful to label things because I often have to refer back to the element. In order to work out what bit I've got selected.
Border radius
So this one is going to be aligned parent. I'm gonna show you one in a moment and it's width is going to be fixed. At 60% has like 60% of the total canvas there. And then its height is going to be fixed also at a 100%. It's gonna have a background of white. Here we go. And let's have a look at the border radiuss so I'm just double clicking down on the canvas here. And I see that I've now got the background for the white and by going over on to inspect, I can see it expresses CSS and extract these figures here, which is a 16 pixel radius.
On the top, right. And the top left. I'm gonna drag that bit across. Makes it easier to see there. Oh, no top. Right. And bottom left is what I meant bottom right. What am I saying? There we go. Right. You can see, I have the radius in the right parts.
I'm now going to create the section for my form and by dragging the group in for some reason maybe this is just cause it's a beta it's not actually giving it a height or a width. So what size I need, I need to be width of 414 and then a height of 345. So it's going to be a series of columns, cuz I'm putting in a number of rows in there and the width is going to be, say 416 and uh, the height, I'm just gonna give it men height because oh, pixels. that looks a bit funny. Just so I can build into it. Perfect.
I want this page to be responsive, but this section here to always be that distance from the edge of the white box, I'm gonna anchor it to the left hand side or the right side, rather in the middle. Then in Figma by holding well by selecting an element and then moving my mouse into the gap I can see this space between so I need to give the white block a padding, cuz paddling is on the inside of an object and margin is on the outside padding of 141. So I select my white left column padding on the right side 141. You can see it's now positioned my box.
Typography
Let's build up some more we'll start with getting scripts of the typography. So let's start off with something blank. This text is gonna make it an H1. Good for SEO and good for screen readers. And it's Lato bold 32. Click on here for the height paste, the color rather and paste it in and then actually call it 'registration complete'
'Subscribe to our newsletters'. Perfect. Type it up. Brilliant.
Width fill group
You'll notice that it doesn't look exactly the same and that's because this has got a fix width as a pixel value, but I want it to take up the whole of the container. So I give it a 100%. So it fills up all of the space of the container. That's gonna hold my form and now drag another text element into here. This time I'll just copy and paste the and let's check that all the topography is correct. So this is Lato 14, 400, so it needs to be a little bit smaller and then it's a different color. Brilliant.
And I see there's a little gap between the two. So in Figma, you can, I see a little bit, do the same trick. I have this selected and then just moving my mouse over this element and I can see that there is an 11 pixel gap. So I'm gonna add 11 pixels to the margin on the bottom of my header.
Input fields
Then let's do email. So we need an input field. It's not put it in the right place. We can see here that it's not in my group, so I'm just gonna drag it in. And so my input looking at the styling here, it's got a border on the bottom edge, but otherwise it doesn't have any other styling to it. So. background here. So that's the background of the line that appears at the bottom of my input field. I need to get rid of the horizontal padding so that it's right up to the edge then turn off all the borders apart from bottom and also all the border radiuss need to be zero in order to have a straight line. I paste my color in there and you can see just about there's that faint line in there. Let's just get a rough height. If that is 71, let's make it 54. It's always a good height for an input, and this needs to be a 100%. The placeholder is start typing.
And there's one other thing missing from this, right. And that is an icon of an envelope. Maybe that's not available in Font Awesome. There we go. We'll just use this one for now.
Icons
This has highlighted a an issue because I want this icon. If we let's just do it perfectly, grab the color. Can you see what the issue is? The issue is that the icon is not sat in the right place. What's the size, the size is 18. So to get around this, I think I will select both and say group in aligned parent I'm then going to set to heights content. There we go. And now I should be able to do. So it doesn't really matter where the input field is aligned to because it fills up the whole space. But it allows me to put my envelope in the corner. I also notice that this is missing a a label in there. It's a latter 400 regular 14.
If I was building up a whole app like this, I would start saving these styles with labels, such as input, field label. So that I can recall the style later on get rid of the min-height it also needs to be next. Okay. And then I'm going to want to group this email. I mean, actually I don't need to do that. I was gonna suggest grouping the email with the group containing this input field and the icon, but I don't actually need to do that. I just need to get the distance between here and here, which is 72. I can add it as a margin to the bottom of there. Brilliant.
Button
Last thing is a button and I want the button. If we look at my elementary, I don't want the button inside of group C, so I'll just click send to last, let's get the gap. I like, I can apply it to the top of the button this time around there we go.
Export from Figma
We're almost there. I think we are just missing the design here. And with Figma, you can do quite a nice you can export very easily, in fact. So actually it looks like that image is really big, so I'm just gonna export a portion of it for this demo because it's made up of all of these parts. Okay. Well, let's export this cuz it, it shows you just how easy it is to export. So I export it here, export layers.
I've just realized that's exported the more as individual layers. What I should have done. Is export image here. There we go. So I've selected the group then back in Bubble. I'm going to need to build another column because I could just put the image straight in here but then I want it to be anchored to the lefthand side.
So the way to do that is gonna be to build in a second column. So if this was with 60, then this will be with 40%, make the height a hundred. Then I can drag in my image. Let's just de- skew this a bit.
Image aspect ratios
I should go for 600 pixels. Okay. I'm just gonna try, because we can see the aspect ratios off. It's distorts the image and I could check keep elements. Okay. Oh yeah. Okay. So because the image I've imported is, is square. I can just tick that box aspect ratio one to one. Let's have a look.
Wrap up
So we're basically there what you'll notice and I'm hoping that Bubble will fix this at some point is that you can't set if you were building this in some like Webflow or WordPress you could set this elements, height not to a 100% of the page container, because that has got a min height but you can set it to a 100% of the view height. So that's something to consider if you are building these split panel designs when you come to it is how are you going to layer out without avoiding kind of an ugly gap at the bottom.