Auto Layout Exercise

[00:00:00]
>> So we've got a few different exercises. One is to kind of play around with this side nav. Both in this case the items themselves, just like that button can be auto layout. And then also the navigation itself can also be auto layout two. And then, we'll look at in a little bit like the idea of creating a menu bar.

[00:00:19]
But your your mission at this point is to kind of like take this frame which is just a regular old frame, and we want to do is either take these menu items. Or if you wanna create your own, here's the component pieces and you can kinda create nested auto layouts which we'll kinda get into more in a little bit.

[00:00:36]
But and create a sidebar that kind of like stacks up appropriately, you can make them all go to the top. You can have them go in the middle, whatever you wanna do, and we'll play around with it together in a little bit. So back to the main event, we wanna make this frame an auto layout frame.

[00:00:55]
So Shift-A, we'll do that. And you kinda see that this panel then magically appeared if I hit undo, it's gone. If I hold this I hit Shift-A, it's back. I can either create my own or drag these in. So let's drag that in. And this one is set to hug contents, right and if I wanted to make that affects the way they can either choose to drag it get a little bit taller or not.

[00:01:21]
This auto layout is set to align top left which is justify start aligned start. And then we can drag in another one. And what's nice about this is I don't have to lay all that position I was doing before. I don't have to do I just drag them in, right, and then what I can do is I can go ahead and adjust the spacing and then all space out evenly.

[00:01:49]
I could theoretically, depending on what I wanted to do, align them down to the bottom, we'll kind of nav them building. The real trick that we're gonna kind of explore in a second is, just kinda like flexbox, one flexbox is great. Do you know what's better than one flexbox?

[00:02:05]
Lots of flexboxes. I heard you like flexbox, so I put flexbox in your flexbox, right? And so, these could, right now these are just kind of positioned as well. So I can go ahead and I can make these, flexbox or, sorry, auto layout, Freudian slip, as well. And so now these are auto layouts inside of an auto layout.

[00:02:33]
Now they do need a little love in this case coz they have some amount of overlap coz we've changed things. So what we can do is here we accidentally as it tried to calculate what the pattern should end up with negative eight, which is not what we want.

[00:02:49]
So let's go ahead and turn that eight, so now I've got spacing in between each of these. Okay, next, what's wrong with these? They're kinda not aligned correctly, this is where we can go ahead and let's say start into the center. Starting to the center, starting to the center now also, you can't see coz there's no stroke on these bullets.

[00:03:13]
Like you can kind of see if I just hover over them. They're all kind of different with, which I guess isn't bothering anyone except for the fact that it's absolutely bothering me and probably all of y'all. So what we can do here is now, for these nested ones, we can say that their job is to fill the container, right?

[00:03:34]
And so now they'll stretch out to be a width of 100% in CSS term's. As well, and then we can go ahead and say that each of the, let's say I don't really want too much top padding there. I like the left and the right, so we'll keep that as well.

[00:04:01]
And so now yeah, we can put the flexbox in inside of the various flexbox things as well. Let's say hypothetically one of the situation where settings was at the bottom, but we wanted notifications and experiments at the top, right? So what do we do about that. Well, I know how to do one of them, right?

[00:04:19]
I can say fill container, and then I can set this one actually to be top and center. Now, this would be problematic and like if we were implementing because this was entirely be clickable, right? And you can be what if I want experiments and notifications at the top?

[00:04:37]
You're like, well, just big settings, the big one, no, right? The answer is more flexbox or more auto layout. See, I slipped again, which I can take these two, right? And I can Shift-A them, right? And so now this is also an auto layout, but they set the fill container.

[00:05:02]
Yeah, let's make our menu bar the source of truth. So now, this one can also go ahead and fill towards the top. So these are each individual clickable regions if we implemented this in the DOM, right? But this whole section will then fill up all expanded space. So basically, that's got to hide a fool and it pushes the rest.

[00:05:27]
Now, if this one was also set as well then we get into all the fun of playing and messing around with flexbox, let's not do that. But basically a lot of times you can create very complicated not the right word, sophisticated, how about that sophisticated makes us feel better?

[00:05:41]
Sophisticated layouts with auto layout. And as developers, in a lot of ways you're like, I don't know much about design. You get a head start on this one because you do this day in and day out as you're laying stuff out in the DOM. And basically that mental model completely applies here as well.

[00:06:03]
A lot of times we can get all of these various effects by taking that same intuition in CSS and applying it to Figma and one auto layout is great. A lot of times, like auto layouts inside of auto layouts will get you a lot farther. Things like a menu bar where like, can you think about the Safari or Chrome not chrome console that was towards the bottom.

[00:06:24]
But where the location bar is in the center but kinda expands and retracts with the window, but you still have the back and forth buttons. And then the other extensions on the other side, you can kinda do those layouts simply by having a bunch of nested auto layouts that then kinda expand and contract based on the width.

[00:06:41]
And you can even set a max width and a max height here as well. So, let's just do that, and then we'll move into, I'm slightly stepping into auto layout part two, nested auto layouts, but that's fine. We'll do a deeper dive in a second. But let's set it, if I want the min-width of this navigation bar to, let's say 180.

[00:07:01]
We can say the max width is, 360 in this case, maybe that's a little much for a navigation bar. But you can see now it's got a, and if this was inside of a container as well, then you could also then choose to say fill contents, but it will never grow past its max width, right?

[00:07:25]
And this will become really important for us a little bit when we try to do like responsive components. Like, okay, have a card that's vertical until it gets to a certain width and then kind of switch into a horizontal format, right? You can say fill container, but have a max size and we can use that flex wrap and do a lot of really, really interesting things.

[00:07:43]
That kind of feel a lot like implementing responsive dynasty assess, but we can do that in the design. And this is kind of the thing I was kind of saying the very beginning. Like using similar approaches and both the design that match up with how you'll go about implementing it, makes it easier to implement, right?

[00:07:59]
If all of a sudden the design has a bunch of responsive design flexbox concepts, when you get that design, translating that into the actual implementation becomes a lot easier. Because the kind of mental framework is already there for you.