Layout Grids

[00:00:00]
>> But this only works with the general idea of a frame and its bounds, right? A lot of times, a lot of our designs have some idea of a grid system or some amount of padding that we need to be aware of as well. And Figma has some tools that help us with that as well.

[00:00:20]
And they are called layout grids. And layout grids and constraints actually overlap and have a lot in common as well. But let's go ahead and just play around with some to get a sense of how they work. So I will leave these for you to implement in a second.

[00:00:37]
We'll have some challenges in here as well. But I'm gonna go ahead and just make myself a fun little new frame that we can play around with. So I'll hit the F key to switch to the Frame tool and I will draw a frame. Yay, here's a frame.

[00:00:50]
So over here we can add this idea of layout grids and hit the plus sign. And at first it will go ahead and it will create a grid. Seems great. That's what it says on the tin. You can go ahead and click here and you can change the size of the grid.

[00:01:06]
So right now it's 10 pixels. You can change that to whatever you want. This color, you can change it. That's the red lines, they're red. You can change it to blue if you really want. That's the opacity of them. You can add multiple grids, right, two 10 pixel grids don't really do much for me.

[00:01:25]
Let's go ahead, we'll change this one to like, I don't know, 25, make it nice and weird. That's unhinged. And we can change it to blue. And you can see you can layer multiple grids on top of each other. Don't do that. There is a time and a place for why you would do that.

[00:01:43]
I don't tend to use the grid so much unless I'm kind of like trying to do, honestly pixel art, which I do. But generally speaking, when I'm trying to do layouts for websites, cuz I like to make money, there's a different kinda grid that I use. And so we can go ahead and create a grid.

[00:02:03]
And if you click here, this is very subtle, but it's the drop down menu. You've got columns. Now that looks a little bit more like what I'm used to having to implement, and then rows. And there's a time and place for both of them, and sometimes literally for both of them.

[00:02:21]
But let's actually start with the columns real quick, right? This will give you some amount of column layout. The other things that you can do is you can give it a margin. So I can say hey, we want 48 pixels on each side. This was a lot smaller than I thought it was.

[00:02:39]
So let's actually say 16, right? So now you've got some margins there. You can say that they should stretch to fill the entire width of the frame, you can give a gutter, and so that's the space in between, so I'll make this 8. There's less space in between each column.

[00:02:55]
If I say 24, there's more space between each column, right, depends on what you are trying to do. I can change this as well, I can say instead of stretch, put them in the center, and then I can give them a width as well. Stretch is going to kinda evenly divide them up.

[00:03:12]
But if I know that I just want five columns in the center, I'm gonna make these like, then no matter what, if I change the size of this, they stay the same width, they just center themselves. And if for some reason I want to put them to the right or to the left, I can do that as well.

[00:03:31]
I'm gonna be honest with you, never done it, never had a reason, it's either center or stretch for me. And you can put those in place. Now, the other useful thing that you can do with a layout grid is it might seem insane to you. But you know what's really useful?

[00:03:50]
One column or one row, right, allow me to demonstrate. And so let's say we make one column, right? I lied, I use left and right and top and bottom all the time. I'm about to show you. I just never did it with multiple columns. Okay, so we can make one column and then I can also add another grid, and we'll make this one a row, and we'll say one row and we'll get give it the margin.

[00:04:20]
What did I say, 16 before? All right, and you can see what I kinda did here is I gave myself the ability to have a certain amount of padding in place. Now, if I give myself another frame, let's give this a color. I don't know, anything works. Not red, ideally.

[00:04:40]
Green, right, you can see that the same snapping that we had against frame edges works against our layout bridges. Also, if you had the five columns or the however many rows it'll work there as well. And so you can get a sense of snapping it into the padding, so on and so forth.

[00:04:58]
So like there is a time and a place for one row and one column. The other thing that I will do sometimes is the exact opposite of this, right? This is where I just said that I was a liar. So we can take the one column one row, and let's say hypothetically I had, I don't know, a top navigation and a bottom bar like I did in the previous example.

[00:05:25]
What I'll do in that case is I might say top, and I'll give it no offset and a height of, let's say it's a 48 pixel navbar. And I might make a second one at the bottom. So for instance, I can go ahead and make one row, Put that at the bottom.

[00:05:50]
So 48, right, so now I have the idea of where I could put the top nav and the bottom nav without having to get the pixels right. And this could be theoretically a reusable layout grid that I use, especially if this was more iPhone size, then you could see a more device sized.

[00:06:09]
It becomes a very useful kinda way to lay out that top nav, the bottom nav, and get everything in place and set up the constraints. The other thing that you can do, and we'll talk more about styles later, is that you can theoretically then save that. Like hey, we know that the navbar should be this tall and the bottom bar, cuz it's harder than you think.

[00:06:30]
You're like, I make webpages, 48 pixels, whatever, rems. All these devices, though, they have notches and cameras and curves and stuff. So it's not actually one has to do the math to know it's 88 pixels from the top for the iPhone 15. I don't know why I know that, let me tell you, it's the hard way.

[00:06:53]
So you can create the different layout grids so that you basically don't have to remember how far down the navbar has to go. You can kind of lay out these things and things will snap in place, and they're nice guides, and you can save them and use them later.

[00:07:07]
Awesome, and then you can put something there and it'll totally work.