 We're going to learn Figma as we go along so not to worry but the first thing we need to do is do an artboard. So if you just press A or you go to this icon in the top left hand corner called frame then here this is where we just it does exactly what it says on the tin so we choose a frame. I normally like working with desktop so you can click desktop when it lays it out pixel perfect for you. If you want to do a mobile version or tablet versions which we will do later on in the course then in the frame we can also get different different sizes but now we've got our frame. For this design I think we're going to do a dark theme layout so normally websites have like a white background but for dark themes they have a black background and I think because our company is called blackout it just maybe makes it a little bit cooler so what we want to do is click where it says desktop one and then this will give us a right hand panel here which is all our design options so we go down to fill and we just hit the little square then we can click and drag down to make it black. You could also click the numbers this is called a hex value so if you type f that makes it white and if you type zero that makes it black don't worry about these over time you will just learn how to use them. So what we're going to make first is called the header so it's the bit that sits at the top which has the logo it has it's going to have the search box which we need to create because it says it in the brief and it's going to have the different titles of the sections so we need to make a square so in the top corner here this is where our tools are within Figma we're going to hit the square tool and then we're just going to click on the canvas and we're going to drag a square out and when you're dragging as you get to the corners of the layout see the little red line that appears that means that it's hitting the lines so we're going to zoom in on my I'm using a Mac so I press command space and then I click to zoom in but you can also use the zoom tool in Figma which is a command minus or command plus on the keyboard to zoom in and out so if I hit the square I'm going to I'm going to do the sizing but I'm actually going to do by the numbers so I'm going to make this a little bit thinner so over here on the right this is my detailed layout this is where you can really get into the nitty gritty of your designs so W is width so we don't need to change that but we have h for height so I'm going to make it 50 pixels and that's going to make quite a narrow header maybe it's a little bit too small for this let's try 60 we can always make it a little bit bigger later but then I'm going to give it a color because at the moment there's a default gray I'm going to make it uh I'm going to make I'm going to make it not all the way back I'm going to give it um just a dark gray just so you can differentiate it on a page now we're going to zoom in and we're going to add the title for the company so I'm going to grab my text tool which is up here in the top then I'm going to click and drag where I want and I'm going to type the word blackout that is our company name now the company doesn't have a logo um you know in real world you probably would get a logo in here but for this one we're just going to we're going to we're going to just give it we're going to first of all we're going to give it a size we're going to pull it maybe about 20 pixels and then you can choose the font it's up to you what you want um we're going to choose something which looks looks kind of cool uh I like to I like Montserrat Montserrat's a font which you might have installed I'm going to make a Montserrat I'm going to make a Montserrat black which is a nice thick modern font it's a sans serif font so it reminds me of GQ magazine they had very similar uh fonts to Montserrat so I'm going to I'm going to click on my title I'm actually going to make it a little bit bigger than 20 I'm going to make 24 then I'm going to click on the text and then I'm going to I'm going to shift click on the on the on the bar that we just made that selected them both and now I'm going to show you how you can position them relatively together so once two things are selected up here these are your auto alignment features so if you click this one this will this will center them vertically and that's what we want we want the blackout to be right in the middle so now I'm going to I'm going to move blackout right to the edge with my keyboard and now if you press shift and then the right arrow one two three four you can do it proportionately and when it will move it across so every time you do an arrow it then does it by 10 pixels now that our title is in the right place we can actually preview our design so in the top right hand corner actually this little play icon if you just hit that it goes into presentation mode so it might take a couple of seconds to load um or what figma is doing is this is what it will actually look like in a browser and if you hover over to the top right and click share prototype you can um you can see this it says anyone with the link can view and you can just click copy link and then you can paste that in a browser or you can send it to your friends and it will just create a link where people can see the website you've made so you can view this website already we haven't done much but at least it shows you where we're going and it's a good starting point so now that we've got that in place I actually think the title is a little bit too small now we'll look at it like this uh so throughout this course I'm going to be doing these on the fly so you'll actually see me change my mind as we make them but it's actually quite good it shows you I'm not just creating something polished and and you are either um and it's okay to change your mind when you look at something you might think oh it looks a bit small um design is you know using your brain to to just keep constantly looking at what you've done and and see the you think it looks right a lot of it is look and a lot of it is um it's all proportion so the way I like to think about designs is you know is this space underneath this equal to the one to the side of it and to the one above it like a lot of great beauty like um Greek designs old buildings Georgian design buildings they're all mathematically you know even I like things that are even and I think that makes design look beautiful so whenever we go through this we're always going to try and make things even whenever possible I think that's kind of a key to beauty so in this top bar the first thing we're going to make is the search bar as well so we're going to grab another rectangle and in the top right this time we're going to draw out our rectangle so what we actually want to do with this rectangle is we're going to give a curved corners so this is the first time we've done this so we're going to get our rectangle we're going to position it vertically I oops I missed it so we're going to position it vertically again which is a which is this one here and then we're going to give a curved corners so in the top right you see we've got these six options so the bottom right one of the option is the corner radius so if you just click 20 on that it's going to make it quite curved so for this search bar we're going to try 30 we're going to try and make it really curved that's quite nice and then we're going to make the search box we're going to make it we're going to make it just a lighter gray than the other gray and we're going to move it in one two three thirty pixels the same as the other one we can preview again now ah this is this is something I've made an error I'm going to show you how to fix it so if you go to this preview mode you can see my search box is actually not in the design so but it is in the design of your so on the left panel this is our layers panel so this thumbs the little hash icon that's our viewer and then within there is the the blackout logo and the rectangle which is the header but you'll see rectangle two which I can double click and call search box it's actually not in the frame so I need to click and drag that and move it into the frame but I've put it underneath the rectangle so I need to click it above the rectangle that's my order so it goes in the order now so now if I go back to this you can see that it's actually in the frame so my search box is in here now but it looks a bit too big so I'm going to make the change the height of it to 14 and I'm going to constantly keep reposition it center it check it yeah it looks a bit better so now we need an icon so we're going to go into google and we're going to go into a website called icon finder and within icon finder this is a place we can get free icons we're going to click search then within search we're on the left hand side we're going to make sure it says free and then we're going to click no backlink so that means that we can use it in whatever project we want and we've gone so we haven't got to leave a backlink for the author but I mean you could click all licenses it depends sometimes I mean it's only fair that you leave a backlink to the person's website if it's an icon that you want to use but for this example we're just going to do no backlink so then we're going to choose this magnifying glass here it's looking nice we're going to click on it and then we're going to download so see here you can have png or svg I always go for svg so svg means it's a scalable vector graphic so what that means is whatever size we put it in it's always going to look great so I have this copy and paste that across and I can change the color to white so you can see how crisp this looks so it's not made up of pixels it's made up of vectors whereas if we would have got the png version if we would have zoomed in on it we would have seen little edges because it's made of pixels and not vectors vectors is a mathematical formula which means I can take this and make it absolutely huge and you see it still looks crisp it like redraws the image it's a new type of file for the web for icons in particular so I'm going to get my icon we're going to make the little search box small and we're going to put it on the right hand side in here we're going to make sure that it's centered and then we're going to check that out so we've got it we've got our search box there it's probably a bit too long so we're going to make the width 450 and then we're going to drag that across again we're free so there we go let's have a look yeah that's looking a bit better and then the final thing for this header we're going to make our sections which is our men's women's and children's so we're going to take text again we're going to create we're going to create something that says men's but this time we're going to make it we're going to keep it in Montserrat which is the font that I'm using for this we're going to make a 20 and we're going to make it we're going to make it regular and then we're going to put it we're going to align it so as I click you can see all these red lines that appears so this red one here that goes underneath blackout it's called the baseline and that's what we want to align it with so that means that it's perfectly in line with this so we're going to put that there we're going to move it over to about there then we're going to we're going to copy and paste it and then we're going to move it across one two three four I'm going to move it 50 pixels across I'm going to do I'm going to do one called women's or women's and then you can see I keep getting the box and I'm just resizing the box until there and then I'm going to get another one and then I'm going to call it children's and then I'm just going to move it across and then you can see it automatically knows when the spacing is correct and then it says it says 29 so there I've got three men's women's and children's I've got my title up there and then the last finger one because this is an e-commerce site we're going to have a basket as well so I'm going to go back to icon finder I'm going to type in oops I'm going to type in basket then I'm going to make sure it's got no look no back link and it's free and we're going to choose one that's suitable for the site so this one's kind of quite minimal and quite nice make sure I get the svg then I'm going to paste the basket and I'm going to change the color to white move it up to the bar if you hold shift and you then click the corner you can proportionally scale it down then I always align it with the red icons move it 20 pixels away have a preview there that looks fine then I'm going to the next thing when I'm going to I'm going to group this so grouping is really good it just allows you to section your website off railing so I'm going to select everything I click on dragon and then I'm going to I can right click oops right click and I can click group selection or I can press command g so that's got my group one here in the top and I can click the lower and expand there or close it down and then if I double click it I can call this header now that's my head of dumb but then there's one more thing which I actually want to do to the header so I'm going to click I'm going to select my group and then I'm going to click this button here called fix position when scrolling so if we had a really long page you actually want your head at the state all the time visible for the user so that's so they can always get back to search they can go to different sections so you might not be able to see it in the preview at the moment because the page isn't that big so I'm going to click on desktop and then I'm going to actually drag the bottom of the page quite long right and then I'm going to I'm just going to draw a rectangle in the page just for example so now what you'll see is in preview oops so this is preview so you can see at the top I've got my header and then we've got the rectangle but as I scroll down the page see the way the rectangle goes actually behind the header that's because the header is in fixed position so that means that all the content of the page will actually go behind the header and it will stay there for the website while the rest of the website goes along so now we can delete that and then we can get on with making some of the content for the website the first bit of content we're going to put on the page it's called the hero section so in the brief it mentioned that they have a showcase product every month which is probably the latest shoe which they bought a load of stock of and that's the most important thing to the business so we're going to showcase that really loud and proud at the top of the page so whenever you look through websites you always see one piece of content mainly larger than the others at the top and that's called the hero section so for this we're going to grab a rectangle then we're going to draw it on the page and we're going to just make a full width and then make the height around 400 we'll try that for now so that's just the rectangle so now we need a bit of content to go in there so if you go on if you go in your browser and go on over to a website called unsplash.com this is a brilliant website for getting royalty free images and all I've done is I've typed in Nike and there's loads of images here so we're just going to presume this is a Nike shoe that was selling and I just found this my favorite color is red so I found this cool red one at the top so all I did is click on me a copy image head on back to figma and now I'm going to show you a concept called masking so paste your image in then just resize it so it looks like it'll fit on the canvas and now we need to move it onto the canvas we're going to move it above the rectangle that we made so this is a concept called masking so we want basically this rectangle shape to cut out everything on the shoe other than the bit that's in the rectangle so we select both then we right click and then we click users mask so now it's not showing the rectangle but it's showing the space where the rectangle is and now we can get and we can resize our image and we can put the shoe in the picture where we want so now I'm just going to move on over to that side I basically want a space on this left hand side where I can put the title of the shoe at the bottom so I think that looks kind of cool so the next thing I'm going to do I'm going to give the title I'm going to give this a title so I'm going to get my text and I'm going to click it here and I'm going to call it I'm just going to call it like three which seems to be the make so I'm going to give that a size of let's try a hundred maybe that's a bit too big let's try 60 make it make it semi bold maybe maybe bold once it looks like light see I'm just trying these now bold that looks good so we've got our night three there and then normally underneath the headline which we can make this we can we can make this box a bit smaller by clicking on it we'll get another title and we'll just click it down there and then we'll just give it a subheader which is normally just a little bit of information about the shoe and that might just be like the fastest shoe so we call it that ever so this is nice I don't know latest and greatest invention I've just made up so I'm going to show you how to position that now so we want that maybe look bigger sorry maybe and maybe um 26 and then just how I reposition type is I take it right up to the baseline that's the bottom try and get it in the corner and then give it 20 pixels down which is shift and press this and press the arrow key down twice so to me that looks kind of a nice type lock up and then you can select both of them and hit command g and then you've got a group and then you can just call that type and just to keep things nice like I could call this mass group hero group and um you just want to make everything nice and neat in the left hand side it looks more professional but it means you can also you know go back and find things later so then we're going to introduce a button beneath that so how we make a button is we're going to get some we're going to get a square we're going to draw the square out then we're going to give the square rounded corners we're going to give it 20 maybe 30 for this maybe maybe even 50 so we're going to give it a pill shape and then we're going to position the pill shape 123 there and then we're going to put some text within the pill there's a few different ways we can learn how to do buttons what we're going to you we're going to learn the simple way now and then in later videos i'm going to show you how to make more in-depth component sets but this is how it started with buttons and it's probably the best way to learn first um if you're just making your first button because things can get a little bit complex with component sets so we're going to make we're going to leave the button as gray let's make this text 22 then you've got your text alignment tools here on the right so we'll center that text we'll select them both then we'll click center align middle align then we'll group them bottom and there we go we've got we can select them put them in and then we'll call the hero text then we can even select that group select that hero central liner then we can zoom out and now things are looking good so we've got our hero section at the top so the next couple of sections we want to introduce are the most popular sections so we're going to do this we're going to have them the men's one first and then we're going to have a lady section underneath and we're going to do this with four different products in each one so we're going to give our section the title i'm going to call it most popular i'm going to select the text and we're going to left align it i'm going to make that text around 30 we want to uh we want the text to be bigger than the subheader uh but not as big as the main headline and maybe we want to a little bit weightier too so when we click and drag around you see we've got this um this line where it aligns it so we want to give it a bit of a space one two three four five so we want to give it a bit of a gap so we've got our most popular section here let's call it most popular for men now we're going to build our first box so we're going to get our tool now probably the easiest way to do this is is to first we want to actually apply layout grid to the page so we know what size to make things so we select our page then we can go to this thing called layout grid we need to select the canvas desktop one and you click plus and then we're going to apply a grid to the page so the color of the grid we're going to make sure it's like a light color because we're using a dark theme and we're going to change from grid to columns and then we're going to make a four column page because we want four across and we want to give it a margin on each side so let's try maybe a margin of I want the margin basically to go to where the type goes so we'll give it like a 60 margin there we go so there's our four columns now this won't show up in the actual preview so if you go to preview you can see it's loading up but it's not loaded up the actual grid so now let's make our let's make our squares so I'm going to click the rectangle tool and then I'm going to draw out my first box and this is going to be my first product so I'm going to select the box and I'm going to give us a round of colors I'm going to make 20 and then I'm going to make the color of the box draw slightly off-gray so it just lifts above the canvas now in this box I'm going to have a picture of a shoe I'm going to have the the name of the shoe and I'm going to have a button that says find that more so we can do this quite quickly so let's go on over to google chrome and now we're going to find some images of my shoes to use so this is you you can use whatever images you want so for this example I'm going to choose this green one looks pretty cool so I'm going to copy the image but again before I'm going to use the the masking tool that we use so I'm going to draw a box now I want to I want to give it around the corners but I don't want the bottom half to be rounded so I'm going to show you how to do that now so if we just want the top two corners to be rounded because I'm only taking them half the box I want the bottom half the text then I go over here and I click this one and this this basically means you can do independent corners so I can give the top one 20 give the next one 20 but leave the other two square on so then I can click that I then want to basically paste I'm going to click out of it I'm going to want to paste my shoe I want to paste my shoe above that layer but actually still on the canvas so I'm just going to resize it I'm going to move it onto the canvas there so you see I didn't need to move it in the left hander it just automatically did it so I could actually drag that over as well which would have been fine but I'm going to select that select that one right click users mask then I'm going to reposition the shoe so there we go quite a cool shoe I'm going to add some text here I'm going to call uh um what's this what's this what's that say on the shoe we need to give it it's called us what's columns I'm just going to call it this I'm just going to call the make super I don't actually know what it says make a 20 see what that looks like I mean you can you you can use real shoes you can go on and use whatever you want for this so for this example I'm just going to call it a mic super v 2022 so I'm just making this up but you can be as realistic as you want you can take as much time on this as you want I'm just repositioning that um I'm going to make that a little bit bigger try try 26 take that box wide then underneath it now I'm going to show you um a design trick which we use when we're um when we don't know what copy to put and copy is just a design word for um for text so if you go on google and you type in this word loram ipson so I learned this from magazine design and then there's a website called loram ipson generator so loram ipson is just dummy text that you can uh generate as much as you want to place hold for things so normally I just click generate loram ipson and I just select a load of text uh paste it in where I need text then I change the size to um body maybe 14 is normally a good size for body copying so you can see it doesn't make sense the text doesn't make sense but that's fine when you're um when you're working on the actual layout uh the actual doesn't you know it can come later so as we zoom out there I'm just going to have I'm just going to copy and paste the text and then I'm going to click it and then I'm going to put I'm going to put lend I'm going to do that and I'm going to give it a little give it a bold so there's my button it's only a text link then I'm going to click and resize that there so if I zoom out now and preview that you can see I've got one of my boxes now what I want to do is I'm going to group all of this I'm going to click group selection and then I'm going to shift drag it across to duplicator and now I've got four products in my mend section so now you can go through and you can change each one give them whatever titles you want in this design I'm not going to waste your time by doing that I'm just going to go through and I'm just going to choose some images I'm going to go to the image file I'm going to paste it over it and I'm just going to resize the images but you can go through um if this is something you want to put in a portfolio you can go through and give it proper text you can find real night shoes these these product images are beautiful from like let's choose one more that one's quite cool so you can see if I have a black background the colors really pop so let's take a look what that looks like might take a few minutes to load in but there we go so we've got most popular for men that section here our top section with the red that really stands out and now we're going to select all of this we're going to right click and we're going to create we're going to catch a group I'm going to call it four men and now this is a trick it's called them we're basically going to section the website in different colors so I want to get a square and I'm basically going to draw a section here and I'm going to just give it just an off gray color because basically we when you have websites um you'll see some websites are actually striped so like a like a like a white and then a light gray and it just looks a bit better so I'll show you why I'm going to click this and it selects all the group I'm going to copy and I'm going to paste there I'm going to move it down I'm going to move it above the rectangle then I'm going to select it all group here and call it four women and then I'm just going to move this up slightly in the box move that and then we'll preview that now you can't actually so I'm looking at this now and I can't actually see the dividing color so I'm just going to go for it I'm going to make it a little bit brighter I'm just going to do that so there you can see how it actually like divides the sections with the eye in the middle it just makes it a little bit easier to um basically for users to view let's just let's just choose any ones for now and go through and do this it's quite nice we'll leave that pink one there and we'll change this one to white one then we'll go through and we'll choose that one that's a really nice shoe let's replace that one and then one more we'll just go for these ones here right so now we can preview this and we've got a nice looking website see it all scrolls underneath the head there and now the only last thing to do on this page is we need the section that is our 10% offer so the first thing we want to do is grab the rectangle tool again you can also just put R on the keyboard if you want a keyboard shortcut then we're going to click and drag and make another full section so we're just spotting into the sides and you know what we're gonna I'm going to try this in like a light column we're going to make it stand out so as we scroll down the page the offer really stands out and jumps out to you so we'll make it we'll make it quite big I'm going to leave just a little space on the bottom for the footer which is the bottom bit of the section which just really contains like any copyright information or um links to other places in the site but we can we can do that in a different video um so let's just grab our text tool and then we're just going to click and drag and we're just going to type something in so one two get 10% off your next order now we're going to center that we're going to make that bold we're even might even make that black no we'll try that bold looks too black then we're going to grab that text and center it now you can see I use these centering tools all the time because as I said before there's nothing more beautiful than um symmetry and that's what I always look for in all designs that everything is always symmetrical so make that even bigger and we'll try that 40 point size so that looks good now I like to just start by copying dragging the text down instead of getting my text tool and then I can just I can just make this one light take it down to a size 26 maybe and then I can say sign up for our newsletter to get exclusive offers maybe try that in a regular so there's our little so there's our newsletter prompt then underneath that we're going to add a box so I can snap that to these two grid lines this is why the grid is so useful because we use it quite a lot now let's make that about 40 high I'm going to fill that with a white color it looks a bit too thin for me so let's make that 50 now so let's just preview that so that is our box where we're going to enter our name so I'm going to space it correctly so put it under there one two three four five put some text and then I'm going to type and email address now left line text make that text around 16 points and then I'm going to select both vertically line it so that's our text box there and then underneath that I'm just going to put a little um a little star say in terms and conditions apply see our because the website will probably have a privacy policy so this will be the link to the privacy policy and I'll just make that as far as 20 then I can grab that give that some space in there one two three four five I'm going to now select everything and start grouping them and then re and then naming them we're going to select all this make all that a group then I'm going to center it within that box and then preview in this screen so that's looking quite good and then the last thing on most website it's just called the footer so the footer is just where they have the privacy policy so for this example I'm just going to grab some text I'm going to put it here I'm going to make my text white and then I'm just going to uh left align the text make it about 16 points and then I'm going to put um copyright 2022 blackouts limited uh lpd that's limited there we go copyright blackout limited and then normally you have a link to um to certain things in the footer like legal documentation and stuff so I'm just going to have another link to uh privacy policy and I'm just going to right align that text and I'm going to uh align it with that box there so then I'm going to go to my footer also links normally are a bit bolder than any other text so you know them so then I'm going to go to that so there's the page and that's your first prototype done in Figma pretty pretty easy now you can share that link you can uh by going to share prototype and if you ever if this ever gets annoying when it comes up you can press command backslash or and then disappears and then command backslash again and it will um it will come up and you just click share prototype copy the link and then you can share uh with whoever you want so if you enjoyed this tutorial check out my website for more tutorials like this and then share the link with me and let's see what what you've made I hope you've enjoyed it and I'll see you soon