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