Layout Grids Exercise

[00:00:00]
>> Take two minutes and just get a taste of this. And we have two frames that have some names, 2 columns, 36 pixel margins, 16 pixel gutters, and that ability to kind of like either adding the padding with 1 row and 1 column or the other way where you put a column in each side in top and bottom to kinda get those in place.

[00:00:23]
And then we'll do that together and then we'll look at how constraints and layout grids play nicely with each other. So our mission here is we had two little kinda mini exercises. So, 2 columns, 36 pixel margins, 16 pixel gutters. So again, that involves one grid in this case.

[00:00:50]
So we'll go ahead, we'll add a layout grid, and we will go ahead and switch that to columns where we want two of them. And in this case the margin is 36 and the gutter is 16, right? You'll notice that if you switch this to it's offset and not margin, but in stretch its margin.

[00:01:15]
So that will change depending on the context in which you use it. But generally speaking, it's the word that makes more sense for the context that you are in. All right, that was easy. So now we just want this idea of 20 pixel padding. Now you could theoretically use it, just a regular grid, right?

[00:01:36]
So I could change that to 20 and that will definitely make it possible to do 20 pixel padding on this div/frame/ what have you. The other way to do it as we saw before is if I only want that and I don't want all those intermediary grid squares, I can either make one row and one column or kind of do those different borders.

[00:01:59]
If I'm just trying to do the padding, a lot of times I'll do the one row, one column because it's half as much work, right? But if I need to do stuff like the navbars, that's when I'll do the kind of one row on the bottom, one row on the top.

[00:02:11]
Let's go ahead and we'll make this a row and in this case, we want to 20 pixels padding. So we take this down to one. And then we can do 20 on both sides here. And then I can go ahead and add a second one. Again, if you find yourself doing this a lot, it makes sense to save them so that you can go and just apply that again.

[00:02:35]
So we'll go ahead and we'll make the column, make one column, 20, great. And again, if you wanted to theoretically make them visually different, you can do that as well. And also if you need to hide any of them because you're like that's great for laying something out, but now I don't ever wanna see it again.

[00:02:56]
You can do that as well. Thing that I didn't think about until just now is day. Let's see. Well, they still snapper, they're invisible, I don't know the answer to that question but let's find out together. Now they're invisible, they don't do anything, cool, but they are visible.

[00:03:24]
You can see that it will now actually snap. And it's easy to kind of like align something with any of those grid lines, so on and so forth, yes.
>> How do you save the grids?
>> Yeah, if you wanna save the grid so let's say I love this grid, I wanna use it forever and ever and ever, you go ahead, you can do it as a save style.

[00:03:40]
So we can go ahead and we grab these, we got to decide what the term of art is gonna be for four little dots. You can go ahead and hit this plus sign, and you can give it a name of like 20 pixel padding. And this is useful for just communicating what the intended purposes, but go ahead and see everything in this case as well.

[00:04:05]
We'll create the style and now it's saved. So if I go ahead make a new frame right here and I go ahead, I wanna add a layout grid and click this again and look, there's my new 20 pixel padding grid. And there it is, and I can apply that to anything I want, and I can never set that up again, right?

[00:04:23]
And again, one thing we'll look at towards the end, is how to publish your libraries and styles. So you can say you have one file that is all of your kind of design system tokens and stuff along those lines, all the kind of foundational pieces, and then share that with everyone in the organization.

[00:04:38]
So then you can have multiple project files for various different things, that all have the same, this is the amount of padding we use around this, so on and so forth. And that's especially powerful when we get to components and variables and stuff along those lines 'cause then you can take, let's say you had 62 design files.

[00:04:57]
And you needed to change the border radius on the primary button for all of them, right? Then you can do that in the one source file. And there's a bunch of mechanics for people can opt in when they're ready for those updates to happen, so on and so forth.

[00:05:12]
But in a given file, as you start kind of finding the pieces that you use for lots of different things, for different shadows, colors, stuff along those lines. You can save them as styles and apply them all over the place.