Figma Tutorial for Beginners (2024): Website Design

Key Takeaways

if you've been wanting to dive into figma then you've come to the right place today we're going to be creating this cool web page and along the way you're going to get a crash course and using some of figma's best tools like a professional down in the description we're linking a starter file so if you want to clone it and design along with me then go ahead and do that and without further Ado let's get started okay so once you open up the starter project this is what you're going to see we'll go through these things one by one so first over here we have the colors that we're going to be using we have some um logos and symbols for the brand that we're designing for some images and these were all created using mid Journey but you'll have access to these if you want to use these exact ones you'll see this wireframe very messy wireframe that um we put together for this site so we'll be following it uh for the most part just to give us an idea of what of this information is going to go where so over here we've also got some icons that we'll be using some fonts that we're going to be using so we're going to be using inter and Roboto and Roboto mono so these are kind of the starting point for our fonts and then we have our page copy so we're just going to be pulling from this for all of the text we're going to be using in the site and I also want to point out that I actually changed the like canvas color um to make it darker so you can do that just by clicking anywhere on the canvas and you can come up here and switch the color of the page so by default it kind of looks like this but um I kind of like designing in dark mode I guess you could say so I just made it a little bit darker yeah that's that I guess before we dive in I do want to show you around figma a little bit um so this over here is the layer layers panel so when we're selected on layers here um just like any other design tool you're going to see your layers one on top of the other the ones you know on the top are on top of the ones on the bottom so for example if we come up here we can tell that this gray is actually behind the white cuz it's below it in the layers panel and there are certain shortcuts for um sort of moving things around on the layers panel so for one you can hold down command and hit right bracket and that will bring it up one level you can just do right bracket to bring it to the very very front you can see that brought it to the very top so yes this is the layers panel over here when you click on assets this is where all of our components and styles are going to live and we'll get there in one second and you can have multiple Pages um in figma so here you can navigate to whatever page you're on so it might be nice to have you know kind of like your exploration page here and then maybe your wireframes here and your designs you know etc etc so that's that um above that here we have our toolbar so I won't you know point out every single tool but um it does show you what some of the shortcuts are for the tools I almost never come up here because I use the shortcuts to do a new frame you hit F to do a new rectangle you hit R and to do a line of text or a text box you hit T and those are the most kind of important quick shortcuts um for the things right here okay so then in the middle is your canvas of course this is where our design is actually going to live and then if we click on any design element this is where our properties panel over here on the Right comes in so I can click on images and see all the properties associated with images text we have properties associated with text um things like that and of course we're going to get much deeper into that this properties panel is where a lot of the magic happens okay so now let's set up a frame for this design so I'm just going to hit F on my keyboard and as you can see when we did that um these frame sort of like templates came up so we can just create a frame of any size but I'm going to undo that and we can also hit F and look for what we want so I'm going to choose this desktop 1440 doesn't really matter the height cuz we're just going to you know keep adding our sections here so this is going to be our main frame for our design so I'm just going to call this homepage and as you can see on the layers panel this is what a frame looks like on the layers panel it has this kind of like hashtag as the symbol now something that's really helpful especially when it comes to designing for web is using a grid and so figma makes that really easy so I'm selected on my frame here and I'm going to come over to layout grid and hit the plus button and by default it's going to give me exactly that a grid what I actually want is columns so I'm just going to click there and change it to columns but instead of five I actually want 12 I want a margin of 20 8 so here on each side um we've got 28 pixels so that these columns aren't like all the way to the edge and then I want a gutter or a space between each column of 14 pixels okay and so now this is just really going to help us place all of our elements on the page and have it feel really consistent and also be easier for a developer to build down the line and the great thing is you can turn this off and on um by hitting the I here to you know kind of disable it so that you can be designing and then okay I want to see what it really looks like and turn it off so we'll be doing that throughout this process so before we start adding items I want to talk quickly about libraries um and sort of Saved Styles we're not going to go too deep into it but it is super helpful for example to save some colors into a local library um or basically to this file so that we don't have to keep ey dropping a color we don't have to keep pasting a hex code we can just have our palette set up for us so it's super easy to do that so I'm just going to select on one of our colors come over here and I'm going to hover over these four dots where it says style click on that and then click on the plus button and this is going to allow us to create a new style so we'll just call this gray and then I'm going to do that for this too this is white and black perfect so now you can see over here under local Styles we've got our color styles so now I'm just going to hit R for rectangle I'm going to just make this shape here and if I come over here hit those four dots then I can choose from any of these colors and it just makes it super easy some more things that we might want to add to our Styles panel are our type styles so same thing I'm just going to click on this style click on the four dots click create style and we'll call this header do the same thing here we'll call this header to and we'll call this one paragraph okay now that doesn't mean we're limited to just these but it is really nice to just have a starting point and the last thing I'm going to do setup wise is come over to these icons and if you don't know where to get icons Google actually has a material design icon library that is super super easy to use you can download them as svgs which I find to be the best way to work with icons so I highly recommend looking into that it's completely free but once we have our icons in figma it's a good idea to set ourselves up for success by Framing them consistently so what I'm going to do is click on this icon here this is a group of rectangles here as we can see in the layers panel what I'm going to do is hit control click come down and hit frame selection so now this is in a frame what I'm going to do is make this Frame 16 pixels by 16 pixels and Center my icon in there so as you can see we're just going to mess with it a little bit so that it centers perfect perfectly and then we'll call this hamburger and then I'm going to do the same for these so I'm going to hit frame selection 16 by 16 make sure that this is not going to scale on us 16 by 16 Center that arrow and one more time we're going to select on this and the shortcut to frame a selection is option command G select on this make sure it's not going to scale 16 16 and we'll call this copyright so this way all of our icons are sitting in the same size frame which is just going to make our life much easier and help keep things consistent rather than running around with completely different sized icons okay so back to our web page let's start with our hero and navigation so for this top hero section I'm going to create a new frame so I'm hitting f on my keyboard and I am going to just stretch it all the way across and I think like around 800 80 pixels high is a pretty good height for a hero um on most screen sizes you'll be able to see a little bit below it which encourages scrolling so that's great and one thing I want to point out is that using frames instead of rectangles is really important in figma because rectangles don't have nearly as many properties and as much flexibility as frames and you're going to see what I mean with auto layout and things like that as we get further into this but I basically never use rectangles unless I'm creating um like a vector icon or shape or something like that to kind of design and lay things out I always use frames and as you can see you can always have frames within frames within frames within frames within frames so it's just a a really nice sort of way to organize things and speaking of organization I am going to come over here to the layers panel and name this Frame hero okay great now I'm going to turn off our columns for now we don't really need them at the moment and I'm going to select on this hero frame and I'm going to add a fill but instead of adding just a color fill I'm going to add an image fill so I'm going to go in and choose an image so we've got our hero image here that I've saved to my computer perfect so now we've got this image fill here and now we're just going to start bringing over all of the elements that we want inside this Frame so now I'm going to come over and just start adding these elements in so I'm just going to copy and paste a copy of this another way that you can duplicate something really easily is by holding down option and dragging out a copy like that so that's what I normally do to save time so we're going to be using this pretty big it's the main brand logo so we'll just throw it in somewhere for now we're also going to need a headline so I'm going to bring this on over same thing I'm just duplicating it by holding down option and dragging creating the future of vision now also if you have a hard time selecting on an element on the canvas so like for example by default these elements are nesting inside of this hero frame which is exactly what we want but as a result if I go and click on this just once and try to move it it's not going to move I'm not selected on it I'm just selected on the entire hero frame so you can doubleclick or you can command click to sort of Click into a group or a frame um to select on what you want to select on so I'm going to do that I'm going to command click on this and I'm going to go over to my text Styles and hit header one cuz I think that's really what we want for this okay I want this like above the head so it's not covering the glasses we're going to put it just up against this fourth column and then I'm going to have this logo take up exactly two columns here and make sure that our top Edge is aligned so to do that let's say they're not aligned I'm going to click on both of them and to click on two things at once you can hit shift so I'm going to shift and click there and then you can come on up here and do a line top and that will make sure that they're perfectly aligned Okay so we've aligned them but I want to make sure I'm using consistent spacing so we have 52 I'm actually going to do 40 pixels on the top that's perfect and then we also have our navigation over here so I'm going to drag out a copy of this and I think I want to use our header 2 for this I'm just going to double click on that um Edge bounding line to bring it in and hug the contents and we've got 40 pixels of space on the top and bottom that's good but these are really squished together which we don't want that doesn't really make for Optimum clickability so I'm actually going to detach this style so that I can change it up a little bit and I'm going to come here to paragraph spacing and I'm going to increase that so we don't need to do it that much I would say what does 12 look like yeah 12 looks good then we'll get our smaller logo this is going to be like what you click on if you want to go you know back to home on our navigation so I'm going to align it to the very edge 40 pixels on top and I'm going to make it 40 pixels wide so this is the start of our navigation we also want to create a cart button though so we don't want cart within here because it's more important we want to like really bring it out to the side so to create a button I'm going to do it kind of off to the side first I'm going to hit f for frame I want to make sure that the height is at least 44 pixels um for Optimum tability and accessibility I'm going to round the corners a bit so to round corners you can select on the frame come up here to Corner radius let's see oh 20 is a lot let's do like four want to keep it kind of subtle then I'm going to hit t on my keyboard for text and we're going to call it cart again we can use our head header 2 font which is good then I'm going to drag out a copy of this um we want to know what's like how many things are in our cart so we have this I'm going to name the frame button but this isn't looking very good right so this is where I'm going to introduce you to Auto layout which is honestly one of my best friends when it comes to designing inigma I use it so much um you don't have to use it for everything but I'm going to show you it works so that you can decide when you want to use it and not use it so Auto layout I'm going to hit plus to like you know start working on auto layout as you can see that automatically hugged in all of that extra space and it's hugging our elements in fact it says hug on the top and sides so we can really kind of tell it how to behave here so right now we have 25 pixels of space in between these items we have 19 pixels of horizontal um padding so on the left and right and 15 pixels of vertical padding so on the top and bottom I'm cool with the 15 um let's make it 15 on the sides as well and then I'm going to say 20 um in the middle should be good in fact that actually seems like a little too much should we do 10 yeah I think that's good so now the beauty of this is say it doesn't say cart let's say it says I don't know button button see how the button is growing with what I'm typing that is just super super helpful and it just saves so much time so I really love that so I'm going to drag this in as I'm dragging it in you can see that it is going inside side of this hero frame and then I'm going to drag it so that it is perfectly aligned to this column here oh I didn't explain before how you can tell how far away something is so I'm just holding option I have this button selected and I'm holding down option and I'm like hovering over the edges to get these red numbers to show up so that I know how far away I am from certain things so that's a helpful shortcut as well okay and one more thing for the navigation we want our hamburger icon so I'm going to copy this icon and paste it over here and I think I want it all the way against this Edge and that makes me think I might want this um I might might want to ignore my columns for a second and just have these sort of live together so I'm going to have these 40 pixels away from each other now turning off those I think that looks pretty good so next I want to just have like a paragraph um down here so I'm going to grab this paragraph here and paste it on in and since it's a paragraph we're going to use our paragraph style and we'll line it to this Edge and we'll have it take up three columns I think that should be good and since we have 40 pixels of space on the top I'm going to put 40 pixels of space on the bottom um along this as well I think that is going to be good that's looking great now we're just going to add in some more of our icons so to sort of round out this design I'm going to have this kind of mirroring this and have something in each corner so I'm going to grab the arrow here and we can have a button that just says scroll down make sure we're 40 here and then I'm hitting T scroll down I think I like that in the paragraph by the way if you want to go deeper with figma and learn even more best practices and things related to prototyping creating micro animations and even more stuff than we're covering in this video I've actually done a course with flux that is all about designing websites in figma and it goes much much deeper than we're going in this video so if you're enjoying this and you think you might like to go even further then definitely check out that course it's going to be linked in the description here is our hero I think it's looking really good now let's dive into the next section so we're going to do kind of little bit of an about section here so first what I want to do is hit F and create a frame for this section and I'm going to give it a fill of our gray then let's go over and see what text we want in this about section now of course since we're on this light gray we are not going to want to use our white text we're going to want to use black so I'm going to come over here choose black um we're going to use this as a paragraph and this as our heading so come in here heading one and this looks pretty good but it's competing with this one um so I'm going to make it a little bit smaller so I'm going to detach this and we'll make it like 78 I think cool so now let's turn back on our columns cuz without them I don't know where to put anything I'm going to align these here and going to do a little bit more space on the top and bottom than I did um on this image just to give it a little bit more padding so I'm using 100 pixels on the top here um and then let's choose this and we'll make this our paragraph and I think I want this to take up four I mean three columns again so we'll do that and then I want it aligned to the bottom of this so you can see as I'm moving it um I'm getting that red line that shows me it's aligned to the bottom I also like to hold down shift when I'm moving things like um the line height the space between the letters I think that's called letting or kerning I kind of forget don't come at me but yeah there's a lot that you can do to manipulate text here um I already already kind of have it how I want it but there's just a lot you can do so feel free to play around with that as well let's give ourselves kind of like a title here or like a label I guess you could say we'll say it's header to I think that looks good just make sure we're aligned okay easy enough so we're probably going to need more room here because we also want to have if we look at our wire frame here we want to have product images within this section as well so in order to create like a product thumbnail I want to make that a component and a lot of times in Design This is called a card so we're going to create a card component and I'm going to show you kind of all about components so we're going to hit F on our keyboard again we're going to make a frame I just made it a random size but we want to make sure that our images here can fit within them so let's see this is 452x 452 so we're going to make this 452 um the height doesn't matter quite yet so then I'm going to do another frame so a frame within a frame so this main frame is going to be called uh product card and then this Frame inside here is going to be our image so I'm going to do what I did before we want this to be a square so 452 and I'm going to give it an image fill and we're just going to choose from those images that we have okay that's great so then we have this part of the card but we also need um the name of the product so we'll go over here and grab that from our copy section and so here's what we have it's called intelligent glasses um so let's see how we want to lay this out this text here um let's do it in black and let's do it as our H2 and that looks good but I don't want it like all black I think I want this to sort of recede into the background a little bit so I am going to give it an opacity this whole text layer I'm going to give an opacity of 50% then I'm going to copy this out and we'll do sync 2xm so that's what it's like actually called so we want to do 100% And I think we want to make this a little bit bigger so instead of the 13 I'm going to do 18 okay and then I'm going to use the same style to do our price so now we want to make sure that this is like laid out exactly how we want it so first of all we don't we'll bring it over here for now we don't necessarily need this like background white so I'm going to get rid of it so instead of changing the color I'm just going to literally get rid of the fill so it's zero fill it's not an opacity fill it's just no fill then I'm going to turn on auto layout and that kind of hugged these together again so what I want to do is frame these together because I want these to sort of stretch the whole component um and have an automatic amount of space in between so I'm going to do command option G to group and instead of a fixed width I'm going to do fill the container and then I'm going to click on this whole product and we're going to wow what is happening yeah okay that's right believe it or not but we just need to change the settings okay so we don't need this much space in between in fact we probably need like maybe eight pixels 12 might be good okay so the reason this isn't working is because we need to turn on auto layout on this Frame level as well and then instead of having this Gap we're going to do auto and and by doing Auto it's going to do as much space as will separate the items so that they're pinned to each side when you have on fill container okay so those are things like those Auto layout are just things that take practice um but they really are helpful to learn so now we have this and I'm going to actually bring it over here because I'm going to make this into a component and the reason that you would make something into a component is if you want to use it throughout your project multiple times so buttons for example are great things to make components we only have one um real button on our web page so I didn't make that cart button a component but you absolutely could if you were creating a whole website cards are great things to be components you can get really granular with it and make tons of elements on your website a component but this is a really good example so the reason it's so helpful is because you can make changes on the main component level that trickle down to all of the instances of that component but you can also make changes on the instance level that don't necessarily you know it doesn't go both ways so it just creates a lot of flexibility and I'll show you exactly what I mean so to create a component from this you can either go up to this um kind of four Diamond icon here and hit create component or the shortcut is to do option command K on your keyboard so now this is our main component and you can tell something is a main component if this icon next to it is filled these these diamonds are filled let me show you what the instance of the component looks like so if I just select on this and do command C command V to paste it so that now I have two see how this over on the layers panel um has an empty diamond and this has like the component symbol the four filed diamonds that's how you can tell which is the main and which is the instance and on the canvas you can see here this is what the main looks like and the instance doesn't have a label so something I like to do is keep my components um either off to the side or on a separate page or even in an organized you know separate file um but we won't get into that but I I like to have it off to the side so I'm not accidentally putting that main component on the canvas because we only want instances on the canvas we want to only come back and touch this if we want to make a change that is going to affect all of the instances so for example I think I want for these to have rounded Corners these images so so that that is the case on all instances I'm going to make that change over here on the main component level so I'm going to click into this image frame and we're going to give it a 4 pixel radius and so let's see what that looks like over here so you can see it sort of adapted um to that change okay great so now let's turn back on our columns and we can position these so um it's actually pretty much in line with where I want it but I want to have 100 pixels of space in between these and then I want to duplicate this so another way that we can find a component that we created is by going into assets and all of our local components are going to be um listed here so I can just drag one of these out and there we go so we're going to just line those up I'm going to do one more that looks pretty good now what I want to do is change these names so that they're not exactly the same so this is where it's important to understand that by changing this on the instance level it's not going to affect any of the other components so I'm going to go in and change all that and I can also change the image fill so I'm going to go in here and just switch up this image and same with this so it's looking good but I feel like these are a little bit too close to each other um like this is just kind of um I don't know I don't really like that so what I'm going to do is actually frame these together so so option command G turn on auto layout and increase the spacing here so I think 32 looks pretty good and you probably noticed that this component here is cut off which is of course what we want but something that might be um helpful to know is that you can also turn off clip content so I'm turning it off on the whole um level here I'm also going to turn it off on this Frame so that way you can actually see all of these which is super helpful so um yeah you can play around with that too if if that's helpful but it's nice cuz it is also possible to turn it on on like really any frame so because I just framed those together now look I can actually um clip this content just by like decreasing the size of the frame so if I don't want it to go off the page at all all even like just the bounding box I could bring it in like that so that's something that might come up for you as well so now we want to have some buttons here so that you can toggle left and right um through these images so I'm just going to hit F create a frame you're probably so bored of me creating frames I'm going to make this white give it those rounded Corners so that it's nice and consistent and then I am going to grab this same icon here and make it black and I'm just going to tilt it and let's say we actually want to make this Arrow itself bigger if I go like this you can see that the bounding box increases but the arrow itself does not so to fix that we're going to go in to this Arrow so I'm kind of like double clicking into the frame to find the arrow and instead of Center we're going to change this to scale and that's going to actually make the arrow increase in size as I increase the size of the frame so I'm going to make this 32 by 32 and then just going to duplicate that out and there we go we've got our arrows and now let's just align them nicely to the sides we'll also make sure they're aligned with these components okay awesome now we're on to the last section which is the footer so I'm going to hit f for frame create us a nice frame for our footer give it a fill we're going to add that last image that we've got is looking pretty good and then we'll add our text once again just just lining it up as always with our columns okay now I want to have a um sort of like email optin here so I'm going to show you how to create I guess a form so I'm going to hit F and we're just going to create some sort of frame in here I'm going to give it a fill um and I'm going to show you actually how to create a glass effect for the background cuz I think that would be kind of cool so what we're going to do is lower the opacity so let's say actually like 20 like kind of a lot and then I'm going to go into effects hit the plus button change it from drop shadow to background blur then go in and you can increase this blur so let's see 16 looks pretty good see how that's nice and blurry we're going to give this that 4 pixel radius and then how to make it look really kind of glassy is to give it a stroke um that's white but it's actually a gradient so I'm going to switch this to gradient and then just like really subtly I'm going to spread out this gradient here okay that's pretty good and then to make it even more subtle I'm going to change it to 50% um and you could make it even let's see two pixels wide um yeah that looks kind of glassy I guess actually I kind of like the one pixel but okay cool and so this is just sort of the frame for our form now we need to create the actual form so what I'm going to do is give this give it a title header two is good for that and then I'm going to just create another frame we're going to give it a white background yeah I think that should be good again we're going to do four pixel Corner radius then we need a label um so to label these instead of 13 actually I'm going to make this yeah instead of 13 I'm going to detach that and make it 11 so that it's a little smaller and maybe even just medium it's always good to put placeholder text so we'll say your name here and we can put that in our paragraph font okay so that is how you create a field and then I'll frame these together so that we can duplicate it and make another one so then I'm going to create uh select this whole frame and turn on auto layout just so that we can kind of make the spacing consistent so let's do 20 pixels of space between these let's give it a good 40 pixels on each side and 40 pixels on the top and bottom I think that is looking really good now let's just make sure that we're aligning it to our columns so we'll align it to this column here yeah that should work and then the last thing we're going to do is add some Social Links so I'm just going to hit f for frame create a um box here I'm not going to give it a but I am going to give it a stroke only on the bottom so I'm going to just go into here and hit bottom only we're going to make this white I'm going to make it two pixels for now at least just so we can see it okay so this might look like a line but as you can see it's a frame so then I'm going to hit T and put some text in this Frame so Instagram wow that's huge not header one we want paragraph let's bring it off here so we can see what we're doing we'll call this link turn on auto layout and then we'll have let's see I think 12 pixels or 10 no actually zero pixels on the left and right and then I'm going to add in that Arrow component or that Arrow icon so I'm just grabbing it from here I'm going to select um inside this Frame we're going going to actually go in here and adjust it and then let's see what happens as I drag this out um I want to change this to Auto again so that there's an automatic amount of space in between these two then I want this to take up three columns so we'll align it to these three columns and this we could definitely make this a component as well since we're going to be using it on multiple times in our project so I'll just come over there we'll go into assets and we'll drag one right there and then I'm just duplicating this you can also once you've dragged out a copy you can then do command D to duplicate with the same amount of spacing you just did um that is a really handy trick oops I wanted this over here actually I feel like this is too big I'm going to make this that 78 instead yeah that's good this way we can like align these so we're going to do Instagram Twitter email and medium and then I feel like we need just a little sort of heading here for Social Links and then with this whole footer I think it'd be cool if it looked like it was sort of like coming up from the bottom so I'm actually going to take the whole frame and give it a corner radius but I'm going to do independent Corners here so that I can just manipulate the top and bottom so what if we did 20 and 20 there we go that looks really nice except we can see that behind here we actually have um some white coming through so to change that I'm just going to select on this whole frame and give it a background fill of this gray so this way when we come in you actually can't see that little Gap there and I think that this just makes it look a lot more finished so yeah this is the final web page I hope you enjoyed this crash course and if you want to go deeper and design a full website that is completely responsive and prototyped then don't forget to check out the course linked below and if you want to learn how to turn your figma designs into functioning custom websites then have a look at our programs around framer and webflow as well thanks for watching and we'll see you in the next one bye