0 1 00:00:00,120 --> 00:00:02,710 In this video, you're going to practice alignment. 1 2 00:00:02,760 --> 00:00:08,670 You're going to create a very simple design in Figma. And you're going to submit that in an assignment, 2 3 00:00:08,670 --> 00:00:11,030 after this. It's a follow along video, 3 4 00:00:11,030 --> 00:00:12,810 so fire up your Figma. 4 5 00:00:13,020 --> 00:00:15,630 Okay, so we're not going to design anything useful. 5 6 00:00:15,690 --> 00:00:20,300 The purpose of this exercise is to practice alignment and gain some hands-on experience with Figma. 6 7 00:00:20,310 --> 00:00:27,160 We are going to sketch a hero section of a web page. Sometimes also called a header or above-the-fold. 7 8 00:00:27,180 --> 00:00:32,780 We're not going to do anything fancy. No images, no text, just bunch of rectangles. Sort of like a doodle. 8 9 00:00:32,790 --> 00:00:35,540 So what's the first thing we insert, when we start any design? 9 10 00:00:36,240 --> 00:00:36,810 That's right. 10 11 00:00:36,810 --> 00:00:43,260 Frame. As I've shown this in Figma tutorial, we can add a frame by selecting the frame tool and then 11 12 00:00:43,260 --> 00:00:46,370 selecting one of the presets from the properties panel. 12 13 00:00:46,370 --> 00:00:48,450 Now, let's select the desktop frame. 13 14 00:00:48,450 --> 00:00:51,950 Next, we're going to define our grid for this frame. 14 15 00:00:51,960 --> 00:00:52,380 Why? 15 16 00:00:52,380 --> 00:00:56,910 Because we want to structure our websites in a way that it looks neat and organize. 16 17 00:00:56,970 --> 00:01:01,580 Setting up a grid in Figma is very simple. Grids apply to each frame individually. 17 18 00:01:01,620 --> 00:01:07,940 So, we need to select a frame and in the properties panel we will get an option to add a new layout 18 19 00:01:07,950 --> 00:01:08,310 grid. 19 20 00:01:08,310 --> 00:01:09,720 Don't forget to select the frame, 20 21 00:01:09,720 --> 00:01:11,350 otherwise this won't show up. 21 22 00:01:11,370 --> 00:01:17,760 By default, we get this two-dimensional grid that divides a frame in little squares, that are 10 pixel 22 23 00:01:17,760 --> 00:01:18,450 in size. 23 24 00:01:18,480 --> 00:01:19,920 But this is not the grid we want. 24 25 00:01:19,920 --> 00:01:24,000 What we want is a vertical grid, that divides the page in several columns. 25 26 00:01:24,060 --> 00:01:30,750 The most widely used layout grid in web design is 12 column grid. Why 12 columns? Because it divides really 26 27 00:01:30,750 --> 00:01:38,440 well. 12 is a multiple of 3 and 4, so 12-column can be split in half with 6 columns on each side. 27 28 00:01:38,520 --> 00:01:44,370 It can be split in 3, with each part being 4 column wide. Or it can be split in 4 with each part 28 29 00:01:44,370 --> 00:01:49,530 being, you know, 3 column wide. Other layout grids will offer less options. For example, 10 or 8 29 30 00:01:49,530 --> 00:01:55,920 column grid can't be split in 3 equal sizes. So, it's very limiting. To apply a 12 point grid, from the 30 31 00:01:55,920 --> 00:02:02,310 dropdown, select columns. And in the count, type in 12. 31 32 00:02:02,430 --> 00:02:07,920 Now, let's adjust some spacing of our grid. The content on the website isn't usually laid out on the edges, 32 33 00:02:07,930 --> 00:02:08,620 right? 33 34 00:02:08,700 --> 00:02:14,650 There are margins on the edges of any website and the content is sort of laid out in the center. 34 35 00:02:14,730 --> 00:02:17,630 We can apply those margins to our grid right here. 35 36 00:02:17,670 --> 00:02:23,220 Something like 140 pixels should be fine. If we increase the margin, you can see how columns start 36 37 00:02:23,220 --> 00:02:24,080 to shrink. 37 38 00:02:27,060 --> 00:02:31,100 One more thing I'd like to adjust here is the spacing between the columns. 38 39 00:02:31,110 --> 00:02:35,760 This is called The Gutter. By default, it's 20 pixels, but for me it's not enough. 39 40 00:02:35,760 --> 00:02:42,330 I like to create a bit more separation between the objects, around 30 or 40 pixels. Alright. 40 41 00:02:42,490 --> 00:02:43,030 This is our grid. 41 42 00:02:43,060 --> 00:02:46,230 I'd like you to create the exact same grid, with the same values. 42 43 00:02:46,230 --> 00:02:52,500 This is where we're going to layout our website content. The grid is an overlay, 43 44 00:02:52,510 --> 00:02:58,190 you cannot select it with your mouse. And we can show or hide the grid right from here. 44 45 00:03:00,510 --> 00:03:02,010 There is a shortcut next to it. 45 46 00:03:02,010 --> 00:03:05,940 It's showing for Mac, which is CTRL+G. On windows, 46 47 00:03:05,940 --> 00:03:10,410 it's probably something else, but you'll be able to see it if you are on windows. 47 48 00:03:14,050 --> 00:03:14,680 And there. 48 49 00:03:14,680 --> 00:03:17,080 That's where our design will go. Next, 49 50 00:03:17,080 --> 00:03:21,100 I want to give this frame a background color. For no particular reason, 50 51 00:03:21,100 --> 00:03:23,220 just for fun. How do we do that? 51 52 00:03:23,220 --> 00:03:29,830 Remember, for any object that you want to edit, you have to first select that object. Properties panel 52 53 00:03:29,890 --> 00:03:32,270 instantly updates as you select it. 53 54 00:03:32,350 --> 00:03:36,390 And now we have an option right here, to change the background color. 54 55 00:03:36,400 --> 00:03:41,830 This is a very standard color picker, that you'd see on nearly any other design or none design application. 55 56 00:03:41,830 --> 00:03:48,100 Later we will learn color in more detail. And also I will show you how to work this color picker like 56 57 00:03:48,100 --> 00:03:48,590 a pro. 57 58 00:03:48,610 --> 00:03:53,000 For now, I'm just going to select a color that I have already saved here. 58 59 00:03:53,050 --> 00:03:57,590 You can pick any color you prefer or keep it white, if you would like. If your background color 59 60 00:03:57,970 --> 00:04:00,220 and the grid don't have a good contrast, 60 61 00:04:00,220 --> 00:04:07,050 you can always adjust the color of the grid. 61 62 00:04:07,210 --> 00:04:08,370 See that's much better. 62 63 00:04:08,380 --> 00:04:13,630 Now, let's start laying out some general elements, that we would have on a standard website. 63 64 00:04:13,630 --> 00:04:18,060 Remember, we're just doing a super simple wireframe, so we're going to use just rectangles. 64 65 00:04:18,070 --> 00:04:23,740 What do we have on top of every website? A navigation bar. Which usually contains a logo and some links 65 66 00:04:23,740 --> 00:04:25,630 to different pages on the site. 66 67 00:04:25,660 --> 00:04:29,260 Let's draw a rectangle, that's going to be our navbar. 67 68 00:04:29,320 --> 00:04:34,290 You'll hear me sometimes use a word navbar as a short for navigation bar. 68 69 00:04:34,380 --> 00:04:35,770 I like being precise, 69 70 00:04:35,770 --> 00:04:39,850 so I'm going to change the height of this rectangle to 70 pixels from here. 70 71 00:04:39,850 --> 00:04:44,650 The H is a value for the height. And the W is the value for the width. 71 72 00:04:44,650 --> 00:04:50,560 Here's a quick tip, if you press your keyboard arrows up and down, while being inside this field, you 72 73 00:04:50,560 --> 00:04:53,680 can increase or decrease values just like that. 73 74 00:04:53,680 --> 00:04:59,470 And if you hold shift at the same time, instead of increasing the value by 1 pixel, it will increase 74 75 00:04:59,470 --> 00:05:00,670 it by 10 pixels. 75 76 00:05:01,070 --> 00:05:06,790 Okay, let's give this navigation bar a slightly darker color. So one more time. If we want to edit an 76 77 00:05:06,820 --> 00:05:12,190 object, we select it and we will have all the properties in the panel right here. And we can change the 77 78 00:05:12,190 --> 00:05:15,310 fill color of this rectangle from here. 78 79 00:05:15,310 --> 00:05:18,990 I'm going to make it black, but I will make it transparent. 79 80 00:05:19,000 --> 00:05:22,600 This slider here changes the transparency of the color. 80 81 00:05:22,600 --> 00:05:24,860 This is commonly called opacity. 81 82 00:05:24,880 --> 00:05:26,700 You've probably heard this term before. 82 83 00:05:26,710 --> 00:05:30,760 Also, you can set the opacity from this percentage box. 83 84 00:05:30,970 --> 00:05:32,920 Let's set it to 20%. 84 85 00:05:32,950 --> 00:05:39,070 This is a little design trick. To maintain the same color palette, you can use black or white overlays 85 86 00:05:39,100 --> 00:05:40,750 that are semi transparent. 86 87 00:05:40,750 --> 00:05:45,910 As a result, the background color spreads through it and you get a color that is part of the same color 87 88 00:05:45,910 --> 00:05:46,620 palette. 88 89 00:05:46,630 --> 00:05:48,940 Next, let's draw a logo on the left side. 89 90 00:05:48,950 --> 00:05:52,540 We're going to draw a rectangle as a place holder for the logo. 90 91 00:05:52,540 --> 00:05:56,890 Here is where the grid starts to come in play. When we start drawing objects, 91 92 00:05:56,890 --> 00:05:59,710 we are going to place them within these grid columns. 92 93 00:05:59,710 --> 00:06:04,990 Our options are either to fit in 1 column, 2 column, 3 column and so on. For our logo, 93 94 00:06:04,990 --> 00:06:07,480 we have an option to go for 1 or 2 columns. 94 95 00:06:07,480 --> 00:06:11,100 Let's go with 2. The grid makes our decision process much simpler. 95 96 00:06:11,110 --> 00:06:16,330 We only have to decide between 2 sizes, instead of deciding between hundreds of different pixel sizes. 96 97 00:06:16,930 --> 00:06:23,110 As you resize objects, you will see these smart guides, that appear when your object aligns to the edge 97 98 00:06:23,170 --> 00:06:28,000 of the grid column. That will help you size them precisely. 98 99 00:06:28,540 --> 00:06:30,000 And let's change the color. 99 100 00:06:30,040 --> 00:06:31,090 The color is up to you. 100 101 00:06:32,800 --> 00:06:38,410 Another thing I want to do is to make this rounded rectangle. To do so we'll need to change what's 101 102 00:06:38,410 --> 00:06:40,940 called a corner radius. 102 103 00:06:40,960 --> 00:06:42,830 I want it completely rounded. 103 104 00:06:42,850 --> 00:06:48,280 This value will depend on the dimensions of the rectangle, so just increase it until it's fully rounded. 104 105 00:06:48,280 --> 00:06:52,270 It doesn't matter if you get a very weird value. 105 106 00:06:52,270 --> 00:06:53,840 That's our place holder for the logo. 106 107 00:06:53,840 --> 00:06:55,580 Now we need navigation links. 107 108 00:06:55,600 --> 00:06:57,730 I'm just going to duplicate this box. 108 109 00:06:57,760 --> 00:06:59,380 There are a couple of ways you can do that. 109 110 00:06:59,410 --> 00:07:05,580 The most obvious way is to go CTRL-C and CNTRL-V or CMD-C, CMD-V on the Mac. 110 111 00:07:05,610 --> 00:07:09,250 That's going to paste it right on top and then you can drag it from there. 111 112 00:07:09,250 --> 00:07:15,920 But my favorite way to duplicate something is to press Alt, or Option on Mac, and then drag that object. 112 113 00:07:15,940 --> 00:07:23,070 That's going to duplicate the original object. Let's make this 10 pixels smaller and fit it into 113 114 00:07:23,070 --> 00:07:28,100 1 column only, to make it look a little more like a link. 114 115 00:07:28,170 --> 00:07:34,930 Now, let's drag a few more of these and align them with columns. Red quick guides, help you with alignment. 115 116 00:07:35,010 --> 00:07:36,920 However Figma can also do the 116 117 00:07:36,930 --> 00:07:38,190 aligning for you. 117 118 00:07:38,190 --> 00:07:41,730 First, we need to select the objects we are aligning. 118 119 00:07:41,730 --> 00:07:45,640 You can just drag a cursor around your objects. 119 120 00:07:45,660 --> 00:07:49,470 Now we can align these object with one of these options. 120 121 00:07:49,500 --> 00:07:53,640 You can probably recognize the shapes from the previous lesson. 121 122 00:07:53,640 --> 00:07:57,820 The first option will align objects to the left. And, but you know, 122 123 00:07:57,900 --> 00:07:59,240 that's not what we want. 123 124 00:07:59,250 --> 00:08:03,530 We want this option, to center objects horizontally. And alright. 124 125 00:08:03,690 --> 00:08:04,930 That's our navbar. 125 126 00:08:04,950 --> 00:08:09,360 Now for the rest of the content. OK, what do we have on our hero section? 126 127 00:08:09,390 --> 00:08:10,510 A headline, right? 127 128 00:08:10,710 --> 00:08:14,880 Again, let's duplicate this rectangle and make it look more like a headline. 128 129 00:08:23,250 --> 00:08:27,750 After the headline, we usually have a paragraph explaining the company or the product. 129 130 00:08:28,020 --> 00:08:30,600 Let's draw a little something that looks like a paragraph. 130 131 00:08:35,520 --> 00:08:35,780 Alright. 131 132 00:08:35,780 --> 00:08:38,830 That's our paragraph place holder. And after the paragraph, 132 133 00:08:38,840 --> 00:08:42,920 We usually have buttons asking us "to sign up", "learn more" and so on. 133 134 00:08:47,720 --> 00:08:48,870 And that's our hero section. 134 135 00:08:48,900 --> 00:08:49,890 Let's see how it looks 135 136 00:08:49,890 --> 00:08:50,610 without the grid. 136 137 00:08:53,620 --> 00:08:54,170 That's it. 137 138 00:08:54,170 --> 00:08:59,870 A very simple exercise to get you started and comfortable with Figma and practice beginning steps of 138 139 00:08:59,870 --> 00:09:01,010 web design. 139 140 00:09:01,030 --> 00:09:04,860 We created nothing useful, but we took a very important step. 140 141 00:09:04,880 --> 00:09:10,970 Jeff Bezos the CEO of Amazon loves this Latin saying, "Step by step, ferociously". 141 142 00:09:11,000 --> 00:09:13,070 This is how we're going to approach this course. 142 143 00:09:13,070 --> 00:09:17,840 We're going to take one step at a time, leading us to the final goal ferociously.