Introducing Figma: A Beginners Mini Course (2023 UI UX Design)

1. Introducing Figma: A Beginners Tutorial (2023 UI UX Design): Welcome to my Figma starter's guide for beginners. This beginner scores will guide you through creating your very first web design with Figma by creating a simple but a realistic looking homepage for Jim, I've been doing web design for over ten years now and right now I think Figma is the best tool for web design. So I'm excited to show you what is possible. And by the time you complete this course, you will be able to create your own websites with Figma by using the most essential features like automatically aligning things with auto layout or working with vector icons from other websites, editing images and working with global colors and texts. First, we will create the basic structure with shapes. Then we will work with images and social media icons. Then we will continue with creating all the texts layers. And lastly, we will combine icons and text to create more complex parts with auto layout, this is the right course for you. If you don't have the time to watch a ten hour course with all the features. And you just want to get started with your very own ideas within 1 h. And the only thing you really need to get started is if Figma account, but that is free because I'm going to provide you with all the icons, the colors, and the images. If you like learning by doing, by recreating something, then this course is for you and then I hope to see you on the inside. 2. Creating a Basic Structure on a 12 column Grid: Step is to structure of the layout. So look at this design. It has three sections. This first one, then the text section, and then the footer. And it's better to first create those three sections so that you're not going to focus on the details too soon because that's what designers like to do, but it slows down your progress, so let's just do that. So in your new file, we first need to create an art boards. So before we can start adding text and colors, we first need a frame. Frame is kind of like a beach. So you do that by creating a frame over here. So if you click on the frame, then on the right over here you can see a lot of options. The one I always start out with is desktop. So click on the desktop, that's 14, 40 pixels in width. And like I said, let's first create our three main sections. Alright, so what you're gonna do is you're gonna go over here, grabbed a rectangle, and then create a shape like this. There. You can drag the edges and make sure it's aligned to the top. Then we have an empty space over here. And then we have a footer at the bottom so we can create another shape from here, but it's easier to make a duplicate of this one. So hold Alt or Option and then click and drag, and then it will make a duplicate. Now you want to align it exactly in the middle. So here we're going to use our Align option, which is a lot nicer than just trying to make it fit in. So just click on Middle Align and then over here to the bottom, because that's what we want. And now we only have to drag this bar down and it's still perfectly aligned, but our design is a little bit short. So if you grep, your art boards were frame over here, that you can make the whole art board a bit longer. You can, by the way, zoom out by holding command or control. It's Alt or Control on Windows, I'm not really sure. And then just drag it down or you can simply change the number over here. I'm going to change it to 1700s, like this. Okay, so now we can put the food or again at the bottom with this tool and make it a little bit higher air for our top part, we also got to make it a little bit higher. We will do this overlapping part later because that's a little bit harder. But for now, let's just create a shape for our image. So now I'm going to grab a new rectangle like this. You can also access that by clicking on the R n and create a rectangle like this. Alright, but now where do we actually align it? That's a problem. So now we need to dive into the grids. So as you probably have noticed, all websites are based on a grid and some websites skill this grid, but most websites keep the content in a specific pixel width because otherwise the textboxes become too wide and it's not comfortable to read and we need to script to align our image. So let's just do that. I'm going to click on my art board over here. And then over here you can see layout creates, you can click on the plus. Over here, it creates a standard grid, but that is a horizontal and vertical grid. So click on this one over here, click on Columns because we just want 12 columns. 12 is the industry standard because you can easily create two boxes, three and 4.6, which is kinda nice. So we're going to use 12 columns. It doesn't do anything but you need to click outside of it to see the changes, would it on-center? Because now it stretches. Sometimes you want that, but for this design, I don't want that. So click on center, but then you need to tell Figma how wide each column should be. A common use size for this is 75. Why? Well, because then from here to here it's 11, 20 pixels, which is used in many builder tools like Elementor. So as you can see, whoa, whoa, I aligned it almost perfectly. One pixel, which is a coincidence. So that's kinda funny. So I'm going to align that to the grid. And I'm also going to make it a little bit wider like this, because I want it to stretch over six columns like this. And if you do that, you can see that it's exactly 150 pixels from this section. And from this section you can actually activate that by holding Option or commands and then you can see the pixels. So if you hover with your mouse, which is nice, okay, so now let's add some colors. I'm gonna go to the fill over here and I'm going to change the color to pure black because I want to use pure black on this website. And then you can go on this shape and also put it on black. But there's a trick here which you should know, which is the asset collars, because e.g. black is used in many places in this design. So you want to save that color so you can reuse it later. So now this one is black. Then you click on these four dots. It's called Style. And then you can add this color to the color styles, color styles over here it's gold set color assets in Adobe XD, it's all the same thing. It's global colors. That's what I actually think they should call it. So you click on the plus and then you'll give it a name, e.g. black. Alright, and you click on Create style, and now this one is saved. So if you didn't click on another shape, instead of just changing the color from here, you can click on the four dots again and then select your black. You can see a little bit easier for this one. We don't have to change the color because in our design does background is actually soft gray. So if you want to use the same colors as me, you can drag in the file. So I will share these files in the description below so you can download them. And then you can drag in my color if you want to, like this, make a little bit larger. So here are my colors is just a screenshot from my Figma actually. And then you can grab the background. So grab your art boards. Now it's set to white, which is f, f, f, f, f. So you click over here and now you can click on this tool. You can also access that by the way, by clicking, I click on this one and then you go over to soft gray and boom, there you click it. And I also recommend to also add that color to yourself. So click on the four dots again and call it a soft gray create style. So where are all these global colors, shapes. So you can access them by clicking outside of your art boards, just not in your design but outside. Then you can see it over here, local styles, and here are your colors. You can change them afterwards. So let's say that you want to change your black to maybe not 100% black, but a little bit softer than, as you can see, it changes in your whole design, which of course is awesome. We'll just put it out a little bit lighter like this. Then the last thing that we need to do is created this diagonal shape. That's also really easy to do. You can just click on this shape, then double-click it again. And now you can access the individual points. So you can grab this one and put it up like this. Yeah, that's something like our design. Alright, and then click outside, double-click it, and now we're done. So the basic structure is here. Let's now move to images and icons. 3. How to work with images and vector icons: So here's the image that we need. So you could drag in the image like this and then mask it like this. But what I like to do is just click on the image over here. And then instead of using a color, use an image as a background. So now this is connected to the global colors. I'm going to disconnect that click over here. And then you can select, instead of a solid, you can select an image. And now you can drag your image over here and then it masks. You even have some very simple editing over here. If you want to change the image a little bit, Let's just increase the opacity a bit. That looks pretty cool. And now your image is in here, but it's not in the right position. So if you hold Option or Alt and double-click there, you can reposition it like this. Make sure to hold shift so it scales proportionately and then put it in the position you want. Just look at our example. This is where I want him to be. But now we have a gap over here, so click outside of it. So what's beautiful about Figma is that you can have multiple layers within a fill. So now we have an image as a layer in a fill, but we can add another layer on top of it. So if you click on the plus, you can add a layer on top of it. So now it's a solid which is on 20% opacity. So if I increase the ad, you're not going to see him. But if we then go to linear, Just a gradient, then we can say we want to go from black to white. So this left one is on black 100 per cent, and this right one is on zero per cent. It doesn't look like it's on 100% because this layer also has an opacity, I'm going to change that to 100s. And now you can see that we're almost there. So I'm going to open my gradient again. I'm just going to grab this point and just position it over here. So this is pretty cool as you can see, two layers in one shape. We didn't have to group anything, and it's all here on the right. Alright, for this image, I'm gonna do the same. So I'm going to click over here, then go to solids image, then dragging my image over here and there she is. We can reposition it again, but I'm fine with this. So now we have two images. Let's drag in some icons. I'm going to go to my folder. I have three SVG icons over here, which are effector icons, and then drag them into your Figma like this. They're not all the same size and we want them to be smaller anyways. So let's just make one of them, Let's just drag it in over here. And let's just make that one a lot smaller for this design, I want them to be 30 by 30. So you can just drag it over here and then look at the numbers. Or you can go over here and then change the width and the height. So if you put this one at 40 is going to stretch. So if you don't want that and make sure this one is linked and then if you change it, it's kinda change the width and the height. So for now I'm going to put it at 30. Most gonna do that for these two, can select both of them by holding Shift, select this one, and then put them at 30. And now you can see that we have to treat icon's, drag them over here. And now we're going to use auto layout for the first time. This is the most amazing feature, I think in Figma. If you select all of them and you click on Shift a, it's going to create a grid. This is not a group. It's kind of like a group with love more features. So in a tool like Adobe XD, you would group everything. But here, auto-layout, a lot nicer because now e.g. you can do things like this. But like I said in the intro, it's vertical or horizontal. We also want these icons to be white. So if you go down over here, you can see what kind of colors we're working with for these icons. So I can put them on white. And I also want to add white to my color. So create a style college whites. And there we go. Alright, so let's add our icons to the grids. But our greatest gone. I did that by holding Shift G there. You can hide and show your grid or you can go over here and then use this eye over here. So make sure to add your icons over here. And we're going to work a lot more with auto layout in the next step, which is working with texts layers. 4. How to work globally with Text layers & Fonts: Okay, So let's add some texts layers. Let's just first start with the big ones. So this one over here, this one, and this one. So I'm gonna go over here. I'm going to select the T for the Text tool. I'm going to click over here and we're going to type fight like a champion. And here you can see the newest feature in Figma, which is autocorrect. Really cool. So if you're in your texts layer thick Mac and now auto corrected, super cool. The font that I want to use here is Sarah and then condensed. You can click over here all the Google fonts are automatically already loaded in. And then I want to use the bold version. I want it to be 123D in terms of size, and I want the text to be in capitals. That's a little bit hidden over here. If you click on Type settings, then over here you can put it on Uppercase. Alright, so now I'm going to decrease the width of the text layer because I wanted to break. As you can see, my design after like it doesn't do that right here, which I don't really like. So for now, I'm just going to click after the a and then click on Shift Enter to get what I want. But as you can see, the line-height is much too high and you can change that over here. Line-height, I'm going to put it at 90 per cent from any audit texts layers you want to use our higher percentage above hundred, but for big titles, it's less. It is also really depends on the phones, but that is what I found. Alright, so now let's just turn on the grid again so I can align it either way. I don't really see the red on this black background, so let's just also change our grid color. So I'm going to click on my art board. I'm going to go to the grid again, and I'm just going to change the color over here. It's, it's something we can actually see, maybe something like this blue, little bit intense over here, but we need to see it. Alright, that's a little bit better now we can at least see what we're doing. Okay? So I'm going to turn off the grid again with Shifts C, As you can see in my design, they've word champion is rats. So let's just make this word retina. I'm going to double-click it and then I'm going to click on the Plus, can change the fill to a red color like this, 100% opacity. I think color was more something like this. So okay, so now this text is read as well. Let's just now make a smaller version of this text. So I'm going to make a duplicate by holding Option or Alt like this. And now I'm going to change the size over here to 50 and the line height 110 per cent. Because if it's smaller, you need a little bit more space. Alright, in my design, this text is black, so I'm going to select this one. I'm going to create a fill and we're going to put it at black. And of course we're going to use our global colors. And this text is the same size as this text. So now we can also save this color our global phones. So in the same way, click on the four dots and then click on plus. And I call it something that you want, e.g. I'm going to call it a heading two because this big one is heading one. Make sure to click on Create style. And now you can see that it changed. So now if we make a duplicate of this text and we make it white, and we click outside of our art board, we can see our global font over here. And if we change it over here, so let's say we're going to change its line-height. Now it changes both of them. Alright, perfect. So click on the grid again. Sure to align it. Change texts, decreases with, and in our design the word next is rats. So let's try to select the rats. But as you can see, we haven't saved the rat. So we need to go back to this one. Then, this rat, we need to save it. So let's just go to fill style, click on the plus and then call this rat created a style. So now this text has red and white. I also haven't connected to the white as you can see like this. So now if you go to this layer and you select the next, you can click on white and then click on rats. And now this whole text layer has to global colors, as you can see, perfect. We have two more simple texts layers, which is this one and the menu. So let's just create that. Going to click on the T again, create a textbox like this. I want to base some Lorem Ipsum in. I haven't installed any plugins yet to do that. So I'm just going to use my Chrome extension. But there are ways in Figma to do this. I will make a separate video about handy plugins by the way, so Paste Lorem Ipsum text in. And now we need to detach the global colors because we want another style for our body and want to use the font. Answer is gonna be a lot smaller like 16, which is a good size for body fonts, the line height needs to be 170 because that looks better for body text. Color that I want to use is gray, but it's the darker gray for body text. You almost always want a font that is a little bit lighter because otherwise the contrast is too harsh. So what I'm gonna do is I'm just going to call our pick my color that I've prepared like this. And of course I'm going to add that color to the palette as well, gray, okay, we don't want all capitals, which has wanted to be normal like this. And we also don't want everything to be bolts. It should just be regular. Now, this looks like a great body texts. I also see that I forgot to change the texts. Turn on the grid again to make sure to align it on the grid. So this one on the left and then this one to the edges. I'm going to add a enter over here to make it a little bit more readable, and then never forgot to add the fonts to your globals. So over here, or I can do that. And we're calling this body texts created the style. This one. I also haven't connected that, but of course we're going to use the heading too, because this one is also on heading two. Alright, let's now go to the menu because that's the last step before we're gonna go to the combinations of I can send texts and we're going to use auto layout for that. So let's just copy this one with Alt or Option. Let's make it white. Let's detach the heading two because we want to make a new style. This one needs to be 16. Alright, this is a styling that we want, so I'm going to add that to the steles. Again. I'd always a little bit of work in the beginning, but you're going to thank me later for this. Okay? I'm going to call this menu, okay, now I'm gonna change this to home, but this textbox is a little bit too wide. So if you double-click over here, then it just becomes a single item. Okay, so I'm going to create some other ones, can now select all of them. But if I try that my image is kinda moved. So in this situation like this where you're working on a background, I will suggest to grab your background layer, then right-click and then lock or unlock. Or you can do Command Shift L. And now you can just easily select your layers like this. Click Shift a again for auto-layout, and there it is your menu. What's also great about all our layout by the ways that you can click and then change its positions. And it sticks. As you can see, it's really, really nice. We want 30 pixels in-between. Alright, I'm going to position it and we need some space for the button. So for now I'm just going to leave it right here. And then the last little detail that I forgot to add is this little line over here. I've just used the rectangle tool to be honest. So click on the rectangle, create a little rectangle, and then select the two reds like this. And I made my title a little bit smaller. That's actually all I've done. Okay. And this is all we need for now. Oh, and I also forgot one other thing and that is on the bottom over here, we have terms and conditions and privacy. These are just two simple texts layers with the body font. So you could just click T and just type in privacy policy. Make sure to pick your body font like this, voice it over here, make a duplicate and change yellow one. Makes sure to both align them in the grid. We're going to Auto Layout them later, but for now, this is all we need. Okay, it's starting to look like something. So let's just go to the next step where we're going to take it a step farther with auto layout. 5. Using Auto Layout to create layouts that auto adjust: Okay, let's now finished our menu with the logo on the left and the button on the right. And we're going to drag in this Eigen that we're going to use. I'm going to drag it, Let's say outside of here, I'll first make it white because otherwise we can see it and then drag it in over here, make it a bit bigger. Then I'm going to copy my title, change the texts. I'm going to make it 30 to this icon. I want that to be red. So right now it's white. I'm going to make it rats. And again, select both of them, make an auto layout of it. Now we want to create our buttons. So in most other tools, you first create a background and then you put a text on top of it, then you group it. But in Figma, this is a little bit different with buttons. So I want to use the same textile over here, but when I duplicate this one with common D, it's going to stick inside of this frame, which is not what I want. So you can simply click and then drag outside of it. And now it's free from the auto-layout, change it to sign up. Now turn this one also into an auto layout with Shift a, and then it's going to add this box. You don't see it yet, but there is a box. Let's make the box visible by giving it a fill. So I'm gonna go to Fill, I'm going to give it a red background. And now you can see the box. She can see this frame only contains attacks. It's kind of like a group, but then a little bit different. But the beautiful thing about this is that you can increase the horizontal padding like this and a vertical bending as well, I think tennis, alright, we need another button over here. Let's first position it. So I'm going to turn on my grid again and we're going to position it and I want to make sure that it's in line with the logo. And also, I want this one to be a line so you can try to do it yourself or you can just select all of them and then press Auto Layout again. And now it's automatically aligned in the middle. But we don't want a menu over here. We want this space to be less. So here you create another auto-layout because by default it will space out all the items evenly. If you then select this one and this one given orally out again with Shift a. And then you can decrease this size two, e.g. charity. And now you can decrease this size or you can just drag the side over here and then make it wider. But that does not work. Why? Well, because there's another tool you should know and that is a little bit hidden. It's under here. If you go to advanced layout by default is just stacking or packets. But if you put it on space between that, it will automatically create that space within the box. So within that container, There's actually works the same way as the container does. So now we have this one which is the horizontal container. We have this one which is horizontal and also has some gap in-between. And then we have this whole container which just sees the right part as one part and then the left part as one part and it creates as much space as possible in-between. So now, if we decrease this, as you can see, it's skills perfectly. Okay, let's now add another button over here. But hey, we've already learned that we can reuse things. So this is the same for the button. So I'm going to click on the button again, double-click it. And now we're going to use this feature called components. So if you click on this icon, it creates a component and in components is a reusable elements. So this works similar to global colors and fonts, but it's not saved in the same place. If you click outside of your art board, it's not saved over here. They have it over here on the assets. So here you can see desktop, we have this button. So now it's better to direct the button from here into our design like this. And here you can see if you go back to the layers, that this is a frame. Now it has this shape which shows that this is a component, but this is not the main components. You can always find the main component by right-click and then click on go-to main components. And if you change this component because this is the main one, then the other one will change as well. So let's just try it out. If I'm going to increase the size, as you can see, the other ones skills that as well. So let's just do that. Let's just put it on 30, make the button a bit bigger, and that works perfectly. So let's now auto layout to this section. So what do we see here? We have this part, this part, and this part, which are aligned vertically. But if we select all of them and press Comment a, then it's gonna be stacked vertically. So you need to go step back with common z, d is two parts, needs to be horizontal. So I'm gonna make an auto layout of this one first and then Figma already sees that it's horizontal. And now Figma sees this as one elements. So now we can take all of them and press Shift a again. And now we can change the values over here, and then it does what we want. Alright, let's align this in the middle. I want the image to be the same size, so it will just resize that. Okay, that looks pretty good. Let's just do one more exercise with auto-layout because this is so important. Okay, So in our final design in the footer, we have this icon over here and then e-mail, and then the terms and conditions and privacy over here, we're going to use the same trick. First, we need an icon. And an icon is not part of this folder because I wanted to show you something. So if you go to, I can find there.com. There's a beautiful website. You can take a look at their packages. They have beautiful icons over here. But if you just search over here, e.g. to email, you can find all kinds of icon's. Not all of them are free, but a lot of them are free. So this one, e.g. that one looks nice. So by default is on PNG, but you can go to SVG, which is vector. And then if you click on Copy over here, you go back to your Figma and you based it. It's already there and you don't have to save it on your computer first is beautiful. So let's just change that to white random kinda put it in the footer over here. I need a text layer for my e-mail info at Box champion.com. Okay, so let's now add auto-layout to this whole section. First, let's select all of them, but now it's also select the background. So I'm going to lock that background again. Select all of them, shift a, that doesn't work. So we need to create a box over here and a box over here. So this one in auto layout, this one in auto-layout, and then these two boxes in another auto-layout. And then as you can see it perfectly Alliance as well. Show that again. This one already was in an auto layout. If you want these two to be aligned in the middle, you also select both of them and auto layouts, perfect, right? These two don't need to be in an auto layout. You can do that, but I don't think that's necessary. So now we're done with most of the basic things. Now we're gonna go through the harder Spark, which is this one over here. This is the hardest one. 6. Creating a floating icon row with Auto Layout: So we need to go to the website again and we're going to search for fitness. I can e.g. I'm going to grab some cool icons. You can filter on the left for free. By the way, here we have a free one beautiful copy. Okay, now I have three icons. Let's first, I'll make them the same size. I'm going to select all of them. Make sure to link this one and then I'm going to make them 45. Alright, that looks decent. But as you can see with downloading icons, sometimes they don't look the same because this one looks a lot bigger. So sometimes you just need to change it a bit. Use your eyes in order to create something that looks a little bit similar. Okay, so we also need to treat texts, which is another one, It's 24 in size. So let's just do that. I'm going to create a text layer. Let's just start with this one because I think it looks similar. Unlink it 24, that looks good at that. Again, we're going to add some random text over here. I'm going to make these texts rats. So now you're probably thinking like, hey, we need a rectangle over here, but we can use auto layout in the same way as we used in the button, which is pretty cool. So first, we need to put everything in an auto layout. But if we're gonna do that right now, it's going to be in one row. So this is a vertical row, this is a vertical row and this is a vertical row. So three layouts, then all of these three also needs to be in an auto layout because I'm going to add auto-layout over here. Alright, now we can add the same kind of background as we did with the button. So I'm going to click over here and then click on whites. You can see it adds a background. And now if we increase the padding, you can also create a box like this. Our grid again by holding Shift G and I want it to be middle aligned. So first I'm going to do that, then we're going to move it up a bit by holding shifts, so it goes straight up. And now if I increase the padding, it starts to skill from the left, but I don't want that. So there's another trick over here and that is constraints. So if you put a constraint which is now on left, on center, and now you start to increase the padding. Now this is what happens. Now it doesn't move to the right, which is kinda nice. We want it to be as white over here. If we also change the space between or the element gap than the sites also become bigger because this is the padding, so it always keeps 200 pixels. First, decide how much space you want in-between the icon's. So e.g. 120, and then decrease the size in order to make it fit. Zoom in a little bit to make sure it's on the grids perfectly. Alright, now, Shift G again, and there's one more thing we need to do to this part and that is a shadow because I don't know if you've noticed, but there's this soft, very nice shadow under disbarred. So I'm going to click over here and we're gonna go to a new feature called effects. Click on the drop shadow is to first feature. There are a few other ones, but for now we're just going to use drop shadow. Click over here to change it. We need to increase a blur. So click over here and an increase of blur, make it really nice and soft. And for the color, I want to use rats maybe a little bit darker. As you can see, this is starting to become really beautiful. I'm going to also put it a little bit down, increase the blur again. Oh, this is so cool. I'm going to decrease the opacity because it's a bit too intense. But now as you can see, it starts floating. And there's a really nice contrast between the white background and this gray background with a red shadow in-between. Look at that. Absolutely beautiful. So let's now compare this design to our final design. And we can see that there are still a few differences. This image is a bit taller than the texts, which is nice, it creates some balance. So let's just do that as well with our design. But if we just go over here and we make it the higher by holding Alt, by the way, you can do both sides. We don't actually have enough space for that, so we want to move to food or down, but this layer is locked and these are two separate layers. So I want to show you one more thing and that is to use the constraints again, but then in a different way. So make sure to find a layer four on the food or because you can't click on it and you can see this one is locked, so let just unlock that. So now we can add a footer again, select the footer if you press Shift a is going to create an auto layout. Again, I don't want that because then it changes the padding. So in this instance I would use a group. So just right-click and then group or Shift G, and now click on the group. And then over here on constraints, click on this one over here because that change is this one to bottom. And that means that whenever you are going to change your art board, this one will stick at the bottom. So now if we click on our art board, you can see that our footer just sticks to the bottom, which is nice because it happens a lot of times. You're making your page longer and adding elements. So if you know that your footer and some layers needs to be at the bottom, just group it constraints bottom. And that's really nice. I'm going to make it a bit longer. And then I'm going to grab all of this, going to make that auto-layout again to make sure that this one is aligned in the middle. And there we go. And then there's one more difference. And that is the background. Why does this one look better is because of the background. So you can change the background color off your whole Figma if you want to. So if you just click anywhere outside the background over here, you can change that as well. And that's what I did, and that's why that one just looks a little bit better. And also the icon's ICR a little bit thicker, which unlike a little bit better. So as you can see, it's super similar to our design. So this is my first basics class for Figma. I wanna do a lot more fig my classes, but I hope that you liked this first one. You can check out my profile to see more classes because also explain how to build websites. And for now, I want to thank you for watching.