Auto Layout - The Basics

[00:00:00]
>> And so when we use auto layout, we can actually have stuff like min and a max with. And layout grids are super good for getting the general shape and flow of the page. Towards the end, we'll see layout grids and auto layout together, but auto layout is like a feature that as developers we all know and love.

[00:00:22]
We know it at least whether or not you love it is a different I can't speak for you, which is auto layout is you can best think about like Flexbox, right? Is this ability to say, okay, stay in the center, stay along the edges. There's a lot of overlap with constraints but there are different features in each.

[00:00:42]
So what we'll do is we talked a lot about constraints and layout grids, right, now we're not gonna use them for a little bit. They will come back at the end, trust me. But first we are going to play with auto layout, which again, if the metaphor in your head is, that kinda reminds me of Flexbox.

[00:01:01]
Stay with that metaphor, it's a good metaphor. And there are lots of practical use cases and things you can do it. I would say for me 70, 80% of time, it's auto layout and then a certain amount of the constraints and layout grids for the overall frame of the application and stuff along those lines.

[00:01:20]
But a lot of the components that I'm building tend to use a lot of auto layout because that is, and it might just be my biases coming in as a web developer, and kind of writing code with CSS grid and nested flexboxes, right? But that kind of translates here as well, so let's take a look with auto layout.

[00:01:45]
There is a big list of little shortcuts. Like I said before, I will try not to use too many of them. The one that I will probably break the rules on is Shift A, but I feel like I can say that one out loud. Shift+A will just turn any frame into an auto layout frame, right?

[00:02:04]
But there are all sorts of lots of little things that you can do, including wordz on the keyboard that I will try to refrain from doing in front of you all. But kind of long and short of what auto layout does is, we kind of do it by hand, this little center area that I left for myself, we'll have a frame, and then we can grab somebody's avatars.

[00:02:28]
We'll just drop them in. Put them wherever we want. I'll use two different ones. Right, let's go with the third one. Cool. And so this frame is a normal frame. I can either go to the plus sign here and turn it into auto layout or I can hit Shift A.

[00:02:48]
Let's do it this way first. As you can see the size of the frame changed slightly based on the content in there. And again, everything you know from CSS, and HTML and JavaScript and the web, all of a sudden comes to help you here. So why did it change size?

[00:03:12]
If I hit Undo you can see it was all chaotic happening all over the place, so on and so forth. Hit the Auto Layout button, and it's a little bit more orderly now. They're all kind of in a line, there's uniform padding on the top and the bottom, at least uniform with each other.

[00:03:34]
And there's even spacing in between them. And so let's kind of look at all the things that changed. The width and the height of our frame change to Hug. That feels nice, right? You can set it back to a fixed width, and we'll talk about what that does in a second here as well.

[00:03:55]
Then we have this gap, right, horizontal gap between objects in the layer or items in this case. And that is very similar to the CSS property gap, right? Which is in a flexbox, the gap between the various elements in there. Then we've got horizontal padding, that does what you think it does, right?

[00:04:17]
That's the padding on both sides here. And vertical padding. If one was to hold down the Command key, I'm not entirely sure what it's on Windows, you can actually change all of them at once, kinda the same way you do it in CSS, where it's, what is it, top right, bottom, left.

[00:04:38]
Or if I want them all to be uniform I could say, cool, make them all 60 and it'll change both, if you just want to change the top and the bottom you can do those separately. But holding Command and clicking there will give you one value, I don't want to talk about how long it took me to realize that trick, and when I wanted to be uniform as doing the top, the vertical and horizontal and two separate inputs, you don't have to do that.

[00:05:01]
The padding again, we can say, I don't know, 24, so on and so forth, right? You can also adjust here as well. If you want to see the world burn, you can hit this button and actually do the individual padding here as well if that's the thing that you need, it's there for you.

[00:05:21]
Gap, we have all those things in place. Now, if we click on any of the layers inside of an auto layout frame, you can see that they have some new options as well. So we have two choices between giving it a fixed width or fill container, right? And so that's kind of with full in CSS, the same thing is true for height, except that unlike CSS, it actually does something.

[00:05:50]
So you can have it either expand and contract with the width or the height of the frame that it's in or keep its own set within a height. Why would you use each? Well, in the case of these three avatars, I don't want them stretching, right? But in the case of an input field or a search bar or the overall container of my navigation, obviously I do want that to stretch and contract with the container, right?

[00:06:18]
And so the effect that you're trying to get is the correct answer to that question. The other hidden feature of an auto layout frame is you'll notice that if you hover over the width and the height, there are now dropdowns. And again, this is the thing with Figma sometimes which is, if a feature is not there, you're doing something wrong, good luck figuring out what it was.

[00:06:44]
But it's not that the feature doesn't exist, it's a lot of it is contextual. So, if we went back to layout grids, I go to this, you can see no drop-down cuz it's not an auto layout frame. If I go into the auto layout frame, I get a drop-down.

[00:06:59]
See, what does the drop down do? Great question. If I click it, I can add min width and max width, right? Yeah, [LAUGH] the giggling in the room says everything you need to know about how obvious that feature is. So you can set a min width to say okay, it should be at minimum 320.

[00:07:22]
Cool, and then I can also set a max width of, I don't know, 640, right? And now, if I grab this I can only go to a certain width and height. Cool, so, this got a little bit bigger now, right? There's a bunch of options and things you can do here, for the actual Auto Layout frame itself we've got effectively cuz I if I did a pop quiz, which I won't do to any of you of a pop quiz Flexbox edition, right?

[00:07:59]
What is the difference between justify center and item center or line item center? Let's not play that game. But all of those basic features exist here in some way, shape, or form. So you could theoretically center them, right? And so now they will kind of always be in the center of the size of that container.

[00:08:18]
You can put them to justify end, justify start, see I could pass the test. There's, let's see, let's make this a little taller. Line items start, line items end, line items center. All those combinations of Flexbox play in here as well if one has dev mode. Now I'm in this file where I don't have the paid team, so we'll take a look at it later.

[00:08:44]
It will actually give you the CSS answers after the fact. Cool, the other thing here is the gap is currently set to 24, which is 24 in this point pixels, in between each of these. I can also change this to auto which will now be spaced between, right?

[00:09:07]
So now they will kind of be in between just like this as well, and trying to think what else, we will talk about this little fun one later. You can change it to flex column if you want, and that will now do it on a vertical axis. And again, same rules apply.

[00:09:29]
Or you can do it as a row. Cool, and we can center them, so on and so forth. As you can imagine, insofar that this is how we think about layout in CSS, you can see a world where this becomes a way that we would likely think about our designs too.

[00:09:46]
And this becomes where as a developer sometimes if you're working with designers that have use stuff like this, great, if not, this is where some of that lag it is on you to kind of educate. Because not only does it make it easier for the designers on your team, more importantly, it makes it easier for you when you get the design.

[00:10:07]
Because even if you don't have the dev mode turned on, just being able to see auto or the gap in there or something along those lines, right, makes the implementation part of the show weighs here. The few other little tiny things that we can do here. There are whether or not you want the strokes included, not the banned button.

[00:10:34]
I do want borders included in there and so figuring out by default. So, if we said let's actually change this from auto, let's say eight in between each of them, right? And we go ahead and we say strokes are included. I didn't do too much. I'll figure out an example works in a second, but it's basically, it's kind of a box sizing border box, right, do you take the borders in there or do you leave them out?

[00:11:05]
The other interesting one which is honestly, rarely uses do you want the first on top or the last on top? If you're doing uniquely something with these avatars like this, let's make this back to auto. It creates this effect, right? If you're saying, how many people are looking at the Google Doc kind of thing, so on and so forth.

[00:11:26]
And then by default, I almost always want this setting, right? Do you want the text in the center or at the baseline? I've never not wanted this setting. But if you do need the opposite, it is there for you. Tanner.
>> What is the difference between fixed width and Hug contents?

[00:11:45]
>> Yep, what is the difference being fixed width and Hug contents, fixed width lets you actually change the size of the frame. If we change this to Hug contents, you'll see that I no longer get the idea of auto, right? Cuz it's basically, hey, if these avatars are 100 pixels, and you're saying that we have 60 pixels of horizontal padding, well, and we have a gap of eight, one could check the math on this.

[00:12:17]
But you end up with, it'll take the size, it'll Hug the contents and become a size that fits exactly what's in there. And then, turns out, just like code, the problem is sometimes your code, or in this case Figma, is doing exactly what you asked it to do.

[00:12:37]
Not necessarily what you want it to do, but exactly what you told it to do. So previously, I had the stroke slash the border set to inside, right, which doesn't add anything to the width or height of the layer. But if you set it to outside, border would be, then and only then will it actually, can we go to this frame and take the auto layout, excluded, included, right?

[00:13:11]
When they were on the inside you could exclude or include, it didn't matter cuz they were inside. On the outside, then you can see the different effect. So, we've got those in place, and so how contents just changes to the size of the thing. And you'll notice that by definition, if I have contents and then I started clicking and dragging, it went to fixed, right, but if I double click, it'll snap back to Hug, right?

[00:13:41]
So if you don't wanna do all the distance all the way over here cuz you're on a 27 inch monitor. And what seems very small here is actually a lot bigger when I'm working at my desk. You can just double click or if you want to choose to change the size of it, great.

[00:13:59]
If you send her these, it'll just stay in the center so on and so forth. Cool, another example of where Flexbox becomes super interesting is consider the button, right? One way to make a button if you don't like yourself, is to go ahead and we make a rectangle, fill it with something, I don't know.

[00:14:26]
We take some text, we say, button, and then we drag it in and we center it. And I could get real fancy with constraints and all of those things. And I could get it centered and life could go on the way that I want. The other way that I could do this is I type the word, button, right?

[00:14:48]
It seems small, but it's only because I'm zoomed out a little bit, and I just hit Shift + A. And now it's in an auto layout frame. And it is kind of centered in there. It's kind of when you're implementing a button in CSS, sometimes you use inline flex, right?

[00:15:06]
It's kind of centered in there as well. So I can go ahead and now give this one a fill layer. What kind of button do we want? Let's go with an orange button. And we'll give it a border radius of, I don't know. That's too much. Eight, and then we take the padding here as well.

[00:15:32]
And we could say, eight and four, and now we get a button that kind of works all as one auto layout frame, the text will be centered. It's much easier way, and we don't have to adjust stuff and set up a bunch of constraints. If the button changes sizes, everything kind of works as much.

[00:15:54]
It becomes an uglier button. The design decisions you're accountable for, I'm just here to tell you how this stuff works. But it's a lot easier way to create a lot of very even simple things. And what's nice about this is, let me grab, I have some icons somewhere.

[00:16:12]
I'll just use an emoji. Sure that seems like a great one, right? And now because it's auto layout, if I wanted to create an icon button, right, I can just drag in that second object. That gap seems like a little much, so let's go and shrink the gap a little bit, let's say, It can do the kind of layout pieces like we would in CSS as well and create a button super easily.

[00:16:41]
So auto layout is great for making a nav bar, it's great for making a button. If you would do it in Flexbox and CSS, you should probably use an auto layout in Figma as well.