Figma Crash Course 2021

figma it's a graphics design tool to pretty much create anything from logos to apps to websites to much more with real-time collaboration and so many people are using it these days that you want to learn how to as well so in this figma crash course we'll build out a real project with assets that i'll add in the description below so you can follow along if you want to let's get started right now this crash course is beginner friendly so if this is the very first time you're loading up figma just head over to google and head to figma.com the figma website is nice and friendly and if you want to sign up it's completely for free you don't have to pay a cent you don't have to put in even your credit card to do this just select sign up at the very top right and you can log in with an existing google account or you can just use an email address and a password i'm going to log in with google here since i've already got an account once you're logged in you're taken to the dashboard here you're going to get all the types of projects that you're working with if this is the first time you're loading it you might not have anything here but you can create your very first draft page you can head over to drafts and press this plus button over here or you can head over to the new button at the top right and select to create a new design file which i'll do right now this will load up the figma creator and in this browser window you can essentially start building out anything we want in this example we'll be building out a special design here from front-end mendor let's have a look at that right now you can head to front-end mentor by just going to google and selecting it they've got great designs that you can learn to design or code and in this example we're just going to be using this orange looking sort of sunshine example because it's nice and clean and simple you can grab all the code and assets directly from github which i'll also link in the description below in this case i'm just going to select to download them here from github and you can also view the overall design which is what we'll be trying to recreate in terms of figma as part of this crash course for the time being i'm going to minimize all these contents but later on we'll be having a look at all the icons and imagery that we'll be putting into the project let's jump into figma now to have a look at how it works the very first thing you want to do when you create a new figma project is name it so at the top here what i'm going to do is i'm going to call this the figma crash course 2021 and here we've got this name now so whenever we go back to our files we can immediately access it i'm going to select back to files here and i can see that it's right here figma crash course 2021 we can go into it and continue editing where we are we can also do a number of other things here as well for example if we wanted to share this page out to other people to preview there is a button here at the very top right called share and this you can actually copy a link and send that to different people or you can even invite them via email so this is really cool it allows us to cross-collaborate at any point in time i'll actually share this figma link in the description below so you guys can view it as well we're going to take a look at the toolbar that figma provides us before we get started as well the toolbar essentially are all the things that we can do inside figma to start off with we've got our cursor but this also has a drop down that allows us to select scale as well if we wanted to resize different elements the frame tool essentially allows us to create a frame inside figma whether it's a desktop or a mobile which we'll be designing inside of and slice gives us finer control of how we do the sizing inside of that frame we also have our shapes here which are things like rectangles and lines and circles and we've got our more detailed elements here that we can edit with our pen or pencil for example we also have text which we can add to the page we can move the page around and we have comments that we might want to put in in case we want to do revisions or add some markup for other people to review to start off with with any design you want a frame so to create a frame just select the frame option here at the top and on the right hand side you get a bit of a toolbar this toolbar gives us all the different types of options whether it's a mobile phone or a tablet or a desktop normally i like to start off with a tablet so i'm just going to select the desktop size there and that immediately fills up the frame with what we'll be working on for today's design next you'll want to label every element that you're adding to the page believe me that when you're designing invigma you're going to get a lot of elements here and without proper labeling it might get out of control so the first thing we're going to do with this frame is called home page if you're building out lots and lots of pages this becomes very useful and if you're building lots of components we'll have a look at how to do grouping in the future too let's have a look now at the different options we have here on the right hand side of our frame that allow us have more control of what's going on if we zoom out for example by holding ctrl and scrolling down we'll see that the frame doesn't have a lot of height in our design we actually do have quite the height on the home page so the first thing i'm going to do is increase the height we have all these options on the right hand side and under frame we've got a h button here oh sorry we've got a h label here and this is for the height for the height i'm going to resize this to maybe say 4000 pixels and this will give this frame essentially 4 000 pixels of height there are other things we can do in here which we'll take a look at shortly but this is the first thing to get started with sometimes people prefer to also increase the width so for example a page might have 1920 pixels for width but since we're mainly working on a desktop size for this example i'm just gonna keep this as the default which is one four four zero if you're working on a website and you are trying to change the background color for it in terms of this you do it in the frame as well there are a few options here on the right hand side such as fill and fill is essentially the background color that we're using for the frame for now i'm going to keep it as white because that's close to our design but if you want to change this you can do that too there are a few other options here like stroke and effects and export but we'll take a look at them a little bit later in this video what we're going to do though is we're going to add a bit of a grid if you understand bootstrap or you understand websites in general you always have grid layouts to be able to give you the right sizing for all the elements on the page you don't want them out of control the default grid is essentially a 10 pixel by 10 pixel grid and it's not very useful so what you can do is select the boxes here next to grid and you can change the grid type i'm going to change the grid type to column here and essentially the default is 5. if you're used to 12 columns you can put in 12 and it automatically fills up this frame with 12 columns alternatively you can also do rows as well if you wanted and that way you have consistent looking rows here but for the time being i'm going to keep this as 12 u 12 units of columns and we'll have a look at how this works in terms of our design soon and the only other thing here that i would recommend is just lowering the color here so right now it's on ten percent i prefer five percent because sometimes that red can get in the way of the work we're doing that's it for frames at this stage so now let's actually have a look at adding some content to this page let's create our very first shape here which is just a regular rectangle i'll just put it on the page here which comes in a default gray we want to use this as the baseline for our background of our hero image so to do this i'm going to first change the background fill color which currently is the gray here on the right toolbar i'm going to put in the color blue here and this will make up the background essentially we're going to drag this to the top left and this will snap into place and then we'll just drag it to the right it'll also snap into place when we create a rectangle there's a few different options we do get we get options here like for example these radius circles and if we actually drag on these you'll see that a border radius is on automatically created we can also do this manually here in the radius section such as making say 15 pixels radius but for the design in this case we're not using that so i'm just gonna reset that back to normal the next thing we'll notice is that we get an option here for height currently i'm just going to set the height to 480 pixels and that should get us started we've got a number of other options here but for the time being i'm just going to leave this as is and this gives us our header we can now jump into some of the content files that we had earlier and have a look at maybe adding in an image which might be the logo in this case we've got this sunnyside logo in to be able to add this into figma we simply drag and drop it and it pops right in there you can see that the logo here is actually a vector so if we were to resize it it's automatically essentially resizing as an svg which is great so what i like to do for both of these shapes essentially is to give them better names for this i'm just going to call this logo with a capital l and for this i'm just going to call it maybe hero background with these two done now we can also group them to group elements in figma you can select both of them and right click and then select group selection this group currently also doesn't have a label so what i'm going to call this is hero section and this can be essentially the section that we're utilizing and putting all the content in as we start to have it for the logo here i'm actually going to place this at the very top left and i'm going to probably give it maybe 30 pixels from the top and 30 pixels from the bottom and resize it just to go to the end of this column essentially so that looks good there the next thing we can do is have a look at adding in the menu and to add in the menu we're going to use the text select here for the text select as soon as we do we can click anywhere on the page and add some text in this case i'm going to add the word about here this auto defaults to a number of variables here on our right panel the first is the text variable here which selects roboto as the font and the font size here as 12 pixels i'm going to change this to 24 pixels just so it's a little bit bigger and then what i'm going to do is actually place it here to align across with our logo so our logo you can see we can align it from the top we can align it to the center or we can line it to the bottom with these great snaps that figma provides so i'm just going to align it here to the bottom and that should get us started we can then hold down alt and copy this across to the next column here or for example we could just ctrl c ctrl v get a copy of this and paste it here on the right this one here i'm going to call i think services so let's put that in services and we'll notice that these text elements are popping up at the top left here so with this i'm going to actually drag them into our hero section here and we could even go ahead and create another group for them and call this naf or navbar navigation in general so i'm just going to keep selecting on these but you'll notice that now that we do have groups if for example we want to select an element in this group we're going to have to double click on it and now we're selecting this group here for the navbar double click once more and then we're selecting the one element in this group so this is a useful thing to be able to do and this way we can actually copy out groups if we want for the time being let's continue copying this across we're going to add one more here called projects and that mostly covers our text items there just to give you a good idea of text in general we do have a few different attributes we can play around with text for example if we've got this about string here we can actually expand this out if we wanted to add in more text so let's actually expand this about string and say about talking figma crash course 2021 and you notice that when i expanded it out to the width of this column here as soon as it hits the end of that width it auto creates a brand new line we can actually resize this to essentially be one line or we can shrink this down to be two or more lines so it's pretty flexible in that aspect if we want to change the alignment on the right hand side we've got the alignment tools near the bottom here so for example we could center it we could align it to the right we've got a number of options here as well if you want to change the font altogether we could do that too but for the time being i'm just going to keep it as roboto of course if you want the font to be a different color if we scroll down here like the rectangle the fill color essentially can be set depending on what you want you can even select a color from an existing option an existing section of the page but for the time being i'm going to leave this as default and we'll move the about section back here to the top i'm just going to hit ctrl z to undo all of that and you have pretty much almost unlimited undo's whenever you're working on the page which is really cool for our last button here which is going to contact we're going to do a slightly different thing we're going to put in a rectangle which will essentially be a button except for this button we want to style it a little bit so the first thing i'm going to do is actually make it a white color now it stands out a little bit more on that blue background then i'm going to align it a little bit better in terms of the other elements here on the page and give it a height of 60 pixels so that's just about right we can then drag it so it's perfectly in the center compared with the rest of our navigation and finally i'm going to add a border radius to it so what i'm going to do is because we don't have those circles here in the middle this shape is a little bit too small i'm going to add them in here i'm going to do a border radius of 30 pixels and it'll give us these nice rounded corners here on the top right that's pretty good finally we just add some text into there so i'm going to copy this piece of text here and i'm going to make it a black color now the problem is that it's not showing up and this is because everything inside of figma is essentially layered our layers are just up here essentially layered in hierarchy from top to bottom and this rectangle is outside of our hero section and on top of it as well so what i'm going to do is i'm going to drag it into our nav bar and i'm going to place it at the very bottom here then i'm going to get the projects text here and i'm going to drag this next to our rectangle and i'm going to group them together and call this a let's see contact button nice and clear and finally we'll change the text here just say contact beautiful so that looks nice and clear the only other thing i might do for this contact text is make it bold with control b but if you want to change this manually you've got the options down here in the text area and you can just select bold here so it stands out this pretty much covers our header navigation and logo here so now let's move on to the hero section of this by adding an image and a h1 tag let's start off by adding in the text i'm going to select the text option here i'm going to create a new section here called we are creatives nice pieces of text but if we expand it out we'll see that it doesn't resize this is where we can select the cursor tool here and we can scale it we can scale it to be a lot bigger and we'll notice that this doesn't actually fundamentally scale but the font size on the right hand side is changing which is pretty cool we're gonna actually do this manually and i'm going to do this to maybe 100 pixels or not a thousand just a hundred should be okay and i think we'll select back to the move tool and just give the text a little bit more room to expand out here now 100 pixels might be a little bit too much uh so i'm gonna decrease just just a little bit to maybe 75 pixels and we're going to do a text center here we'll align it to the left and right hand side of our columns and we'll also add a bit of styling here so i want to make all of this text uppercase we've got a few options here on the right panel to be able to do these sorts of effects the first thing we can do is select these options here with the three buttons and here we've got additional different styling options for our text in this case i'm going to select the uppercase tool here which will make all the casing uppercase we can make say bullet points or underlines and other stuff but for the time being we'll leave most of these in general and we'll have a look at also changing up the font a little bit and for this i'm going to select the font row dies here that's a nice looking font and now with our h1 tag done here we can move into adding in an image for this section i'm going to jump here to the folder and here under desktop we have a number of images and i'm going to select this image for the header and drag this into our design this is a large image if we were to zoom out we can see that it's using more than the whole page so i'm going to resize it we're going to resize it all the way down and just move it here into the center and zoom back in you'll notice that it's on top of all our other layers which means that we can't see it very properly right now so i'm actually going to drag it here below our we are creatives and then we can actually move the sizing about so that it fits in quite nicely now i'm believing that because of the height of this section right now it can't cater to add this image in very well we need to actually increase the height a little bit i'm going to increase the height here to 640 and when we do that we can actually move the image in here quite nicely maybe even make it a tiny little bit bigger to fit in with our columns here and the h1 tag here can just fit in nicely here too finally we've got a bit of an arrow happening here towards the orange and we can create this using the shapes tool selecting line or even selecting arrow here which might be a little bit easier and just pointing it down here towards the orange i'm going to select this arrow here to have a white color and with the arrow we've got a number of other options we can actually utilize here we've got this stroke and right now the width is only 3 pixels so i'm going to increase that to 10 pixels and that'll make it stand out a lot more i will make it a little bit smaller by maybe 124 pixels and just move it just about there and that seems to fit in quite nicely this is more or less our header or our hero section done now the only element here is this arrow which doesn't seem to be in this section so once again i'm just going to move it here below and now we've got this all contained in our hero section which we can move around whenever we need we can move on to our next section so what i'm going to do is just scroll down a little bit and we'll create a new uh i suppose rectangle down here i'm not going to worry too much about the size cause we'll resize it but what you can do is when you do create a rectangle you can hold shift and this will cause it to be exactly straight in terms of its height and width and exactly even so i'm just going to place it here and i might resize it just so it's about 50 percent of the page which is about 800 pixels more or less or maybe 777 which is a nice number also change the background for this one to be this nice yellow color and finally i might create a second one next to it here and we'll see that these two aren't the same size so let's actually shrink them down a bit so that they fit on our page properly now each one is 720 pixels which seems just about right for the left one i'm gonna make that a white color like last time we'll want to create a group for these two so i'm going to select both of them here on the left panel and press ctrl g which will automatically create a group for this group i'm going to call this the brand section with groupings you might want to make sure that with the groups you actually have them in reverse order so rather than having hero chronologically at the top and then having brand second you actually put the brand above the hero section because it will be on top of it and this way it makes more sense but if you needed the brand section to be below it you can see that the essential layers are underneath now so in this case i'm going to keep the brand section above the hero section we'll just move it here into place for this brand section i'm going to give each one of these squares a name as well so i'll call this one here left square and the one here on the right right yellow square this gives us an idea of what we're working if in this gives us an idea of what we're working with if we do select one next up let's add some text here into the left box what i might do is actually copy over this we are creatives text and put this here into our brand section on the left side because it's white we can't see it right now so i'm going to change the text color which is just here on the right and i'm going to change the fill color here to just probably black i want to i want to resize this and for the sizing what i might do is just make it a little bit smaller so in this case i'm going to put it to 48 pixels and instead of being centered i'm going to align it left i'll actually use our columns here and i'll push the column here off to the left and then we'll relabel this to transform your brand we still have the caps that was applied so i'm going to go and select the tick boxes here or the little uh dots and we're gonna turn off auto uppercase and when we do that we'll have it back to normal here then we can add some more information here i'm thinking another section with maybe like what we would normally have as a h2 tag and a p tag in normal coding aspect so i'm going to copy this over and in this case i might use a different font as well for the font i'm going to use parallel and this is a nice font that we can use for the p tag we'll change up this font to maybe 24 pixels or 18 pixels depends on what kind of page you're working with but i'm thinking 24 pixels will work a little bit better and finally we'll change the color as well for this text for the color i'm going to select this dark gray color and this just makes this just makes the hierarchy of the header stay more in focus and these text being secondary as well as smaller and essentially not as dark let's fill out this text here with something more specific great that looks much better now we have our text a little bit too close together here in terms of the line height and this sometimes makes it makes it feel a little bit claustrophobic so using figma we've got some tools here on the right side of our text to make this look a little bit better we could double the line height by making it 48 pixels but this is almost too spaced out and a good line height normally is something like 1.5 times the text size so i'll do it to 36 pixels here and that's a nice medium between we can then copy the header element here for our h2 tag of transform and create a button what i'm thinking for the button is maybe something like a learn more and this button we can change the font size to be the same as the p tag information here but what i might do is to represent this as a button a little bit better i might just create another element here using the rectangle tool i might do a little rectangle underneath it and for this rectangle i might give it that nice yellow color we're using on the right hand side here we're going to reduce the opacity and we can increase it on hover and there it is right now it's outside of our section so let's actually move it under our learn button group the two together and just call this a button this looks much better now and on hover we can change the style for that this more or less is this section done the only other aspect to it is the fact that it's not really centered right now comparing with the actual blocks that we have in this section so we can actually just move it down here and as soon as we're in the center it sort of snaps into place which is great now we can have a look at adding a picture here on the right hand side so what i'm going to do is actually just pull up the project files here i'm going to grab this image of an egg i'm going to drag it here into this section we can then resize it as we need but i think this more or less covers a good size for this section and if we were using this for example with css we could actually increase the size so it perfectly covers it and another thing we could do is because this image might be clipping outside of the box we have we can actually select the right box here right click on it and click to use a mask and this puts the actual image inside of the box essentially as a mask which is what we want then we can resize it back down to the right size and just center it adequately here this is an example of how we can mask different elements so what i'm going to do here is i'm going to call this a right mask for egg and we've got a nice mask here that we can utilize we can put in different pictures if we wanted to or we can just move the whole mask as it is because it really is just a mask depending on the rectangle that we created earlier now let's take a look at the benefits of grouping and labeling all our sections what i'm going to do is create the next section and to do this i'm simply going to copy over the section that we currently have holding alt and dragging it down and we've got our second section pretty much ready to go now let's make it a little bit more interesting so it's not a repeat of what we had before first i'm going to change the title for it so for this one here i'm going to call this audience so as figma allows you to create these different options you want to keep them dynamic so that essentially your content is more interesting so what i'm going to do is i'm actually going to drag this here to the right hand side and then i'm going to move both of these sections across to the right so now we can see we've got the same sort of content repeating but in essentially a flipped format now we can just change the image that we're utilizing so right now i'm thinking maybe this one over here we'll drag it into place and delete the old one we had we'll double click on that and we'll make sure that the mask is essentially clipped into place and centered and there we have a nice image for our next section we could actually increase this to the bottom of the height and that looks pretty good let's change up the text here on the right hand side and we're nearly done with the second section already with the text updated the only change we really need to do is changing the button here and what i'm thinking is for the rectangle instead of using the yellow i'm going to use this red pink color and give it again a 50 15 opacity for our third section let's mix it up a little bit this time what i'm thinking is instead of using what we had before with the pictures in the test text let's create something completely different but similar at the same time so uh let's move this section back in here and copy it across below for us and we've got a little bit of a gap there so sometimes if you're not masking things properly you might get issues like this so i'm going to increase it just a tad so that it's snapping into place and then i'm going to do the same for this one down here now that we've done that let's actually get rid of this image and put something different in this time what i might do is these cherries here so let's get rid of this image drag it in and i'm going to resize it here but at the same time i might actually even shrink it down a little bit so it's not using the full box then for the box itself i'm going to add a second one which will be masked inside and for the color i'm actually going to select this tool here which lets me change the background color of the rectangle to any color i want in this case i'm going to pick this green teal color and use that as the background now that we've got a little bit more room to play with we can actually move some text into this section so that's what i'm going to do let's grab these two pieces of text and remove the button and i'm going to put them here into our mask and here they are the black color for the text there doesn't look that good so we can mix up the color a little bit for the text so that it stands out better and since these things aren't really left aligned we might even center align them so since we already have them selected let's go on the right hand side here and center them so that looks already much better and then let's actually change up the text here maybe call this graphics design for figma all right great so we've got these new pieces of text now the color for the text we've got a few options for this you could manually pick out a color but one useful method is again to use this selector here select the teal color and now we can actually drag it across here and just continue to make it darker until the contrast fits just about right to stand out but also not too dark to be a black then we can do the exact same process by selecting the color picker here selecting the background and just making it darker but not as dark as the title so there is less hierarchy in the text comparing to that h2 title and i think this is a nice example maybe just a tad darker and it gives you an idea of how you can visually play with the elements and update them depending on what you want to create let's delete the right square here and we might actually copy this current left square which is actually on our right side and copy it across this time let's try and use a different image and see if we can create some more dynamic imagery and text for this section so what i might do is use this orange or apple i think it's an orange and let's move this here into the mask and delete the old one i've selected the wrong one so here's a quick example of how you should make sure that you label these things right so this is my left i suppose section and let's call this our right section here for our right section let's drag in that image that we accidentally dragged into our left side beautiful and get rid of the right hand side one now that we've got this left hand image in here what we can do next is change the background for the actual box so i'm going to change the background here to the blue and then once again for the text we can grab this blue color we can grab about that same section here for the color so again we can do that it's just about here so i'm going to grab it the color and place it here and this gives us about the same sort of a contrast ratio between both text on both sides so this pretty much covers the first couple of bits of this design and so far we're going quite well i'm pretty happy with this so far here's what we're gonna take a look at next doing some client testimonials as a section and this section might also have something unique that we haven't done before which will be called auto layouts so what i'm thinking here well what i'm thinking is that we also need to label this group here so let's actually call this graphics design and for this here i'm just going to change this to photography all right now we can talk about the actual auto layouts that we're going to create as part of the testimonial section as before i'm going to copy over some of the texting that we used and move it down here into a new section which i'm going to group and call testimonials and what i'm going to do with this section here is call this client testimonials we'll have this as a header so we'll do auto capitalization and we might also center it so what i'm going to do is just center it here between our elements i might also change up the color here this color which is essentially black right now is a little bit too dark one thing that you'll notice is the document has its own colors here at the bottom and these allow you to pick from colors that we've already used throughout the document which is really cool we've got this great but i want to create a new one here and this might be like a 50 of this gray which is just over here and i think we'll do it as a light since it's quite a big section here but i want the focus on the testimonial rather than on the header then here we can actually grab our testimonial which we'll have we'll place one just here over to the left right now let me enter some text here that we'll use as the testimonial and let's also grab some images that we'll have in here too so for our testimonial let's just grab one image which we'll place down here and i think that should be enough to get us started this image doesn't look very good though especially as a square so i'm going to give it a bit of a border radius since it's 144 pixels i'm gonna do 72 pixels of border radius and that'll turn it into a circle which is great next let's give this person a name so i'm going to call them emily maybe r and we might change the phone here to row dies which is the same as our header font but we might make it a nice black so it stands out a little bit and let's give this some room from the top maybe 75 pixels so it's similar to where the text and the image meet and finally we might give this person also a job description i guess so let's copy over this element here and maybe give them marketing director as their job description i'm going to change the font back to barlows so let's put that in over here and we might also make it slightly more gray which is just over here for the font so that looks much better now i think and we've got our first testimonial so let's actually group all these elements together and i'm going to press ctrl g and just label this testimonial at the top left and now we can take a look at how could we create an auto layout from all of this content now to create an auto layout let's actually create two components that are quite similar which are these two testimonials let's actually change this second testimonial to look a little bit more unique by placing in thomas for example here i'll replace the image of emily and we'll update the styling here and the name thomas maybe something like thomas s beautiful now for this two testimonials we select both of them and we've got this option here on the right hand side called auto layouts we simply select plus and the auto layout has been generated it doesn't look like much it almost looks like a group but it does dynamically update on how you utilize it the first thing we can do is we can align it to essentially display all the items like a flex which essentially displays them to the right hand side we can display them downwards as well like a menu but it's up to you whether you want to display them downwards or to the right then we've got a gap here right now the gap is say 80 pixels but we can reduce this to 10 or 20 or even 0 but 80 is just about right for what we want for this purpose finally we have this section here where is the alignment we can align it from the right or from the left or even from the center i'm actually going to align it from the center and this means that as i increase the size for this auto layout everything is centered nicely if we align it to the top left we can see that this resizing doesn't have any effect but if we put it to the top right here we can see that this sizing is now happening from the top right this would happen the same as well if we increased it to the bottom right so essentially we can align it however we want but i find for general purposes centered is just perfect the next thing we can do now is add a third item here so we literally copy paste the testimonial and the auto layout basically creates the layout for us which is really cool and here we can add a third person for our testimonial i'm going to select this one of jenny here and you can tell that it's already been updated and now we just update our text as well and that's pretty much done the main thing here is that if we add or remove elements you'll find that essentially they can have an effect where like if we were to say just drag jenny in here it's sort of trying to place her in the auto layout so it's important that once you've created your components for that you have a strict structure of how you're utilizing them but for the time being i think this is a perfect example of how you can utilize auto layouts just to make the content look nice and good let's select our frame here and give ourselves a little bit more room by dragging it down what i want to do is create some images here near the bottom and i've got some images ready to go that we can place in the images i want to be able to use are just some generic ones so i'm just going to start dragging them in here and we'll essentially have them just before our footer content so let's grab a few nice looking ones here great next we'll put them next to each other and resize them to fit up essentially the page that we have so here they are and this one here doesn't seem to have fit in nicely so let's actually drag them outside of our frame make sure they're all good to go drag them back into our frame now that we've got them all selected we can just resize them down into the size of our frame here so this looks good we'll just give that a little bit more margin here from this testimonial section and finally we can create our footer so i'm going to just group these and call these photos or even gallery and create one more square here and this will be our footer here for our footer color i'm thinking a nice green so let's zoom in here a little bit and have a look at it and for the green i'm just going to use this 90d 4c5 color which is quite nice and we'll grab some of the text we've had here above and copy it into this footer section and what we might do is something simple like about services and projects now this text doesn't look very good so firstly let's grab the logo that we've had previously um i think we've got an example of the logo just here and let's actually change the fill color for this logo to something custom what i'm thinking is if we have an svg normally you can change the fill of the svg as well as its selected color and in this case i'm going to select the green that we have but we're going to grab a dark version of that not too dark but just a little bit darker then for these menu i suppose the footer menu here let's create an auto layout this time instead of just text so i'm going to create a button here which will essentially be invisible by being the same color that we have for the footer and for the button itself i'll place the text inside of there so let's actually grab the text here and type in about we'll move the text inside of the button and center it and then from this we can create an auto layout so we've got this auto layout here let's copy across the button to create a second one beautiful and then from this second button we also create an auto layout inside of an auto layout there we go so now we've got an auto layout of a button with an auto layout of a second button and we can copy that once more and we've got three now so the second one can be called maybe services and the third one here can be called projects and you can see that they dynamically update depending on how we're sizing them and whatnot as usual i like to size them to be centered so i'm going to do the same for each frame inside of here as well and this just means that if we were to for example change the size of the button itself the text here would still be centered which is a really useful thing so i always like that feature and finally for the text elements here i also want to change the color for them and in this case we're going to grab the same color that we're using for our logo here but just make it a little bit darker beautiful now that we've got this section done here let's add some social media icons that we have just ready to go here i'm just going to drag and drop them in and for these i'm just going to space them maybe just evenly here at the very bottom with about the same amount of padding that we have to our containers oh sorry our columns there so i think that more or less covers the footer the gallery the testimonials our different sections here and our header now let's explore some of the additional features that figma provides when you're creating a design the first one here is the visibility of each section we've got this little icon here and we can actually make it disappear as a section if we wanted to we can also lock it which means that we can't select it or move it anymore so this is useful after you've completed each section to usually lock them so that they can't be modified in case you accidentally start moving stuff all around which i've done so many times the next thing we can do is actually create a preview of this content by selecting the present button at the very top right what this does is essentially shows us what the page would look like if we're actually using it on a browser and this gives us a good idea of how it works and you can also even build out some prototyping here to test out different links and pages as well this is something we have actually haven't done but it is an example of something you can send to clients to preview as well now let's see how prototyping works when we've got different types of pages because whenever you're doing a website in figma you're not just gonna have the one home page you might have all the pages so i'm literally gonna copy paste our home page across and create a new page and this page might be something like about page for the about page i might get rid of all the content here and i might only leave the footer and let's move everything up a little bit and change this frame to essentially be much smaller so with this section now done uh all we're going to do is change up maybe the header a little bit so instead of having this image here i'm going to change the text here to about us we'll get rid of this arrow maybe we'll even keep the arrow but just shrink it down a little bit and finally what we can do it's a funny little facebook icon there um what we can finally do here is figure out why there is a funny little looking facebook icon remove that and create an about section so for this about section i'm just gonna grab some of the text we had earlier here and just copy this straight into our new frame uh we're going to have a look at the columns i've disabled the columns here but we're going to re-enable them and we can actually just align them here maybe to the center or maybe just here to the right and call about sunny side and then we can actually expand this text out full width we could write out a full page but i'm not going to do that this is just more as an example of what an about page could look like with that done we now can start our prototyping so for prototyping it's essentially allowing clients to feel what the page would actually look like if we were browsing through it and to be able to do that we've got this option at the very top right here called prototyping i'm going to select the home page here and i'm going to select prototype here we've got a number of options like interactions overflow behaviors and more what i want to do is create an interaction which will be a click interaction that'll do something but we need to select an object to create this interaction on i'm going to select it here on the about button we'll see that we have this little plus that's appearing so we can hit the plus and we can drag it somewhere i'm going to actually drag it to our about page and this pops up with our prototype interaction on click we'll navigate to the about page this is perfect we can also do a number of other things like add animation preserve scroll position but for the time being i'm just gonna leave that empty we can take a look at that later then i'm going to do another interaction here on the actual logo itself and i'm going to allow that to go back to the home page and close that off now we can click play on this interaction as a prototype and see how it works by selecting the play button here at the top right this play button here we can move across to essentially decide which prototype page plays first when we select to play the prototyping presentation so let's play now and take a look at what we get so it's loading up and we'll have our home page here and we can hover over our about button and when we do we can select it and it takes us to our about page when we select the logo on the left here it takes us back to the home page so prototyping is nice and simple it's almost like a web page and clients will love it if you're trying to demo your design content through figma on there we're nearing the end of this tutorial there is only a few more things that you need to know as part of it the first one is being able to export elements to be able to do this if we scroll down to the very bottom of our right panel we've got a tool here at the bottom called export this allows us to export things as a png a jpg i've currently selected the entire frame for the home page i can select to export the home page and this will pop up with a image of all the home page in one go so we can take a look at it we can also export individual sections or even individual items so for example if i wanted to go to the home page i simply wanted to export out the hero section i can mark that as exportable this time as a say png and export just the home page hero section here when i do we just get this one section here and this again applies if we wanted to just export say the logo by itself by selecting the plus sign on the svg here swapping it to an svg and selecting export logo this way when you're working with different assets from different people you can export them very easily or you can even provide them to a developer so that they can pull in all the assets they need to be able to build the page properly now that we're done i think this basically takes us to the end of this figma crash course for 2021. this is my first crash course into figma going over all the basics if there are things that you wanted to learn then let me know in the comments below and i can go into further details with maybe a part two to this crash course otherwise i also have enhanced ui which is designed for developers but it is essentially the fundamentals of design if you're trying to learn things like color theory and typography and how to pick the right imagery and do the right spacing so all of that i'll also add in the link in the description below because it's worth checking out i hope you guys enjoyed this video if you did hit like and subscribe otherwise i'll see you in the next one thank you

Channel: Adrian Twarog

Views: 31,912

Rating: 4.9617682 out of 5

Keywords: Figma Crash Course 2021, figma crash course, figma tutorial, figma, figma tutorial for beginners, intro to figma, figma in 40 minutes, figma 101, crash course figma, tutorial figma, introduction to figma, learn figma, figma learn, figma basics, how to get started with figma, beginners guide to figma basics, figma UI design tutorial, graphics design, ui, ux, adrian twarog, figma tutorial 2021, figma course, figma website, figma wbsite design, figma web design, figma design

Id: lg7w3Ntfqy0

Length: 47min 39sec (2859 seconds)

Published: Fri Jun 18 2021