Tablet Layout

[00:00:00]
>> The interesting thing is how layout grids and constraints play nicely with each other, right? So this is an example that we kinda talked about in the very beginning of this little section, where I've got effectively two columns in my grid and I've got this idea of a top bar and a bottom bar and a little bit of spacing going on.

[00:00:28]
So if we look at the amount of grids in this one, I've theoretically got three grids, those two columns that are gonna stretch based on the size of the container, right? So they grow and shrink with the container. And the one row is effectively, we'll take a look at the margins in a second.

[00:00:47]
But I'm saying the top bar and the bottom bar are 48 pixels, right, whatever. You choose whatever you want. And then this one in the middle stretches, and it's got a margin of 80 which is the 48 plus 32 for the spacing before it starts. And the reason that I had that math in my head is because I originally did that math, right?

[00:01:18]
And you can get the number like that, you do not have to sit there, I used to sit there with a pencil and paper before I realized I could do that. And there are other tools where you can't type in the numbers and they now drive me insane cuz I'm used to this.

[00:01:27]
So, yeah. And 20, 24 pixel, gutter, choose whatever you want. You can kind of do the math as you need to. Awesome, so we've got that in place. It's effectively for grids, but it's starting to look like a website layout despite the fact that if I turn the grids off, it's actually secretly an empty frame, right?

[00:01:49]
But it's got the kind of structure that I eventually need. And what I wanna do is take kind of what I had before in those earlier examples and create something that now works with two columns, because all those constraints, if you're just in a frame with no grid, the constraints follow the frame itself.

[00:02:07]
If you've got layout grids, the constraints will actually work with the layout grid and the column that they're in. And then it'll be either top-left, bottom-right or whatever, of the actual layout grid that you're in, right, which gives us a lot more flexibility. So I'm going to go ahead and I can kind of re-implement something similar to down below.

[00:02:27]
And these are the new and improved ones that we kind of built in the previous section, right? They expand as one would think, similarly with this as well. Cool, and you don't see any constraints in them yet because they're not inside of a frame, right? You had to put them in a frame that doesn't have auto layout.

[00:02:46]
We haven't talked about auto layout yet, so don't worry about it. They have to be in a frame to actually see any of the constraints. A lot of Figma's tooling is context specific. So if you're in something that doesn't support it, you don't see it. A lot of times what you're looking for probably involves a bean in a frame.

[00:03:03]
If you're trying to select all the same properties and you see that grayed out, it's because it's just in this empty void of a space, not inside of anything. Cool, so let's start with the navigation because it's not too much different from what we did before. And go ahead, and I can drag this in.

[00:03:26]
And we change the size of this, but that's fine. And so one thing is you notice that my navbar, because I was playing around with the size of the tablet smaller than the completed example, I can't really get to that edge of it. If I turned off Clip Content for a second, I can then see the edge of it, and I can go ahead and drag it in.

[00:03:49]
And this has the constraints in place that are keeping all of those little icons where they ought to be, right? Cuz if you look at these icons here, they are, go up one, two, notifications, they are, they're in actually an auto layout. Cool, so I've got that in place now.

[00:04:11]
I wanna set the constraints here. So top and to the left, I know that I want left and right. All right, so that's doing what I want. We'll do the same for the bottom navigation. And again, having these grids in place, now I don't have to guess, cuz again, these are the right size because I know that.

[00:04:30]
But if I was just trying to draw new frames, knowing that I don't have to measure 48 pixels cuz I have a grid setup is great. So here we go. The other thing you can do is if you just click this right here, it'll set it to the bottom as well, if you don't wanna do the drop down.

[00:04:50]
You can hold Shift and then do the left and the right. There's things that are muscle memory. As soon as I have to say out loud, I'm like, what do I hold to do that? [LAUGH] I used to, like, when I'm trying to teach, just do this motion with my hand and be like, you just do that.

[00:05:06]
And I'm, like, realize that doesn't make sense anyone. So you can hit both sides by holding Shift and you'd get the left and the right. Now, again, like we had before, our navbar works. Now where the magic happens here is we can grab these posts, right, and I can go ahead and drag that in.

[00:05:28]
And we can get it aligned. So up along the top there with that where that grid starts. Got this one is what, no. And we'll go ahead and put that in place as well. And you can see that this one is a little bit too small. Of course we put that in the grid as well.

[00:05:55]
Make sure that's all aligned just right. Cool, everything snaps, where my grid happens to be in place. Now let's make this one work as well. Cool, all right, so they're roughly the same size now. Grab these other two. Pop them in here. It's okay if it overflows slightly.

[00:06:34]
We'll deal with that in a second. Like a lot of times you don't mind it overflowing, cuz if we're setting up a prototype that has scrolling, that's like slightly intentional. Cool, so we'll pop that in there as well, align it all like that. And get that in place now, because I was resizing them all willy nilly.

[00:06:52]
I could select all four of these. And you can see that the heights are mixed. Let's say, I don't really know what I want the height to be, let's say 420. Cool, I don't know what they were originally. And then I can space them out evenly. Now with this, because I could have multiple and they might flow, it's a little bit trickier because the height could change depending on the content.

[00:07:19]
But I could theoretically have a grid that had the rose as I would want as well, and maybe we can try that out in a second. But generally speaking, we're trying to get the kind of feel of a page in place. So now with these, now they're in, they're kinda snapped into their grid columns, right?

[00:07:37]
And kinda see as well. Especially if you kinda scroll in, you can kinda see, Let's snap them all into place. Sweet, cool. Awesome. So what we're gonna say here is we want them to kinda behave like a webpage, which is don't grow if we got taller. But definitely if these columns expand, right, I want them to kinda grow with the width of the column, right?

[00:08:24]
And stay where they are in terms of the height, but grow with the width of the column. Cool, so let's go ahead and do that. So we can grab all four of these. And we're gonna say again that they have left and right constraints and they should stay at the top.

[00:08:42]
So I chose to center them, but I think the other important part with the layout grid is two things. One thing, most primarily, and I'll show you a second thing in a second, which is that trying to get to the right side. Imagine now if I had five columns, right?

[00:08:58]
I don't wanna get to the right width of each and every one of these things having Intermediate points that I can stamp stuff to. In this case the columns are centered, and so I used a center constraint on the items as well, and that actually gives me the effect that I want super easily.

[00:09:12]
There is one edge case that I have to deal with here. And that is the idea that I can get too small. And that's not great. But we can see ways to handle that when we get to auto layout, which is gonna make this a lot easier for us as well.