Importing Figma Designs into Bubble
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, if I zoom out a little bit, and translate it into a Bubble page.
Creating a New Page in Bubble
So first thing I'll do is I've created a new page here, 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.
Setting Up the Page Layout
So they have set, and I'm setting this to a row as it's going to contain two columns. The width in my builder, I want to be that figure there, 1, 4, 4, 0. And let's just give ourselves a little bit more height to work with. 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.
Creating the Background
So I'm going to just by double clicking down, find the bottom layer. Oh, I can see that it's a gradient. I'm just going to take one of these blues for the demo and set it as my background color. Perfect.
Building the Left Column
Okay. And now let's take our left hand column. When using the response engine beta, the new one, I find it really helpful to label things because I often have to refer back to the element tree in order to work out what bit I've got selected. So this one is going to be a light parent, and I'll show you why in a moment. And its width is going to be fixed at 60%, has 60% of the total canvas there. And then its height is going to be fixed also at 100%. And it's going to have a background of white. There we go.
Adding Border Radius
And let's have a look at the border radiuses. 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 onto 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 going to 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.
Creating the Form Section
I'm now going to create the section for my form. And by dragging the group in, for some reason, maybe this is just because it's in beta, it's not actually giving it a height or a width. So what size I need? I need it to be a width of 414 and then a height of 345. So it's going to be a series of columns because I'm putting in a number of rows in there. And the width is going to be 416. And the height, I'm just going to give it a min height because... Oh pixels. That looks a bit funny. Just so I can build into it. Perfect.
Positioning the Form
And then, because 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 going to anchor it to the right-hand side, in the middle. And then in Figma, 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 because padding is on the inside of an object and margin is on the outside, a padding of 141. So I select my white left column, padding on the right side 141. And you can see it's now positioned my box there.
Adding Text Elements
Let's build up some more. We'll start with getting to grips with the topography. So let's start off with something blank. This text is... I'm going to make it an H1. Good for SEO, good for screen readers. And it's Latto bold 32. And click on here for the height. Paste the color rather than paste it in. And then let's just call it registration complete. Time for two new letters. Perfect. Type it there. Brilliant.
Adjusting Text Width
Okay. You'll notice that it doesn't look exactly the same. And that's because this has got a fixed width as a pixel value. But I want it to take up the whole of the container. So I give it 100%. So it fills up all of the space of the container that's going to hold my form.
Adding More Text Elements
And now I'll drag another text element into here. And this time I'll just copy and paste the text. And let's check that all the topography is correct. So this is Latto 14 400. So it needs to be a little bit smaller. And then it's a different color. Brilliant.
Adjusting Element Spacing
And I see there's a little gap between the two. So in Figma, you can... I'll zoom in 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 going to add 11 pixels to the margin on the bottom of my header. Okay.
Creating the Email Input Field
And then let's do email. So we need an input field. Okay. And let's not put it in the right place. We can see here that it's not in my group. So I'm just going to 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. So I need to get rid of the horizontal padding so that it's right up to the edge. And then turn off all the borders apart from bottom. And also all the border radiuses need to be zero in order to have a straight line. And I'll paste my color in there. And you can see just about, there's that faint line in there.
Adjusting Input Field Dimensions
Then 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 100%. The placeholders start typing.
Adding an Icon to the Input Field
And there's one other thing missing from this row 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. Okay. And this has highlighted an issue because I want this icon. Let's just do it perfectly. Grab the color. You see what the issue is? The issue is that the icon is not set in the right place. What's the size? The size is 18.
Aligning the Icon and Input Field
So to get around this, I think I will select both and say group in a line to parent. I'm then going to set to height content. There we go. And now I should be able to do that. 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.
Adding a Label to the Input Field
I also noticed that this is missing a label in there. So it's a Latto 400 regular 14. And 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. Email. Get rid of the min height. Also needs to be next. Okay.
Adjusting Element Spacing
And then I'm going to want to group this email. I mean, actually, I don't need to do that. I was going to suggest grouping the email with the group containing this input field in 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. And I can add it as a margin to the bottom of there. Brilliant.
Adding a 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 center last. Let's get the gap. I can apply it to the top with the button. This time around. There we go. Finish. Okay.
Adding an Image to the Design
We're almost there. I think we're just missing the design here. And with Figma, you can do quite a nice, you can export very easily. In fact, it's actually, it looks like that image is really big. So I'm just going to export a portion of it for this demo. Because it's made up of all of these parts. Okay. Let's export this because it shows you just how easy it is to export. So I export it here. Export layers. Right. I've just realized that's exported them all as individual layers. What I should have done is export image here. There we go. So I've selected the group.
Importing the Image into Bubble
Then back in Bubble, I'm going to need to build another column because I could just put the image straight in here and anchor it to the right. But then I want it to be anchored to the left hand side. And so the way to do that is going to be to build in a second column. So if this was width 60, then this will be width 40%. Make the height 100. Okay. Then I can drag in my image. Okay. Let's just de-skew this a bit. Oops. What should we go for? 600 pixels. I'm just going to try because we can see the aspect ratio is off. It's distorting the image. And I could check keep elements. Okay. Oh, yeah. Okay. So because the image I've imported is square, I can just tick that box there. Aspect ratio one to one. Let's have a look then.
Final Thoughts on the Design
Okay. 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 something like Webflow or WordPress, you could set this elements height not to 100% of the page container because that has got a min height, but you could set it to 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 lay it out without avoiding an ugly gap at the bottom.