Figma Crash Course 2025: Responsive Website Design – YouTube Dictation Transcript & Vocabulary

1.in this free crash course you will learn how to use figma to design a website turning a rough sketch into a beautiful design for both desktop and mobile devices no prior knowledge is required for this course as I'm recording it with beginners in mind but we are going to cover a lot of ground including working with text shapes images masking gradients and effects Auto layout components and prototyping you might not even know what some of these things mean don't worry we'll take it step by step figma is a fantastic choice design software because it's the industry standard for digital design you can get started with a free account you can use it on Mac or PC and it's optimized for collaborating with others let me be super honest about my goals for this course I want to get you to the point where you can enjoy designing inigma and creating any kind of digital graphics and perhaps even start using it in your job or charging for your services then you'll be so excited about the possibilities in web design ready to take it to the next level and go professional that you'll join me in flux academ for our comprehensive course FMA for web designers 2.0 so let's get started to follow along install the fonts Linked In the description of this video and then grab the figma starter file it's all explained down in the description when you click the link in the figma star file or of the figma start file it will open in your web browser and then it'll prompt you to sign in if you're not or sign up if you haven't and then once signed in the file will open in browser or move over to the desktop app if you select that option once you have the file file open the first thing you want to do is duplicate this file so you have your own version which you can edit so we're going to go over to the top left to the name of the file not right at the top where it's tabbed but just underneath the type's a bit larger you see where I'm hovering here and I'm going to click here the down arrow next to the name and we have the option here of duplicate click that and it will duplicate this file this is your own version to edit we're going to rename this so again I'm going to click but this time on the name itself and it will bit in blue and we can just rename this something like figma tutorial you can call this whatever you wish and everything in figma is saved in the cloud so it will automatically be saving all the time now if you look in the bottom left this isn't actually part of figma this is my keystrokes that I'm including for you so you can see exactly what I'm doing on the keyboard so you can see the last few characters that are typed there we've got the end of the word tutorial and then the carriage return underneath there are these transport buttons so if I hold shift that will glow control option command now obviously these are on the Mac if you're using a PC absolutely just still follow along often the shortcuts are suggested in figma for example at the toolbar at the bottom if I hover over this rectangle here it tells me rectangle and the shortcut is R afterwards which is the same but if it's different on PC for example if we go to the last icon here which is action it tells you the shortcut is command K on the Mac and it will tell you what it is on the PC my mouse presses will also be shown underneath the word layers here on the far left if I just click and hold my left B Mouse button you can see that Circle there that has been created which is for a mouse press that should help you follow along in terms of the rest of the interface it can be a bit overwhelming when you open a new piece of software but don't worry about it just follow me follow along and I'll show you around pick it up as we go so you're not just listening to minutes of me explaining everything let's get straight into it we've got some assets here to start with we have a photograph here of this portable speaker and then we have various other items here on the right now we might want to see these a little bit closer so we need to zoom in there's a few ways we can do that one that's really useful is if you hold down the character Zed and that will show in the bottom left and not pressing Zed there six times that's just how it displays it when I hold it I've still got Zed press you see I've now got this icon if you just look right below the speaker you see it's like a magnifying glass icon and what I can do is click and hold my left Mouse button down which I'm just going to do on the top left of this sketch here and then drag out and whichever area I drag to which is highlighted in blue and then let go of my mouse button it will zoom in at that level and this now is our wireframe this is what we are going to be designing this is a sketch of what we're going to work towards and using wireframes is a common step in web design sometimes they can be pencil sketches like this sometimes they're then transferred and and digitized or created from a UI kit we tend to start with some sort of sketch or structure that we know that we're working towards and we can see now that this zoom level when I've zoomed in is 93% it says on the top right I can also click on the down arrow here and choose for example to zoom to 100% And it tells me the shortcut for that which is command zero on the Mac so I can click on that it just zooms me in a little bit and I can also just zoom in and out by pressing command minus to zoom out or command plus and zoom in like this fantastic so we have a wireframe we have some text here let's just zoom into that I'm holding down Zed and my left Mouse Button as I click and drag and it tells us what we're going to have here in the top navigation we're going to have um some icons with a logo in the middle some more icons and then underneath we have this copy here which means the text of our website let's get started straight away so we're at 100% here I'm just actually going to zoom out a couple of times and your zoom level will look slightly different depending on your screen size and and resolution I'm going to move over and make a little bit space here at the side and I am going to create a frame and frames are containers uh within which our design lives you can think of it a bit like a picture frame it's a thing that you know Clips sets its bounds this whole thing we have here this whole dark gray it is in this start file which you can actually change by the way which is page here you can actually change this to be any color you want I don't like that so I'm going to press commands and undo it uh you can drag things around on this canvas but I'm going to create a frame to set the bounds of our website so to do that we have the frame tool at the bottom and this is a toolbar here of commonly used tools so you can click on this you'll also use the shortcut F and then we have all these options so it actually gives us some preset options for sizes of common phones common computers let's just use the default desktop one here which is for 1440 x 1024 click on that and as long as we've got a 1440 wide frame that's absolutely fine so this is desktop one we can rename this Frame here on the canvas we can double click on the name of it and then we can just maybe for example remove this one area now we want to bring this image into our frame so what I'm going to do is actually make a copy of this image so I'm going to click on the the image here on the canvas you can see now our layers panels have actually been ex expanded and this includes everything that's you know within our file and this image here which has the actual the name here of this layer and there's a little icon to let us know it's an image on the left and if we have over it it tells us it's an image we can make a copy of this now there's a few ways we could do it the one I'm going to show you first of all is if you hold down option on a Mac or alt on a PC and then click on the image holding down your left Mouse button and then drag the thing out to the side and this is common in many many software programs and then just let go with your left Mouse button we now have a copy if I just zoom out a little bit you can see there's two versions of this now the width of our desktop is 1440 so I'm going to copy that by just clicking into I've selected the frame then I clicked on it in the width and I'm just going to do command C to copy you see that popped up in the bottom on the keystrokes and then I'm going to click on this new image that I've generated and I'm going to go into layout now make sure this icon is uh selected to lock the aspect ratio so if that's unlocked and they're not connected here we can click on that to lock them okay then I'm going to go into width and I'm going to go command V paste and then press Tab and it has now scaled my image down to be this width fantastic now to bring it into my desktop frame I just click on it hold the left Mouse button down and drag it in there and it is now in this Frame now just let it go kind of anywhere for now let's zoom into this Frame now if we want to do that we can click on the desktop frame here on the caneras and then use the shortcut shift two and that will Zoom to selection whatever we had selected so in this case is our desktop frame we have our image now we can select it on the canvas we can also select it in the layers panel so if I click on its name in the layers panel here I now have this image selected and I want to make sure this is aligned properly maybe to the top and the left so we have these position icons here on our right hand panel if you hover over them it tells you a line left a line horizontal Center a line right a line top Etc so we can click on a line left and we might want to remember that shortcut that's there it's option A on the Mac and now that image is aligned perfectly to the left you can also drag the image and figma will give you uh a little clue to when it's aligned so if I click on the image on the canvas holding my mouse button down as you can see indicated by the Press now if I start to try and drag this up it will actually move off the edge a little bit I don't want that so what I'm going to do when it's in position I'm going to hold down the shift key and then when I push up it won't go off to the left even you can see my mouse button is moving a little bit left and right it will keep it going up now when I reach the top might be difficult to see on my screen but you should see on yours A Thin Red Line appears along the top to let me know that is align perfect perfectly and I can let go phally could speak perfectly and that's now a line to the top of the frame and we can check that by if we go over to our position you can see that the exposition is zero that's horizontal and the Y position vertical is zero so that's right at the Top If for example I type in a number here like 99 and then press tab it's going to move that image down by 99 pixels so I could type in zero again and it will get me back up to the top fantastic let's get this copy into here there's a couple of fonts that you should have installed the instructions for this were uh you know in the description of this video and if you haven't now would be the time to do it and you might need to restart figma but these are Google fonts so you'll find them free and they might already be on there so they instrument serif and Jo just how do you pronounce that should we goj and so install those two fonts we're going they're the ones we're going to be using now we have our actual copy here let's zoom into this area here where it says hero copy this is what we need to bring into our site now there's a few ways that we can do it what I'm going to do right now is just copy and paste so I've just double clicked on this line and it selected all that it's the same as like any word processing software so I won't labor this you can also you know click and just drag along you know how to copy and paste text right command C we'll copy that I'm going to zoom out a little bit and if I just deselect that text box just by clicking anywhere on the canvas and press command V it will actually paste me in a new text box here that I can just click and drag around you can see that has been created here on the layers panel this text box here now you might be struggling to you know see how all these things are organized you know our original uh assets so we can actually tidy those up there a few ways we could do it one way is we can make a section if you go down to the frame icon on the toolbar and then click the down arrow next to it for region tools we can go and select section and the shortcut is shift s and then if we just click somewhere to the top left of our original assets and then drag around and then let go it's created a section here around all of them and then we can rename this we can double click on its name on the canvas or even on the layers panel here and then we can call this something like provided assets which by the way is actually the name of our page but we're just keeping everything on the same page for now don't worry about that and then we can actually collapse this layer by clicking that down arrow on the left and now if we look in our layers panel it's a bit easier to see what's going on because those provided assets have all been collapsed into that slice and then we have our desktop frame with the image in it and then this text here so let's zoom in around the area we're working in of our design I'm going to click on this text and I'm going to click it and drag it and bring it into my frame like this and I'm going to change the type to the font just so under typography on the right panel we have Intel which is the name of the font we're currently using into regular the font we click on that name inter and then we can type in just Jo click on that and then now we have a font now your initial setting should be the same based on enter so we'll leave it as this for now and then we will play with that once we have all the text in there so let's get the rest of the text so I'm going to go back over to my slice how do I get to my provided assets well I can click on it remembering the layers panel and do shift two to zoom to selection I want to zoom into this copy I can hold down Zed or hold down Z if you're in the United States and then click and drag around this copy and we've got this other copy here that says not smart and just better so I'm going to select that command C then I want to go back to my desktop frame so I'm going to click on that and then shift two I'm going to deselect by clicking on the canvas once then command V to paste and it's pasted this text in here I'm going to drag that up to the top now I actually want uh to separate this out based on our sketch do you remember we can go back to Wi frame sketch I'm clicking on it here in the layers panel of provided assets and then to press shift two and it's got not smarter above the circle which I guess is the speaker and then just better underneath so let's go back to that text here on the desktop I'm clicking on that layer there on the left layers panel shift two and what I want to do is duplicate this so I can do this the same way we did before hold down option click and drag anywhere and I've got another version so in the first one I'm just going to delete this text and the second one I'm just going to delete everything else so they are now separated fantastic the last bit of text we have if we go back over to our copy I'm going to click on it it starts with the words top nav there and it's a text frame in provider assets shift 2 is for the button call to action which is discover the sound so I'm just going to copy that I'm going to go back to my desktop shift 2 command V and I've got the text now for the button so now we want to start to lay this thing out so command minus to zoom out to 50% or whatever's comfortable for you I'm going to click on the desktop frame and I want to make this bigger because I'm looking at my wireframe here if you maybe have both in view let's actually drag this desktop frame by clicking on the name of it and holding down the left Mouse button and dragging it so it's a similar height to the wireframe so we can look at these next to one another then what I'm going to do whilst hovering over the bottom horizontal edge of this desktop frame I get this up and down cursor I'm going to hold down command and then my left Mouse button and click and drag down so that means I will drag with the top parl being fixed and I'm extending it effectively at the bottom so I'm going to do this right down to say the bottom of this image and it and it wants the snap there I'm feeling that snap then I'm going to let go it ends up being a height of 1920 fantastic so now I can roughly lay this out so all I need to do is just like using you know PowerPoint anything like that you've used before I can just click on this text box and hold down my left Mouse button and then drag it around so I'm just it's near the bottom so I'm just going to drag it down to the bottom now if I actually hover it will actually want to line it up to the other text boxes you see these red lines or to the whole canvas but if we're not sure if that really is the center or if it's one of the other boxes that it's lining me up to like here all I can do remember I've got my position control so the icon in the top right or the shortcut line horizontal centers and that will bring it dead cental then I've got the line of text above the buttons that must be this guy so I'll just drag this somewhere very good and then this time I'll press option H to bring it to the center I've got my just better that goes underneath this speaker option H and then I have got not smarter that's going above the speaker here so I'm going to bring that in there fantastic I want to change these two fonts so not smarter and just better I want to select both of them so I can whilst one is selected hold down command and click on the other one and it will just go to this other one if you want to select two on the canvas you have to hold shift whilst clicking on the other item but in the layers panel it works differently you hold select one of them then command click and it will select one other if you hold down shift it will do everything in between now at the moment these are are next to each other so if I just drag not smarter up to the top to I'm holding down my left bounce button and dragging up in the layers panel not smart as selected if I hold down shift and click just better it's selected disc discover the sound as well which I don't want so I've got to click on just better and then command click on the layers panel there are different ways you can select multiple things so with them both selected I'm going to go over to topography again these are still inter so I'm going to click on that and I'm going to change this to instrument serif fantastic that's very very small so I'm just going to click on this down arrow and maybe change them to the largest size which is here 128 for now and notice that this discover the sound is not using the correct font so I'm going to click on that on the canvas I'm going to go to topography click on the font name then type in J and we have that in there fantastic now how big do I want want these fonts to be well I shouldn't judge this at the zoom level that I'm currently at this is 50% we need to be working at 100% to judge sizes so I'm going to use the shortcut which is command zero and look now I'm at 100% so I'm just going to now drag around now I may have done this already I'm not sure if I actually pointed it out if I hold down space bar see now I get the hand symbol as my cursor this means means that I can click and drag and this is a move tool so I'm not actually moving around items on the C if I just click and drag here when I've got this pick tool selected that doesn't work or the the standard move tool I have to change to the hand tool here so I can click H and that will actually mean that it's permanently got the hand tool so I don't have to hold down space bar but the usual way of doing it is that we have the move to Reddit and it's quicker to just hold down space far which you can see indicated by my key structs in the bottom left and click and drag around till it's in the place where you want it to be okay so we're still at 100% here now these font sizes first of all I'm thinking this image might be a bit low down but we're going to leave that for now I'm just going to drag this in so I can see everything going back to my sketch maybe just better looks well if it's a bit smaller and the way you read the line so I want this to be bigger and this to be smaller so if I scale this up and I can do this by pressing K and that brings me to my scale tool which was actually hidden here as the third move tool and now you can see in the panel it's changed these options and you can select standard multiples for scales like 2x um 10x but to 1x you can type numbers in here press tab there you can scale it you know from the center or from the top right or whatever I'm just going to bring this into position let's click to align it to the horizontal Center and just kind of do this by ey but I want it to emanate from the center so I'm going to hold down the option key or Al on the PC so I can see vaguely the kind of width I want which is probably similar or a little bit bigger than the actual size of this rounded speaker when that's vaguely right I close down the scale tool we're at 180 we might want to just go up to like 200 or something like that let's try that then I'm going to align it to the center I need to select this again sorry option H line to the center and that looks pretty pretty good to me you can zoom out a little bit and see what it feels like in the whole composition you can zoom back back in to 100% and see how that's going to feel it's quite a large of headline I'm just going to click and drag this up a little bit just throw it vaguely in there and we'll sort the position later so if that's at 200 I maybe want to scale this so it's half that so I'm going to select this bottom one just better by clicking on it once and just change this to 100 for the point size there fantastic so you should have in instrument sa regular 200 and instrument sa regular 100 Let's Line it to the center option h right I need to deselect because it was in that um little box here option select my text again nothing selected in the right panel so now I can press option H and it will align it to the center and just kind of drag this so it feels like it's in the right place underneath I'm just holding shift while I drag up and down somewhere around here looks good and we can finesse that later fantastic in our next section of text I think this tie maybe feels a little bit big so I'm maybe going to just choose my next option down which is 24 I'm going to because we've got this sort of horizontal centered layout I'm going to actually change the way my text box aligns this is align to the left I'm going to click align Center on that that won't align the whole thing that's just the text within it and then I'm going to press option H but that just means if this text expands now so if I start typing something then it's expanding from the center but we don't want to do that so that's a 24 regular I think let's make our button 24 for now as well and we can play with the button um later on just align that back to the center with the shortcut fantastic so with our text we have a few um other options that we can do we can change the color of the text so if I click on the text this again I won't labor it's the same as like any word processing software but where it appears here we have topography we have all the options then you can see it says fill and this is the color here you can see we have a white square that's called a Swatch that displays the color and then all these FS next to it that's called a hex code and this represents red green and blue with a value two letters for each and that's what use on the web to render colors in a browser so if I click on this Swatch I can now select you know any of these uh colors here just by clicking and dragging on this spectrum here I can move the Hue along here on the bottom and and select you know sort of different colors and this is with a hue saturation brightness controls I can change this so it reads RGB or or whatever I want it to be and next to it we also have this eyedropper tool you can click on that and now if I move over to my canvas you see wherever I move it says click to sample so I could actually sample a color from in here and I'm thinking one of these maybe like really dark greens would be um really nice sort of color to sample so I'm just going to click on this one and I've got this sort of off black kind of dog or it's more of an orangey color actually from this point um that's selected more than the olive of the actual speaker so let's go with that for now so that's another way we can select Colors by actually sampling them on the canvas fantastic so we want this text to go I think behind this speaker that's going to look a lot more interesting and there's a few ways we could do that but we're going to do it by using masks so I can introduce empty so I want to mask this image here the the part of the speaker that's going to overlap with this text now this looks pretty circular to me which is good because it allows us to demonstrate Mass using geometric shapes now let me show you how they work first of all what I'm going to do is actually um just demonstrate this firstly so if we go over here to the side and we grab this image I'm going to click on it in the layers panel and I'm just going to make a copy by holding down option and clicking and dragging out of our frame so we have this just to work with here then we're going to go down to where it says rectangle in our toolbar but going to click on the down row next to it for shape tools and you can select star if you want to follow along or you can just watch this bit because it's not part of our final design and if we just click and drag on our canvas you can see we get a star now now with any of the shapes if you hold now shift it will make it a regular shape so for example if you're dragging out a rectangle holding down shift will make sure that it remains Square now if I let go of my left Mouse button I have a star now to make this a mask what I'm going to do is I'm going to move this to the back by pressing the key left square bracket and you will notice on the layers panel star one is right at the top at the moment I'm actually going to collapse the layers to make it's a bit more obvious which you can do by pressing option L sorry not command L that's for the file link option now so now we can see the star there then if I press left square bracket you can see in the layers panel it's jumped to the bottom so what layers are it's just like something physical if you've never used the design software before you have you know one thing you know say you got a blue piece of paper and you layer you know another piece of paper you know on top of it just putting things in front and and whatever's you know on top is the thing that's visible so because this star is fully hidden by this image we can't see it if we click and drag um Sor this star to the side now you can see that just the parts you know that are not covered by the image you know are now visible so that's how it works let's drag it back underneath I'm going to select both of them I'm going to do that by just clicking and dragging out and I can check in my layers panel that this image and this star are the things that selected then I'm going to use the shortcut to create a mask you can do it from the top menu or you use a shortcut which on the Mac is control command M and it's created here we can see a mask group and we have the image and then the Whatever item at the back is the item that creates the mask or Star if I click on that star so it's selected here in the layers panel I can still move this mask around and wherever it is so U positioned then it will mask whatever is above it in the mask group even more than one item the cool thing with this is with this being a geometric shape we can still edit it so I can go over to my star here I can click in this field for the count and then press up arrow on my keyboard and change it to a six-pointed star a seven-pointed star Etc go up to 20 I can go here into this angle of the ratio and actually change this now I'm holding shift while I press down so I can do an increments of 10 and I can do it the other way push up and you can create this kind of thing hold shift and push up now this doesn't look very appropriate for our sort of design uh but we can do this we can even scale the thing so Mass are really really powerful and that's how they work so let me just delete that I've just selected it and then press backspace we're going to go back over here and let's try and achieve this zooming to 100% just with a circle so we can demonstrate this the other way we'll be do it to just remove the background from the image in a photo editing software with a plugin but let's demonstrate Mass so we're going to click o which is the short cut for Circle you can see this ellipse rather tool is selected in the toolbar and then I'm just going to click anywhere on the canvas and drag out an ellipse which is vaguely the size I want but I want to hold shift so it's a perfect circle and I started pretty close to that left but if you didn't that's okay just estimate it then with this selected now I'm going to press the number five on my keyboard and if you look in the appearance panel here on the far right where it says 100% that's the opacity when I press number five that Chang ches to 50% any of the keys from 1 to 9 will be a shortcut to make that number followed by 0% so if I press 8 it will be 80% back to five 50% cool shortcut so now I just want to make sure this is lined up so I'm just going to do this by I clicking and drag this up man this is pretty accurate to begin with I'm just going to hold down Z and zoom in I mean can it be maybe one pixel bigger I'm going to in my layout panel lock the aspect ratio I'm going to push it up our one so when I'm selecting the height field and I'm just going to manually sort of start pushing this around I'm now selected on the canvas I'm using the arrow keys to just push it one pixel at a time for our purposes this is probably fine but you can argue it could maybe go another one two this it's starting getting too big you can see the white coming off the side you'll see this better on your version as you just uh kind of play with it it's somewhere around here now I've got this a 690 which will probably be right for you as well I maybe going to change this position by like half a pixel so I'm going to go with the X's 3 66.5 and that looks that looks pretty close certainly for our purposes fantastic now if I mask this it's going to lose what's behind it so what I need to do first of all in my desktop frame is I'm going to click on this original image and then press command D to duplicate this image then my duplicated one I I'm going to click and drag that right up to the top so that's now covering everything click on your ellipse again I'm going to change in the appearance panel the opacity back to 100% by tapping it into that field and pressing tab then my ellipse is selected I'm going to hold down shift and click on the image on the top as well so so they're both selected and then hold down contrl command and M boom and we now have a mask of this image on on the top we can show and hide this if you go to the mask group or any layer you see we get an i and wherever there's an ie in figma you can click on this and it will change to a closed ey and that means it's hidden show hide let's 100% so we can really see what we're doing so we've now got that masked over the top of our text which is cool so now we want to adjust this text where we want it to be so I'm going to click on the text I'm going to hold down shift CU it's already aligned to the center and I'm going to click and drag this up and just kind of place it where I want it to be so it's just a little bit sort of underneath like this so it looks like it's overlapping we're getting the sense of depth but it's still very legible okay this is generally okay we probably want to mess with the spacing CU it feels a bit odd at the moment but let's do that um later on we're making good progress I can tell that you're serious about learning figma but I want to be sure that you'll have the confidence to tackle any web design project not just copy me that's why we created our comprehensive figma for web designers program so just a reminder to check that out when you're finished with this tutorial because flux Academy students become part of our community get free updates for life and personal mentoring it's a bit like University but without the fancy buildings so we've got some typing to there this is looking more similar to our actual sketch but we don't have this top navigation area so let's have a look at that now and also learn some more new powerful features in figma that help us to create layouts so we have some provided assets now I'm just using my scroll wheel on the mouse here to scroll up now we have the logo so I can click on this and when selected it we can see it's a vector because we have the vector icon in our layers panel remember if you ever hover over one of these icons it'll tell you what it is it's a vector so now that's selected I'm going to just press command C to copy it then I'm going to go to my desktop frame by clicking on it in the layers panel shift two to zoom to selection then command V to paste and it's pasted it into my desktop fantastic so I want this to be at the top in the center so but I can just use my position controls here I'm using them so you to help we go a bit slower rather than trying to use a short cuz too much so we align horizontal Center it already is then we want to align it to the top so we click on this one the shortcut on the Mac is option W and that's aligned right at the top now now this looks pretty big at the moment this is 200 now if we press K to do our scale tool we'll maybe just try this at like 025x and that's a height of 50 and that feels if I go back to 100% to look at the size of it that feels good to me so make sure your logo has got a height of 50 fantastic now I need some icons here that are drawn out now it's telling me that what we need here if I zoom into the top Now options is a hamburger menu a search an account locations basket how are we going to do that well we could draw them all with shapes with the pen tool but we're not going to get into that right now and something really useful that you should know about inigma is plugins these are thirdparty Creations that are not part of figma's native features but the community have created things to extend it and if there's ever ever anything you can't do in figma usually a plugin for it now we can find that via the actions menu which is here and we're going to look for a particular plugin so we can all use the same icons called feather icons so I'm going to click actions and then type feather and it will come up for you here matching icons you can always go over to plugins and widgets to try and find it see it's one I've used before but it's right there feather icon so you click on that and then in the bottom right you want to click run then this plug-in will open now what we can do is we can actually search in here for anything that we want oh we actually want wanted a search icon well there's one right there so we can just click on that and you can see that it's added that to our canvas straight away are some of the others visible that we need we want a hamburger menu well there's one of those here these three lines is what we call that on the right we want an account fantastic we got a person user we want locations I can't see that so I'm going to type location hit enter it's going to search H maybe I wanted more like of a a marker of a like a a geom marker hm Place map here we go what's it call in this map pin okay should have searched for pin so it's go and then I want a basket so let's search for basket you have to spell it right though nothing found okay bag ah beautiful we'll use this shopping B and now I can close this plugin here some plugins are free some are paid with the oneoff or sometimes a monthly license but they can be really useful so we have all these icons here that are all like on top of each other but that's okay what I'm going to do is just collapse all of of these I'm going to use option L again the shortcut just to collapse my layers panel and I'm going to select all of these icons here and then I'm just going to cut them so I can paste them where I want them to be so command X to cut click on the desktop frame shift two to go there command V to paste all my icons in here now you can lay things out as we've shown by dragging things around you can also lay things out by uh using these position controls to for example align everything to the left now that's just aligning them to the left within the ones that are selected I'd have to select the desktop frame um to or or one of them to then click on it and align it to the left like that but I don't want to do that I want to show you another technique which is auto layout which is a really powerful thing about figma that makes it more suitable for web design and it's separates it from some basic design software that you may have used before so we need to go back to our notes so let's go back to provided assets and just click on the text here and shift two on the left we have the hamburger menu in the search and then the other three are on the right so let's remember that or you can do this next to it if you really struggle to remember two things hamburger menu and search click back onto desktop shift two so my menu icon menu and my icon search I want to click and select both of them holding the Commando or shift while selecting both of them and they want to be uh together so I'm going to put those not into a group which is what this is at the moment you see that's a group we tend to use that's this um dotted Square we tend to use groups for things like illustrations I'm going to put them into a frame so we created a frame before but we can also do a frame and um make a frame from a selection and we can use the short code option command G and that will make a frame you see from this selection so these can be our sort of left icons left menu icons maybe I'm going to copy this text I've just pressed command a to select it all command C to copy so they're together now and then my other three I'm going to select these three icons here in the layers panel and then press uh option command and G and I'm going to double click on the name frame and I'm going to paste in the but I'm going to change left obviously to right menu icons Fantastics so now this whole right menu FR icons I could actually align this for example using my shortcut to the right and then to the top so there in the correct sort of place in my left menu icons I could do the same thing with there and put them to the left and the top but obviously we don't want them to look um quite like this let's click on desktop and zoom to selection shift two and then command zero Zoom to 100% and just look at this top area here so we can make um this a lot easier by using Auto layout and this will arrange things automatically based on the numbers we setout virtues dragging things around so if I click for example on the right menu icons here and note what this right panel looks like at the moment for this layout everything's on top of each other I'm going to change this to an auto layout frame now there's a few ways that you can do this you can go over to your layout panel and you can click on this icon here that says use Auto layout and it tells you the shortcut is shift a so let's click on that so this is now laying out these uh right menu icons automatically now the reason it's not um spacing them out or anything like that is because if you go over to the panel you can see that we have this group icon but the next two have these Corner markings around them and if we have if we click on one of them this indicates that it is ignoring Auto layout so you can do that with this particular item within your auto frame so what we need to do with that one selected is go over to the top right where position and the ignore Auto layout icon which is currently selected in blue we need to click on that to deselect it and you can see now this one has moved to the side then let's click on the shopping bag one and then again click on auto layout and that is again moved to the side so if we click on the right menu icons Auto layout frame in the layers panel and then look at our settings it now tells us it's Auto layout the width is is set to hug the contents which means that it will wrap around um the the the contents and hug them at the minimum size that it that it can uh it can it can possibly be okay the height is also set to hog so basically that means it's determined by what's inside then the direction is set to horizontal so if we click on vertical it will actually lay them out vertically but we want this to be horizontal Al and the next one is wrap which is horizontal but then wraps onto the next line depending on the width of the Box the next setting here is horizontal gap between objects so if we increase this we can push the up Arrow we can start to make this uh wider and wider like this okay I'm going to leave it at 20 for a moment then we have the padding around all of them I'm just going to click and drag to show you what that looks like you see the Blue Square to back to zero and the vertical padding Works similar I'm going to show you this more later when we create a button okay so to get these arranged exactly how we want first of all I don't like these being black now I can click on any individual icon here and change its color but when I had right menu icon selected we actually have this helpful thing in figma selection color so everything within what's selected it will tell me all the different colors so for example if I click on desktop now we have black we have white and we also have that kind of brown that we selected for the text so it tells me all the different colors there so if I go back and click on right menu icons again in my layers panel the only color we have here is black so if I click on this Swatch and now I can drag this color selector here up to the top left for y I can also for the on this page buttons there was a white there so we could have clicked on that right there to select the color that we're already using so now I've got white icons which I prefer these icons are too big so I'm going to select um one of them this icon user um and I think really I want to follow like my um 8 pixel grid system which is a design detail but I'm going to want this to be in some sort of multiple of eight and smaller so I may going to select all of them actually and change the height of this to 24 and these have scaled down but if you look the stroke is still too thick so you can't use this option command Zed you have to make sure you're using the scale tool so press K and then now for the height I'm going to change this to 24 press Tab and now you see the broke is proportional so if I go back here um although it's still mixed these look like they were looking uh beforeand which is great okay so go back to my right menu icons I've got a height of 24 so I'm going to change this Gap here between the objects to also be 24 and that's automatically spacing these out if we go over to our left menu icons and press shift a to convert it to an auto layout frame you can see here that um what it's done is it's taken these existing settings so it's saying the gap between them is automatically created which means they're pushed out to the left and right I'll show that again on the next time we use this but the width is set as fixed as um 740 so if we change that to hug now it's changed the Gap to be 658 and we can actually click here by hovering over this pink line in the middle and drag this to be larger or smaller or we can type in here 24 so that's the same now I all we haven't yet changed these icons so let's click and select both of them um but first of all we' left my new icons I want to align these horizontally in the center so I'm actually going to click uh to align Center it can actually be left or right as well because we're just hugging the WID but let's just make it Center Center I'm going to select both of them I'm going to press K I'm going to change the height to 24 then I'm going to close the scale tool by clicking on this x I'm going to click on the stroke I'm going to change that to White fantastic and now we have you know similar sort of icons great let's check these are all in the correct order so we go back over to our top nav um from our provided assets click shift two hamburger menu then search account locations basket go back to desktop we don't have that so with auto layout all I can do here is I can click menu and let me just uh Zoom to 100% so it's a bit more visible for you I click menu on the layers patter I'm just going to drag that to the top and then now that will appear before it and on the other one that's correct isn't it user account location search bag sorry account locations basket yeah beautiful back to desktop shift two command Z Z okay great so we don't like the fact that these are touching the edge that wouldn't look good in the browser window would it we need a little bit of space around it now you can just click on this Frame and just sort of drag it you know down to where you think you know there's a little bit of space around it but obviously we want this to be a bit more accurate so we need some guides in there so with our desktop frame selected we're going to go to the bottom right and there's this option layout Grid in the panel I'm going to click on plus and it's giving us here a grid of eight pixels then you click on the layout grid settings icon on the left and now we can change this so if we want a grid with pixels we can change this something larger like 120 hard to see red here isn't it so we can change this color to say green we can change the opacity of this I'm holding that shift while pushing up so it's nice and clear so we've now got 120 pixel grid more commonly with responsive web design and editor style layouts we want to use a column grid so this has created a grid for us with five columns we're just going to use two for these purposes okay this is the color of our grid and the opacity in this is now way too much I'm going to hold out shift while pressing the down arrow and bring it down to like 30 the type of grid so this at the moment is set to stretch which means it's automatically creating the width of them just based on the size of the frame and the gutter which is the space in between so again if I hold out shift while pressing up you can see the gutter change the space in between okay I'm going to set that to 24 the margin is the space on the left and right of the frame I'm going to set that to 24 as well and that's what we're going to use you could also Ed you know a center columns in that instance you have to type in the width that you want the columns to be exactly but we tend to use stretch because it's calculated automatically and it lends itself more to responsive designs so for now just make sure your settings are the same as mine count two the color and the opacity doesn't matter as long as you can see it the type is stretch that means the width is set automatically the margin 24 and the gutter is 24 fantastic so now our left menu icons we can actually line these up perfectly to this line and we get this little uh red mark here to see that it is is aligned fantastic and then with our right menu icons we can just drag these along so that they line up at the edge we also could have if we just command they don't do that when it's on the right I can select the X and I can type in minus 24 cuz figma can do math and it will move it over by that far and then we might want to change say well the Gap at the top maybe that should be the same so let's type in 24 for y and we'll go back to our left menu icon that was just dragged around so that's currently 21 I'm just going to push up till that's 24 and press shift and then similarly with our logo let's just change the wire there to 24 okay so these are laid out but for that to be you know work well and and be responsive and all the rest of it I think it would be better to bring all these into an auto layout so select right menu icons and Logo everything everything uh down so left menu icons is selected as well and we don't need to make a frame and then make it into into Auto layout frame we can automatically just make an auto layout frame by using the shortcut shift a straight away and it's called this Frame number one so let's double click on this in the layers panel and rename this top nav press enter and it's given us these settings now it's currently hugging these um uh with um you know this certain width and everything and and and setting this gap between and there's there's a better way that we can do this firstly I'm just looking at this and thinking this margin is too tight so what if we want to change that we click on desktop we click on our layout grid of our columns and I'm going to change this margin from 24 to 64 okay so now I want my top nav to fit within this with this having this 64 uh margin so what I can do with this whole top KN selected I can change this width here um this WID should still be on hug are it for a minute I need to make another frame around it so I'm going to press shift a to make another Auto frame and I'm going to call this top nav container and I'm going to change the width of this to 1440 which is sorry the same as our desktop width so you could have copy and pasted it from there so let's go to top and half container now I'm going to align this to the left and to the top okay then this top and half container I'm going to make the Gap zero I'm going to make the horizontal uh padding the same as our margin which is 64 and I'm going to make the vertical padding uh 24 which is what we had um beforehand the the gap from from the top that we were looking at okay maybe that's a bit small let's do 32 so it's half our 64 L fantastic then I'm going to go into top nav and I'm going to change the width here to fill which I have done and you can see the blue rectangle does fill up to that line but these are spilling out and the reason is this Gap is set by these uh numbers and it's too large so we can bring this gap down so for examp example if we change this Gap to 80 it would bring it within but what we want is obviously them to kind of fill across so what we should do is change this Gap to Auto and what it's going to do there is automatically set a gap so that um it's equalized and these all the settings are correct so this is on fill now what I want to do it just looks a little bit hard now I'm just going to turn my grid off with shift G shortcut it looks a bit odd the logo height versus the icons so I'm going to click on top nav and then I'm going to make sure these are aligned to the center now I can't align things left and right anymore only top middle bottom because my Gap is auto so just check your settings of the same as mine the outer tap North container should have a width of 1440 and a height of hug doesn't matter about the direction or the alignment the Gap is zero horizontal padding 64 and the vertical padding is 32 the top nav has a width of fill and a height of hug it's horizontal layout it's aligned to the center it's an automatic Gap and the padding is z z and then just by using Auto layout we have this whole um layout uh created here fantastic I'm happy with that right finally let's have a look at some more advanced uh figma features by creating a button which not only looks great but also prototype how it might feel and then we'll create a mobile layout version of this page to finish things up so firstly the button let's scroll down to the bottom of our page where we had the text for the button discover the sound and click on that and I want to make this into an auto layout frame it's going to be easy way to edit it so with the text box selected just press shift a and it's created this Frame and we can rename this button fantastic I'm just going to collapse through the layers now let's give this button a fill so we can see what we're doing so with fill on the right panel there's the icon on the far right the plus add fill click on that and now it's filled it with white not so helpful click on the swatches option and we had on this page so maybe let's select this kind of dark brown that we had and we'll start there you can see this is already looking kind of button-like Auto layout has already added this padding of eight and eight uh around the button so we can have a look at like what we can do to make this more button light we can maybe increase this is padding a little bit um something along these lines let's start with that so we've got 40 for the horizontal and 24 for the vertical so SL at the center um The Gap there's nothing there so let's just change that to zero for a minute fantastic okay next steps May maybe because this is a button we want this text to be uh stand out a little bit more so I'm actually going to select the text I'm going to press hold down command whilst clicking to select just the text that's to deep select hold on command while clicking on something and I'm going to change this from regular to a little bit heavier weight normally we got two weights so let's do that semi bold now this item here is the line height which is Space Between the Lines if I just hit return just to demonstrate this to you to make this tutoral a little bit more comprehensive you can click and drag here and you see the spaces now this is something with more do with paragraphs I'm going to just change this back to 100% just so I'm not confused that there's anything strange going on and you can also play with the lce basing which I'm quite happy with we just look at 100% um deep select but you can you can push up to make that's further apart push down I'm holding shift you can do it an increments of 10 you made them close together but let's leave that at zero for now fantastic so I think to make this button a little bit more interesting it would be cool to have like some sort of Icon next to it again so let's try in our actions menu again with our feather icons and I'm thinking so a speaker with you know sort of the the the volume lines coming off it that kind of thing H that's not what I want sound audio H volume this is the one it's called volume two great click on that brings it in I think let's start it with this same as the other icon so I've got the aspect ratio I'm going to go to k sorry is locked and change the height to 24 and I'm going to go close my scale I'm going to click on either selection or stroke anywhere and just change the color here to White fantastic now I'm going to bring this into my auto frame so I'm going to click on this group I'm going to drag it within button here and it's G before so we need to click on text and drag that above so it's our top layer and then we have them next to each other so now we do need a gap so I'm going to click on button I'm going click on Gap here press shift and I'm pushing up now I've set my nudge amount to eight yours might be on on 10 you can change that um in the in the settings but for now we'll just um you can just type that in somewhere around there I think is good yeah I'm going to go with 32 okay so this is starting to look a bit more button like I'm thinking maybe sort of a pill shape for this button so if you click on the button under appearance we have the corner radius so you you can push up and start to get a corner on here so if I have to like 16 I'm just going to zoom in you can see there's a little bit of a corner there to it I'm actually going to go for a pill shape once this number gets higher than the height which is currently 72 so if we type 72 in it will look like it's fully rounded just to make sure that doesn't change uh and it's always rounded you can just put in a huge number like 999 press Tab and then that's going to give me a fully uh rounded pill shape button let's make this the kind of button that somebody really wants to click on and that will allow me to show you some more figma features too so maybe let's apply this instead of this solid fill like some sort of gradient to it I'm also not sure about this Brown let's first of all click on it and then align it back to the center I think really I'm going to click on fill here I'm going to click on the eye dropper we need to maybe pick up this sort of gold green type thing but I want to start with a dark color doesn't look very green once you sample it is it just my eyes that think it's green it looks more like gold or brown I want something fairly dark don't worry about trying to copy this sampling exactly because you can just uh once I find the color I will read it for you okay we'll start with this one so I'm going to change this to hex and what we have here is a hex code of 353 313 so you just need to type that in okay for your fill then once we have that as a solid fill we're going to click on the second icon here which is gradient and what it will do is it will use our first sample color and it will take it to uh a second color here which is just automatically created cuz it's like hey you want to use a gradient let me just choose something for you that's not bad but let's sample another one from here so I'm going to click on that uh icon I'm going to click on the ey dropper I'm just going to sample something I think so we do bring in a bit of this golden typ color that's pretty good okay so now you can type in 8 E6 D2 B fantastic and we have here a gradient now want to match up a little bit with this Photograph so I'm actually going to just drag this button um although it's going to appear on the light background so maybe on this light background but so I can have this image in frame and I'm just going to zoom uh around them so I can really see uh what I'm doing maybe just out a tiny bit but 100%'s probably good for me on my screen okay so I'm just looking at the light we've got this shadow in this sort of bottom right hand corner so that's what I'm going to follow that sort of direction as well with the lighting it's kind of top lighting a bit softer on the left bit more on the right there so with my button selected you can see now my fill is a linear gradient I'm going to click on the Swatch so I have these options up again and what you can do is if you click on this white circle next to the Swatch on the canvas and hold the mouse button down you can drag this around and you can even go beyond the bounds of your frame you can go wherever you want with it I'm just going to have it sort of along the top here somewhere um so at the moment it's kind of above the E and it's on the top line and then with this other one maybe just see what I do for a moment and then you can follow along sort of momentarily I'm going to bring this so we want this angle I'm now going to bring this one over and I'm just going to play with this for a minute and then you'll you can you can follow along and and copy me so we'll speed this up and then uh I will tell you how to uh follow along and copy momentarily okay and this is a fairly typical design process where you experiment with things but copy this the first stop the color is the same as what we originally read out the darker color the lighter color that we have is now 80692 a okay then to position these and I'll just zoom right in so we can see you can do this to the eye but basically you can see the position here of my uh stops so you can drag them around so they're basically but I'm cutting through the E here on the sound and this one's you know below the frame something around there is absolutely fine to start with fantastic right so I want to reflect this uh Shadow uh look that we had before so the next thing that we are going to do is add a drop shadow so I'm going to click on the button and then on our right panel we have effects we can click on this plus icon you see it adds a drop shadow I might not be able to really see this too well so let's make this a little bit more obvious so next to the words drop shadow on the left we have an icon of effect settings click once on that and if you look at these settings firstly under color where it's black I'm going to change this to 100 just so you can see it and I'm going to change the X position to four just as the Y is four and the blur to zero so now you can see this black thick drop shadow in fact let's make this a bigger number 10 10 that has been created you don't need to copy this bit I'll let you follow along in a moment and that is a drop shadow and if we drag this y you know that's the hor the vertical X is horizontal okay that's where you want to place it negative positive whatever okay so we can get this kind of in the the place that we we want it to be maybe it's like four and four um I think actually we want it to go a little bit more vertical then horizontal so I'm going to do two and four and then you can start to blur this out okay how you want this to feel and then you can bring down this opacity I'm going to hold our shift while pushing down and can of just give yourself this little bit of a shadow under underneath okay maybe this one's a little bit far actually I just want this to be like the darker one so I'm going to do that as one and two so copy these settings 1 2 six black 40% then what I'm going to do is add another drop shadow now I can click on this Plus or I can have this effect selected by clicking on the left of it so it's blue row command C command V click on the effect settings and for this one I want to blur this one out more so I'm going to push it so it's two and four so it's a bit further away and then I'm going to just blur this quite a bit larger so it's just like a soft softness underneath so that's a 20% you might think it's not doing much but if we just hide that show it hide it show it same with the bottom one you can see that together they do create that sort of effect that I that I want so it's creting that little Shadow underneath the next thing that I'm going to do is add a stroke to this now I like this linear gradient that I've created I want to use this thing again so what I can do whilst I've got this selected and you can see the fill here the linear is appeared we have next to the ad fill another um icon which says apply Styles over variables with four circles we're going to click on that and then we're going to click plus new style or variable so here at this style we can actually give this a name like gradient you might have lots of gradients it might be more descriptive in a full website but this will do us for now um actually let's call it gradient D BTN button so just slightly descriptive and then I'm going to click create Style and you can see now instead of saying that it's a linear gradient it's showing me that I'm using a style here that I have created fantastic I'm going to add a stroke to this button by clicking on the plus next to uh on the stroke line at stroke and a stroke is a line and outline around you know an outside which you can have or it is a line um like on our icons so these can be inside if I just make this something huge so we can see see like 10 it can be inside your selection it can be on the center line of it or it can be outside of it okay I'm going to select this to inside and make this a lot smaller than that maybe two three let's go with three let's look at that at 100% I think three is going to be good I'm going to go back to large so you can see what we're doing select it now I want to use my gradient for the stroke so I'm going to click on the Swatch and then I'm going to go to libraries and then click gradient button now this doesn't look like anything now because it's following the exact same direction on my stroke so what I'm going to do now is I'm actually going to detach the style breaking the link to it so it's just applied that but it's separate and then I'm going to click on this swatch for linear stroke and then I'm going to select the option to flip gradient click on that icon it's flipped it around so now you can see the look that I'm going for this button is starting to look a bit more tactile a bit more 3D which is great okay so with this light coming from the top left that's the thing we need to work on now we've got a little bit of Shadow at the bottom I want to do um some sort of glow at that level so I'm going to select my button again I've got these two drop Shadows I'm going to duplicate these by pressing command D and I'm going to drag this middle one up to the top so I know it's these two top ones I'm going to click on the effect settings icon and I am going to change the color from black to white okay you can see that white that's come around it I want this at the opposite top corner so I'm just going to put a minus sign before my X and Y Val so check you've got these settings - one - 2 6 White currently 100% cuz I selected white there's others were Li to earn there so we're going to need to bring this down and tandom with the other ones but I'll have it so it's just sort of showing there 40% that's good okay same process with the next drop shadow click on effect settings x minus 2 y minus 4 I'm going to change the color this was currently 20% to Y it's made it 100% let's go back down near that 20% and see if that's probably going to be about right for us the only thing I would say is the why looks pretty harsh on this background so maybe instead of a pure white we could have a little bit of a lighter color maybe we base it on our lighter color from our grade radient so sorry let me slow down click on button click on this stroke the linear gradient I'm going to double click to select the hex value here on the lightest stop command C to copy it close that down button selected I'm going to click on my top drop shadow and I'm going to paste this color in here but this is going to be too dark so I'm going to click on the color I'm going to change the brightness so you see this is HSB Hue saturation brightness clicking the brightness hold down shift while pushing up and you will see the circular um which is selecting your color there is going to move upwards so it's brighter and brighter okay I'm going to bring that to 100% I'm going to another the saturation the next one and I'm going to decrease that so it goes to the left so what we have now is a sort of more of an off-white kind of color if I change this to 100% you can see it's this sort of yellowy off- white okay so now I can do that to taste and maybe it goes a bit brighter cuz we're using this yellowy color 40% I'm going to copy this hex code and then I'm going to go to my next drop shadow along that was currently white and I'm going to paste my hex code in there again just have a look at this but this is this is okay it's a bit yellowy not kind of towards the brown enough but it demonstrates what we want to do okay this is pretty good I don't want to do too much more with this I think uh one thing would be that maybe with this stroke weights of this icon are a little bit thick so now I've got them all selected here if youve not followed me there in the layers panel it's actually at 3.39 so we could just actually make that three it's to too light yeah let's change it to just three and I'm just making it match up more to the font that we have here a couple more glows would be interested it allow me to show you some more effects as well so I'm going to press o to give me my ellipse tool again and then I'm just going to click and drag into this uh button and make some sort of ellipse I mean this one is 48 by 26 but we're going to mess with it anyway okay now it's broken our Auto layout so we go over to position in the top right and click ignore Auto layout okay now we can drag this around wherever we want it's ignoring the auto lay and I'm going to change the fill color maybe to the hex code that I just did has it still got it remembered it has if it doesn't for you you can do ff6 A1 fantastic and what I want to do is have this as a bit of a light similar to where there's whoops I need to hold down space bar somehow I just selected first there's a bit of light coming from the left here there's a bit of light coming from the top so I want to do that kind of thing so I'm going to click on this ellipse again I just held down command while clicking to deep select then I am going to go to effects on my right panel click add effects and there's some more effects that we have here that we can use I'm going to change this to layer blur which actually blurs um this image this layer the shape then I'm going to click on effect settings and we want this to be pretty huge I'm holding now shift yours might be going up in tens whatever that's fine Yes somewhere in between here 32 maybe and then I'm just going to sort of angle this drag it around change the size of it change what you know and just sort of play with it to make it feel like it's the right kind of glow that I want that's pretty close it's just a bit too bright so I'm going to with it the ellipse selected go to fill and then the fill opacity is selected there I'm going to press shift and down arrow just to sort of have a look at this coming in kind of subtle so it's not totally breaking everything that's pretty good I'm going to make a copy of this hold down option or alt hold down your left Mouse button drag across we'll have another one kind of spotty in this sort of area I'm going to make this one a bit bigger maybe and maybe make this one a little bit less because it's it is really breaking our sort of look May it's a bit smaller and you can maybe watch what I do for a minute and then then kind of do your own version I just want to add in one more effect to this so I've got this whole button selected go to effects click Plus for add effect and this it's the top one that it creates click on the effect settings icon so we've used uh drop shadow we've used layer blur you can see again we haven't used background blur which blurs what's underneath it if you've got something that's opaque um but we're going to use inner Shadow and again just to show you where this is let's take this to 100% let's take the blur to zero let's push up on the X and Y you can see this black that's developed we can push the blur up actually maybe it looks a bit more realistic so with this one just see if we want this from the bottom right or the top right I think for our normal State we will make it from the bottom so let's start with -4 -4 and when you're messing with these effects it's good just to show and hide them to see how how the whole thing looks but that really helps this look more 3D so I've ended up with minus 4 minus 4 blur of 12 and it's black 60% okay fantastic so let's go back to 100% and let's drag that button make sure we've got the whole button selected here the button Al to that frame let's drag this button down vaguely to where it wants to be cool so let's T up our spacing and then we are going to prototype with this button just zooming out a little bit I think at the top we maybe don't need quite so much space so I'm going to select my top and half container and then just click on it and drag it down so I kind of like where it wants to be and to make that a bit easier for you let's make this exact so we're going to click on this not smarter by command click and I can show you another feature within this topography here um this box has been created you know based on the point size and the line I you know so Chang this to 100% the Box around it goes a bit smaller but you actually click on settings here type settings and there's an option here vertical trim and at the moment this is using the text box standard but we can change this to cap height to Baseline you'll notice that the Box around it goes smaller so it's just around the actual characters itself the base line is the line the type sits on so I'm going to do that and then drag that back to where we wanted it just sort of slightly overlapping this bottom left corner of the A and then here we can look at a gap so I've dragged this it's actually touching this not smarter and then for the position I'm maybe going to type Min - 64 that looks better to me now now this has gone off to the side so I'm going to change my X back to zero I'm going to click on the desktop frame I'm going to hover over the top Edge hold down command and my left bouse button while I click and drag until that just snaps onto my top uh frame which it hasn't yet that was something else and I'm feeling that snap there and if I click on this Frame yeah that is aligned properly on the top so that feels better at the top now this one underneath I'm just going to do this compositionally based on the uh image again it would probably be helpful if we had this at 100% line height but actually just trimmed it instead vertical trim to B slim and you've got to squint it doesn't work if you don't squint you can zoom out a little bit see how it feels you can go back to 100% I'm doing it at 50 just so I can see the whole composition or whatever is good for your screen that looks good to me then this text here now we changed this color didn't we I've just remembered this is from the brown I want to pick up one of my greens or the dark color I used here so I'm going to go into this stroke and I'm going to copy this color which was our one beginning with 353 going to copy that I'm going to go up to this text I'm going to make that the fill and then so we remember this whoops we can make this style as well so we click on the apply styles of variables we click plus and we can just call this um dark or may call it green dark create style fantastic and this text box I want to have a sensible sort of Gap from what's above yeah 179 that is I want to use my my um 8 pixel spacing cuz I just have to make sure it's perfect so I would suggest that this Gap oh sorry click click the first text box command click uh sorry shift click so we select both of them and then this Gap in between I can actually drag this now so maybe you'll do 160 which does divide by eight fantastic then click on the button click on it in the layers panel make sure we select the whole thing if I drag this up it will prompt me now to do a 160 let go if I zoom out that looks good and maybe the Gap at the bottom again hover over the bottom command click again that's telling us that's now 178 so what I could do if I wanted another one 60 that's actually going to be way too much actually between the button and the um the text the above so I'm going to click on the button I'm going to type minus 80 so that Gap ends up being half I'm going to go back to 100% that's still too big I'm going back to this button I'm going to type in minus 24 and now I'm going to just do shift and push up the down sorry and just look at how these kind of belong together that looks good to me so what we've ended up with and you'll be able to do it by looking at this is a gap of 56 so I click on one of them I hold down option while I hover over the next I can see that 56 in the red box so we've got a gap of 56 in between those two and then I think at the bottom I want that sort of 160 that we had there so I'm just going to drag this up actually first of all and I've got a a 1461 so I would want to add plus 160 onto that height so I've ended up with 1621 go back to 50% look at the whole thing that looks okay great so two more things protot tap this button but let's do the mobile out so the button here I'm going to select it on my canvas and I'm going to make a copy of this so hold down option watch you click and drag I'm going to hold shift as well I'm I'm just going to bring this out onto the canvas area here and we zoom in to this guy and I'm going to rame this button slash default then I'm going to click and drag whilst holding shift below doesn't matter the Gap I'm going to rename this to button SL hover click on this button SL hover this is going to be our hover State when we hover over with the mouse button then I'm going to click on this first one in the shadow effect settings and I want you to change this from minus 4 uh X and Y values to just four so just delete that minus so it's four and for everything else I'm going to leave the same except actually this icon it might be cool if this sort of expand so let's go into button default we'll click on this icon volume two and then the vector we've got these two uh items I'm going to zoom right in and I want to select just this outer one here okay so there's a few ways I can double click and then get into these um pen tool options here that have come up and just click click on one of these points here itself and then press backspace it's going to just delete this whole thing now that's actually changed the WID there of my entire button so we want to make sure these are the same so I'm going to go back to button uh I'm going to make sure this um icon volume two doesn't change so in button hover I'm just going to deep select my command click and check what icon Volume 2 is here this has got a a width of 33.943398 selected I'm going to press option command G to create a frame and I'm going to drag these vectors into the frame and then the group has disappeared because there's nothing within it and then we can just call this volume icon it's always good to name your layers and then I can do what we were going to do originally which is hold down command and the left Mouse button whil topping over that right Edge and drag this out till it is 34 fantastic and then I'm going to go command zero and now these buttons should be the same size 354 hug 354 hug beautiful Okay so we've got our two button States here now what we want to do is make these into a component so on the canvas click in some space and then drag around both of them so both are selected or you can select both of them on the layers panel here then on the top right right where it says frame follow that row along we have these four diamonds it says create component but you actually want to click on the down arrow next to that and we're going to click create component set now he's created a component it's named it button and if we expand it on the layers panel you can see it's made the two states hover and default and that's because the way we named uh our frames with the slash it's used that name of convention automatically fantastic sck now what we need to do is prototype this so that when we hover over it changes to the hover STI so we're going to click on default and then we're going to go into prototype mode which we use by on the top right we go from design Tab and click on prototyp then there's a few ways of doing this you can hover over and you get these blue pluses in a white circle that's got a blue stroke around on each corner or you can click Plus on interactions but let's do it with a circle you click on that you hold your mouse button down and you drag out and you see now we've got an arrow where is it going to take this interaction basically is what it's saying so we just drag this to our hover button and it will snap to it and it changes the color to purple you can let go of your left Mouse button and then it it brings up this interaction menu what's the trigger going to be for example when you click the button well that's not what we want so let's click on the down arrow we want to do it while hovering over the button and you can see the options that are available here for interactions that's what triggers it what starts interaction while hovering so while hovering we want it to change to which is correct and you've got these other options like navigating to another page um or scrolling to a section on the page but we're going to go change to property one we want to change it from default to hover okay and it's going to do this instantly you can change this for example smart animate ease in and out and it's just going to give you it gives you a preview underneath of what the sort of Animation looks like okay so make sure your settings are all the same as mine there on the interaction and then we can uh close this down one thing I didn't like about my button if I just select the main component there clicking on L panel and then go back to design mode is this is called property one which is generic so I'm going to change that name to state for that first property so we have the default State and the hover State now to see that in action we need to actually bring this component in here now you can again option and or all and click and drag it in you can also go to your assets panel here and you can click on create in this file and we have a button and you can click on that and drag it in to your frame and now we have the button and this now is an instance of this main component so if we update this main component then it will update the instance for example by you know hiding the volume it's hidden it you can see on our main canvas as well if we show that again and that's a way of updating we can change the colors or anything there fantastic let's just uh collapse all other layers so what we want to do now is we want our instance to to be in place where this button was so I'm going to copy these settings so this was 535 I'm going to remember I'm going to click and drag this one um up actually just to we can just drag it so it's next to it so we know that's going to be uh be the same now so that's fantastic um and then with this one is line to the center so I'm just going to delete this guy the original guy I'm going to click on this instance and I'm going to align it to the horizontal Center fantastic now how do we look see this hover we're hovering over and it nothing is happening that's cuz we need to to preview this so we can either do this in present mode or preview mode I'm going to use present you can use this buttons at the top so there's a play button there to present and click on the down R there's also preview which pops up like a a window let's just click the play button for present and it's going to open a new tab here with our prototype and if we scroll down to the button and hover over we get this effect of the button changing as if it's being pressed and the um extra line coming up on the sort of volume there so it makes like a nice sort of interaction so you can play with that on on your uh on your own button on your screen fantastic final thing we want to do is a mobile version I'm going to click and move this button out of the way what size should we make a mobile frame well if we click F we get our frame options if you remember there was options for a phone so it says Android compact is 412 etc etc so we have all these different options so maybe we want like not the newest phone we want to make sure it works on a smaller size so we click like iPhone 13 and 14 and we can see that the WID is 390 pixels let's just move this guy out of the way and I'm actually going to make a copy of our desktop frame so I'm going to click on this desktop frame I'm going to hold down option and shift while I click and drag this out and I'm going to rename this mobile fantastic so what we want to do is change the width of this to be 390 so I am going to hover over the edge and start to drag but I'm also going to hold down option so I drag from the uh Center and command so that I'm not scaling and moving these things around and I'm going to drag this until it says 390 I have to zoom in a little bit so it lets me uh get that exact 390 fantastic command zero back to 100% great so we have for mobile I'm just clicking and dragging this over so it's closer now we have this uh mobile done we can't read anything okay so how are we going to fix this let's just go from the top so first of all in our mobile and if we collapse the the layers optional and expand the mobile one we have our top nav container now this is set to 1440 so that is why we can't see that so we can change that to three 390 the same fantastic now we can't see anything so this was constrained to the left and the top we want this to be the center and the top that would have helped us to begin with and then I'm going to press option H to bring it back in center now on mobile let's go back to we don't need all these icons we just need the menu so what I'm going to do is just hide everything else so I'm going to hide the search I'm going to hide user I'm going to hide mat pin I'm going to hide shopping bag fantastic then I'm going to bring the B logo to the the top above left menu icons so that the menu goes on the right and then we have got the problem here of the margins and then we've got the problem of this space so actually right menu icons we want to hide the whole frame now these are being spaced out within the frame but there's two much space on the left and right that's because if we turn the grids back on shift G we still have our same layout grid okay so I'm going to click on layout grid settings and I'm going to change here the margin to be 24 just the same as our gutter here so that's that bit smaller I'm going to close that I'm going to go back into top nav uh container topn container and change our horizontal pading here to 24 I may as well just change the vertical one to 24 as well just to bring that in and then if we press shift G this looks more normal now you maybe say this logo is a little bit big so we can click on the logo in the layers panel and press K to scale it and maybe we just bring this down by half and then we have kind of a mini logo maybe these Strokes feel a little bit big now but that's okay okay so there's top now container that looks correct what's next well we have some type that we can't see so if we click on not smarter and again we maybe scale this to half that's not enough that was at 100 so maybe we can just look at these options here that we've got maybe this 64 is good and that again wasn't aligned to the center so I'll do that on my text box and then again with our position we can bring that back to the center fantastic so that's 64 are just better command click to select it we can make half of 64 which we can tap in this way if you don't want to do the math ID two is 32 and we'll align that to deselect it select it again option H align it to the horizontal Center fantastic we probably want to actually see this speaker um so we will need to scale that uh maybe let's just finish the text stuff actually first of all so I'm going to command select this part I'm going to bring this down to say 16 which is one um it's in a standard browser it's probably the smallest size you want now that does fit on one line if it didn't that's fine you know figma can handle text you know over two lines no problem but I'm just do UND do that a couple of times and we'll leave that as it was we need to mess with this spacing for now I think I'll select the portable speaker line and my button might just drag this button down actually so these things just appear in order so it's a bit easier to kind of consider them uh and I'm going to select my button and my line above it and I'm just going to drag them up a little bit so I just get more of a sense of these things being together but we need to scale this image so I'm going to select the image in the background and make sure you also select the image in the foreground at the same time so command click on both of them because we want to scale them together and press K get my scale tool and we can maybe start off with again 50% yeah I mean now we can see that image so I'm happy with that so I'm going to close that down I'm going to align these to the top but not by pressing that because that's going to mess with my M group it's just going to do the two of them together I'm just going to click and drag them holding down shift till I get my red line at the top that's beautiful I'm happy with that so let's bring everything just into alignment so they're not smart align we're doing this to the eye so we're just going to click and drag this up we'll Zoom right in and just use our up arrows put that where it was before fantastic just better fact let's select all these and P the speaker and button click holding down shift while dragging them all up let's put our just better about where we want it fantastic zooming in so with this portable speaker that's now giving me a gap of 84 could maybe just change that to 80 if I do minus 4 on here yep and then my button wants to be yeah 40 is great oh look I've got a 40 80 40 so if you want to check these press button hold down option whilst hovering gap of 40 to that text click on this text hold down option a gap of8 8 to this one then I'm going to click on the whole Outer mobile frame hold down command and the left Mouse button whil hovering over the bottom Edge click and drag this up till it's about where I want it to be let's just do this to the eye for now and we now have a mobile design as well and you can actually preview this you can use uh shift and spacebar to open this little preview window so it feels like a phone you can even with mobile go into prototype settings and then click Pro Show prototype settings and change the device to the one we mentioned which was same with the iPhone 14 click on mobile then option command enter and you see this is how it looks actually within a phone type setup we've covered a lot in this free course but if you want to use figma professionally then definitely have a look at figma for web designers it's much more comprehensive and systematic as we dive into Advan features and give you time to really understand everything that figma can do Link in the description of this video to check that out well done if you got this far leave us a comment to let me know because this is the longest video I've ever made I think until next time happy designing