Nesting Auto Layouts

[00:00:00]
>> So we've learned a little bit about auto layouts. And like I said, we could go all the way. We could turn each and every one of these buttons into an auto layout. We could do every card into an auto layout. We could go all the way, and it would be a lot of me doing the same thing over and over again, which is maybe useful, but not great television.

[00:00:19]
So let's kinda just look at how we could take existing things that might be in a mock-up, and convert one or two of them into an auto layout. So in this case, we have these tabs, right? And each one of these is they've separated the background from the actual text.

[00:00:39]
But we saw with the button before that we can easily take two shapes and create an auto layout out of that. So I could theoretically kinda zoom in a little bit here and select these two and hit Shift+A, and you're like, no, what happened, right? Well, the default in a lot of cases is to do the hug contents.

[00:01:00]
So we go ahead, and as much as I love a good hug, let's see, we can stretch it out just like that again. And we're gonna have to do this for all three of them, but it effectively looks the same, right? And we can actually take these two as well.

[00:01:14]
I'll do them both kinda at the same time. They're the same color, but they're different rectangles. And we'll go ahead and we'll change these to fixed, and then I will kinda stretch them both out as well. So each one of these tabs is now an auto layout, very similar to what we do with the button.

[00:01:34]
If I changed the text, it would grow or shrink along with the text, cuz this page, when it appears on a desktop browser, are kind of like tabs as we know them and love them. So in that world, we might want them to expand and contract, right, especially as we get into making reusable components, right?

[00:01:53]
Having ones that behave the correct way on both mobile and desktop is somewhat important. And then we can take this overall frame, hit Shift+A again. You see it moves slightly, we can adjust that. But now this is an auto layout tabs container with these three tabs. And if I took one of these, I held Alt, I can just add another tab.

[00:02:15]
Now, that does overflow a little bit in this case cuz it's growing, cuz that's the way auto layout is supposed to behave. If I took kind of the entire frame here, let's see if I can actually do it. So I just turned the set of the five high level tabs into an auto layout itself.

[00:02:34]
So we'll zoom out, which is kinda the way the divs stack normally in the browser. So now if I go ahead, and we can grab one of these. There we go. We'll kinda add it in there. You can see that the entire layout just moves down as well, right, so each one of these.

[00:02:54]
And we can go ahead we can make the navbar that space between auto layout. I wonder if I just take this one real quick as well, cuz I wrapped this one in a frame earlier. It was just two kind of two flat shapes laid on top of each other.

[00:03:12]
Earlier in the course, I took each one, and I made it at least a frame, which means I should be able to do the same here. Now, sorry, I could do this with each button. I can go on and on and on, but now I could theoretically, let's do play me.

[00:03:30]
We gotta get the whole frame in this case. So grab that course card. And now you can see that my layout just kinda grows along with the content. And again, I could take this through all of its natural conclusion, right? If I turned even the card into an auto layout, I could write more texts.

[00:03:46]
It would grow and expand. Everything would shift around as I would want it to, right? So the actual kind of pieces as well, you'll notice that I have that problem that we solved in the constraint section earlier where it won't, in this case, grow. But I can at that point also, for these higher level pieces, have them either fill the container.

[00:04:07]
Yeah, let's go for it, actually, in this case, and you could see that they start to fill out. This is not an auto layout, but I can begin to take the same approach all the way through. And the term of art that we would use is responsive, right?

[00:04:23]
Would I need to theoretically, to Omar's question earlier, maybe have a slightly different layout for as we get to the bigger sizes? Yeah, but in a lot of cases, that's the same way we're writing a lot times custom CSS for various breakpoints. We do something similar in design.

[00:04:41]
That said, there is something to his question still that we need to address, right, this idea of reusable pieces. If I can make styles for the header here, and I can change this color from primary 400, and I can change it to this one to a different color, but you'll notice the other card doesn't change.

[00:05:02]
We would want them all to kind of ideally all sync up, so we'd make one change to one card. I can change what this color means. I could change all the primary 400 to a teal. But I couldn't necessarily. I'd still have to do each one of these by hand, right?

[00:05:15]
Clearly, if there's a little voice in your head going like, this seems like a solvable problem, you're right, it is a solvable problem. And we will begin to solve it in about two sections. First, we're gonna kind of just go all the way a little bit deeper with these nested auto layups.

[00:05:33]
So one of the examples we talked about before is this ability to build a navigation bar, right? And this can become super easy once we have auto layout, but there's a few auto layouts going on here, right? If we take a look at some various implementations of a navbar, well, that's an auto layout right there, like you're given navigation items, right?

[00:05:57]
But then even in the context of larger navigation bar, also an auto layout. You can have auto layout. It's like, I heard you like auto layouts, so I put auto layouts in your auto layouts, right? You can begin to build up more sophisticated components by kinda taking all of these techniques and beginning to combine them.

[00:06:13]
We'll kinda basically take that to its natural conclusion in the kinda last half of this course. So if we wanna implement something like this, we can go ahead. Let's start with a frame. And let's see, I think it's 48 pixels. We can adjust it later. It's not a big deal.

[00:06:33]
48 in height, 1024 seems good. I have some various pieces that I can use in here. So for instance, I could start by just taking one of these and drag it in there. And right now, we're not using auto layout. It's kinda just floating around. One of the tricks is the closer you get it to how you want it before you switch to an auto layout, the more Figma will do for you, right?

[00:07:00]
And so as we saw before, if it's kinda in the center of the button, it will guess. When we had that 17 in between each one of those navigation items, it's like you must want a space of 17 in between each one of these items, like totally, right?

[00:07:15]
The closer you can get it, the better off you are, in a lot of cases. So let's go ahead, and we'll give this a height of, in this case, 48. We'll kinda center it in there a little bit, right? Maybe we could even make it smaller, I don't know.

[00:07:30]
Let's make it 40. Yeah, we can always adjust all of this later. Nothing is really set in stone. These are all right now just individual words that we can bring in. They are in a quick little group, just so I can move them around easily. But if we wanted to kind of pull out each one of them, it's just a group.

[00:07:54]
It's not even a frame at this point. So let's kinda bring it in there. When we turn it into an auto layout, it'll become a frame. My groups don't really do anything. You can't have any kind of spacing between them, or they're just a very simple way to collect things if you're trying to move a bunch of stuff around.

[00:08:11]
But we'll see if we can turn that into something a second. And let's grab some icons, which ones make us happy? Let's grab the account one. I should copy it instead. Notice I started to drag it, and I was like, I wanna copy, so I just held down Alt or Option.

[00:08:30]
And it's like, you wanna copy, cool, cool, cool. And we'll go and grab the shopping cart as well. We'll put it over there. Now, the important part is if I just hit auto layout now, it's not really sure what the hierarchy is. We know intellectually that this is a piece.

[00:08:54]
That's fine, that's a frame in its own, right? This is a group, in this case. If we had them all individually, that would be cool, these should all be roughly the same thing. Let me even them all out. That's not really the design we're going for, right? And so the trick here is to begin to kind of think about the actual hierarchy in the same way you would do it with your components in React, Vues, FELT, what have you, right?

[00:09:18]
So we know that these two icons, okay, that's the thing. Let's go ahead and hit Cmd + Opt + G, or Ctrl + Alt + G and put them in a frame, these as well. I'm curious to see what will happen if just leave them in the group.

[00:09:33]
I could ungroup them and put them in a frame, but let's find out together. So we can go take this navbar. I'll hit Shift+A and turn it into an auto layout. And not bad, it's definitely top aligning everything, but we can fix that super easily. We can center everything, and I can also do space between.

[00:09:53]
So these nav items are still a group. They're not auto layout themselves. This is just a frame with two items. And it's not auto layout, so if I drag things into either one of these two sections, that will not behave like I would like. But the actual overall navbar is presently an auto layout.

[00:10:10]
So let's go ahead and let's see what happens if I stretch this out. How does it behave? Not bad for the very beginning, right? You'll notice that these don't stretch out, or anything along those lines, cuz again, it's not an auto layout if I dragged in an extra word, right?

[00:10:24]
So for instance, if I take this one, let's make a copy, and let's take one of these icons and make a copy. If I drag these in, you'll notice that if you see that little blue cursor, it's gonna try to put it in the layout with everything else, right?

[00:10:39]
So we have one auto layout for the navbar, but there are kind of these child auto layouts, if you will. So let's bring that back out again. So now we can grab this group, And let's hit Shift+A. And now you can see it is now a frame instead of a group.

[00:11:00]
And now I can drag this one in, and it behaves pretty much like we would expect, and then we'll turn this group. Again, I can also hit the + sign here. This is now an auto layout as well. And like I said, we can add things. Everything's kind of shifting around, as we would expect in the appropriate place.

[00:11:21]
Just want the word create. And I can pull that out. I made a copy, wee. And everything shifts and readjusts like it would in the CSS. This is great for thinking some stuff out. I can go ahead and grab a search bar as well, and let's toss that in there.

[00:11:46]
Might be a little bit too big in this case, so let's, There we go. All right, so now this is getting a little bit squirrely in this case. This is set to fixed width. We could have it just fill a container. Now you can see if we've got the space between, right?

[00:12:06]
Our hierarchy is still not great in this case, right, cuz it's giving equal spaced to all of these, right? This naturally just takes up a whole bunch as well. So things that we could do is we could theoretically adjust any of this. I can tighten this up a bit.

[00:12:24]
I could put these in an auto layout as well and kind of have the space in between these two items, cuz then we'd have three elements in here instead of four. See what happens. These are both in here now, and let's shrink that down a little bit as well here.

[00:12:44]
We can go ahead and kind of adjust accordingly. But everything will be laid out in that kind of just general sense as well, and you can kinda play out. These are still pretty spaced out. So if we go in here, we could say okay, these should be 32 apart.

[00:13:01]
All right, we don't need three icons, so let's go ahead and take that one out. And we're starting to get more and more what we're going for over here. And the nice part is you don't have to sit there and measure things. You can basically say here are the rules.

[00:13:16]
I will group things, kind of adjust the space in each kind of nested child group and get more and more sophisticated layouts as we go along in this case.
>> Do you recommend to adjust it from up to down when you resize, or do it in a head?

[00:13:34]
>> I'm not totally sure. A lot of times I will put everything in there roughly just the normal non-auto layout way first, and let auto layout start with the guesses, cuz I'm just kind of just placing stuff in an unsophisticated way. And yeah, if I have them aligned, it'll work a little bit easier.

[00:13:53]
And then most of the time, one of the questions earlier too was, generally speaking, you have some amount of standardized measurement. So Tailwind will have a certain p2 is 4 pixels, or 8 pixels, or whatever, right? And you'll have these standardized units that double. So you wouldn't just have arbitrary numbers in there.

[00:14:14]
You start out with okay, things should either be 2, 4, 8, 16, 32 pixels apart, something along those lines, and start out with those just general rough places in there. And then you can kinda tweak in the auto layout as you need it.