How to Build an NFT Marketplace Login with Figma & Bubble.io

Introduction to Bubble.io and Figma

In this video, I'm going to demonstrate how to take a Figma design like this and build it up in Bubble.io. I have here a Figma template of an NFT marketplace that I purchased off Themeforest and I'm going to take you through each step of building at least this sensible page in Bubble. So first off we're going to be using the new responsive engine as I'm recording this in June and I believe in the next month or so every app by default will be using the new responsive engine.

Setting Up the Page Layout

The first thing I always do is work out what my page width needs to be. So I'm going to do that by selecting an element on the left and an element on the furthest right and Figma gets me the value there 1200. So layout is going to be 1240 because I like to leave a nice 20 pixel gap down either side of my page and I'm going to make this a column and for appearance sake let's just put in the header although I'm going to be focusing on this. The header is, click on it, it is 70 pixels high. I'm going to make it a row. Width is going to be fixed width of 100 because it's edge to edge and then the height is going to be a fixed width of 70 pixels.

Adding the Page Background

Okay right now let's put the page background in so I select the topmost element and I can see there is my page background. Make sure that that's set to 100 otherwise it adds a slight transparency to it and this is going to be white just so it stands out. Okay let's just check that. Cool looking good.

Creating the Center Box

Right let's work on this center box so I'm going to add in a group and align it into the center and then I know the background is going to be white. Just checking it's not on off white it is white and I can see that the border radius is 30 pixels and that there's also a shadow. A drop shadow so by going over to inspect I can see the values express the CSS and the left or right here you read there's top to bottom in Bubble so I'm going to take the color first so background that's where the box shadow color and hit enter and Bubble converts the IGBA value to hex color with a transparency opacity figure and then these numbers here that is your left to right top to bottom so it goes 0 20 30 and then if the value is not given there you just leave it blank as 0. So there I've got my shadow and then let's work on margins so the spacing between them is a hundred there and I'm just doing this having selected this item I'm then moving my mouse over other elements on the page so it's a hundred and 120.

Adding Images and Styling

Brilliant and right let's work within this element so we have these images they're all in the same group and so Figma handily allows me to go ahead and click export shape and it will export as a PNG all of these images as a single file and I've already gone ahead and done that so I can go image and then I can drag the image in. Let's sort out the layout so it's going to be column and I've not sorted out the width so the width the max width except for me I always want to be thinking about what happens it when the page shrinks I always build with the intention and that will be responsive and I find that it's helpful to work that in now rather than having to go back and debug unresponsive elements later so that's why you'll never see me or rarely see me using fixed or even aligned parent because if you want to be responsive it really needs to be row or column so max width is 140 and I'm going to get rid of the min width 840 max width and line into the middle.

Adding Text and Styling

And then there's a little bit of padding around the inside of here so just exploring how the design has created this element here that we are all of the internal elements so by selecting the element and then holding option on Mac and then moving into the space it tells me what the so margins are are looking outside of an element paddings are going to be on the inside an element so I'm going to be working with padding for the white group that's the background so that's going to be 43 on top and then I'm just going to go with 77 on the sides 43 I've put 42 on the bottom for now might change that doesn't look good there's 77 okay I'm going to align that to the center so there's something a little bit off with the size there let's try and work out what that's happening so here that the width is 8100 and sorry 685 okay there we go my fixed width no 685 trying to try to get that right 685 now the issue is that's not going to be responsive so the little trick that I do is here is to use the ratios but then just put in the pixel value so 685 155 685 1 5 and that way it's the aspect ratio is going to stay correct and it's not going to squash the image but the image so the image will shrink as the width of its container is reduced right let's work on some topography so we have in here text login for NFTs and by double clicking on it I go straight to the element and the font is inter and it's bold and it's 24 in size so this is using a numerical value for weight bold is always 700 and you need a color brilliant and also it's got a letter spacing change most cases you won't have that so although it's a percentage yeah you get the idea and this is going to be centered within the text and one way of doing that is to ensure that the text box width is 100 now we need to do a little bit on the padding sorry the margin which is let's call that 14 brilliant and then we have some text below oh and let's set the get rid of the min height there so this text below is going to be width 100 yeah just we're just preparing for it to be responsive and so that is inter 15 that says the font weight is mixed that's because of the register on the end I actually have to do that let's get the text first so inter so because the majority of it is regular that's what I'm going to go with and you need a little bit of a space between these two square nine.

Adding Input Fields and Styling

Right let's get the register bit at least styled separately so you can put BB code directly in there BB code is like a it's like a variation of HTML but with slightly different syntax and you can use that to style elements in a text element in Bubble and so I know that by putting those square brackets around the B I get bold I also know that I can do the same with color and it's color equals and I need to zoom in a bit get the color oh and I'm gonna need the hash I think and then to close color okay so I would be tempted although you've only made the register section look like a link just for ease I'd be tempted to build a workflow off this whole element server user wants to click anywhere in this line they would go through to registration page okay now let's look at we have two columns so let's create a group to contain them so the group width is going to be 100% and it's going to be a row because it's going to contain two more groups in order to create that column layout let's get the margin correct or yeah space between them let's call that 40 so margin on the top it's gonna be 40 let's just give it slightly more height something to work with we're then going to drop two groups into here in fact we'll do one and then we'll copy and paste it so the group is going to be a column and we're not going to give it I we're not going to give it a fit width to content or a width in here because that will allow us to copy and paste and we then get two groups next to each other and we'll want a I'm not going to do this bit for now I advise this video would be too long but let's just work in the gap a gap of 100 and I love this feature of the new response engine apply gap between elements column gap hundred and then you can see that we now have a gap of 100 between our two columns right let's put in some inputs so the inputs here double clicking down we've got a background color and we've got no border so we don't have a border radius of six except I just removed the conditional I said if it's if the mouse is if you put the mouse over it does the border color change I'm just going to ignore that for now and so it is well the width is the full width of the group that it's in so the width is going to be 100% again because we want it to be responsive and then the height is 64 54 and let's just take the the font so it's inter regular 15 and there's quite an indentation and we also want to have that icon in there so let's work out what the indentation is so I think I think I'm just gonna eyeball it now the way to get the icon in there is to place the field inside of a group so group this element in in a line to parent because we're wanting to layer we need to put the icon on top so the aligned parent means that we can take an icon and we can place it in and it's just an envelope and then the size of the icon let's go for 16 govern the height and it's indented from the side by 20 so I can apply a margin to the left and then all I need to do on my input is apply a large enough horizontal padding say 30 no it's going to need to be more than that slightly too much and now that there is a downside to this which is always much which is that the the padding here is applied to either side which in this instance I think for an email input is going to behave a little bit on the weird side for a user because if I start start typing in here you'll notice that it stops short which it doesn't look too bad but I've just done it to illustrate one way of putting the icon there but like I say it's not perfect now let's put in the other fields so I want to select that's my column and then that's my field with an icon so this is the part I want to copy and paste and then I'm here I'm gonna apply the same gap trick which is 10 pixels and probably path lock yeah just gonna guess that and this needs to be set to email this needs to be set to password and right we've got a checkbox and a forgot password link so within the column group I need to create a another group I'm going to do it in between just because it's easier to drop it in and then make it last and so this is going to be a row the width is 100% just a bit more height so I can work with it I'm gonna put a checkbox element in here and that's going to say remember me have a look through our other videos to see how you can make a more attractive checkbox but for time I'm just putting in this one and also you'd obviously update the fonts but I'm just going to erase through these last bits let's get rid of the fixed width in fact we'll make it fit with the content and then we need to add in a link and I want the spacing of this row to be the space in between puts it right to the end what's the text say forgot your password I'll then link that to my now I wouldn't so the reset password page is a little bit of a tangent the reset password page is for people to arrive on when they followed the reset password in the email that's triggered from a workflow so actually I don't want a link I need it because a link doesn't let me trigger a workflow I need it to be text because I want when you click on it it to trigger a workflow it's content and then let's just update the style for this one so it's the on ice blue color medium and 14 so medium is lower than bold but regular I tend to just do whichever one I feel looks the best okay and then we need a button so I want the button to go into my column login and let's start this button so the width is going to be 100 and then I want a fixed height of this height padding what am I missing where's the height for this 70 that's that's okay so show me the padding not quite a count in there not like this in Figma before okay I'm just gonna go about a height of 60 tends to be somewhere between 50 and 60 looks good for a button and let's style it so we have a gradient okay that's got a little while before preview previewing it let's check it good that's looking good and let's work on our other column now we have got three buttons but the buttons have got an icon in them so I'm going to build the button using a group and so my group has a border radius of two with this color reduced to just 8% opacity so I have to put it in there and drag that down to roughly 8 just eyeballing it and two and the border radius is 6 and it's going to be a row and the height is 60 and that's gonna be 100% okay before I start adding in the column this or the icon and the text let's have a look at the padding in here so 21 top and bottom and then from the left and right 30 so let's just check we're working on the right item yep in my group so 21 top and bottom and then 30 left and right I'm going to use one of the built-in icons but you could use an image here if you wanted to Google I think I've mistyped the padding in there I okay the I need to get rid of my fixed height that's better what's the gap between these two parts the icon and the text is 22 and yeah I really love you love using the gap and the gap field here and text got the color for it and it is inter-regular 15 then so we can center it nicely it will get rid of the min height and copy and paste this paste it inside by accident there so just undid that and check put in our column paste again and then the column will give the gap of 14 perfect and this video has already gone on a little bit longer than I intended it but obviously you would go ahead and you'd update these but I hope that somewhere in the mix that you've learned something helpful for how to take the the numerical data and the color data that Figma shows you and translate that into building up all your elements from scratch in Bubble.