Auto Layout

[00:00:00]
>> I think that's like a really good segue though, into our next topic, which is this idea of like, auto layout, right? Which again, there's a question here about like, copy figma grid to a CSS file. Let's say let's see what happens when we have inspect. I'm not totally certain what we're gonna get but let's see.

[00:00:22]
This one we don't seem to have much in the way, this is the overall grid in this case to work with. So, I don't know if we can like get as much help as we did with some of the other pieces for our grids. Like we might be a little bit on our own in this case.

[00:00:38]
But let's look at something that is kind of related to this idea of like flexible things to figure stuff out, right? Which is kind of the theme of some of the questions that I'm seeing right now, which is this idea of like auto layout, right? Because we kind of got there a little bit with our constraints, but we're still placing everything in there.

[00:00:57]
But in my CSS we have a bunch of things that will kind of like we determined some rules and it lays stuff out for us, right? Which is again like looking at the chat right now theme of some of the questions so let's talk about a little bit which is, let's say I wanted to have a sidebar well like.

[00:01:15]
I don't know I could grab some things. And I could try to arrange them. And I can use that trick that we saw in the very beginning of the course. And also just happened to be distributed nicely. And I can like tuck them in. And if I wanted to switch these two we saw with the dots I can go in like, grab that and try to flip it with that one.

[00:01:36]
There are ways to do this and I like don't it, right? It's somewhat tedious. Auto layout is incredibly powerful especially if you're coming in with the like, paradigm of like a software engineer who has been developing for the web, right? Like a lot of times we just say some rules.

[00:01:59]
Like, if your brain immediately jumps like some of the questions were like about CSS grid, like if as I show you some of this, your brain starts thinking like, that's like flexbox, right? And nowhere in the figma UI is it using the word flexbox or CSS grid, but if your brand jumps to that, that's like let it go there, right?

[00:02:18]
That's a useful metaphor for our term for our case of like kind of figuring some of these pieces out. So, If I can grab any given frame that has some stuff in it, I can grab on that doesn't have stuff in it too but ideally this is more useful if it has some stuff in it.

[00:02:37]
And let's take a look some real quick, we'll see that these are they've got about three pixels between it. Let's just change that to really purposeful value of 17. We would never purposely use, unless we're just feeling extra chaotic that day. But let's go with 17, just to make a point.

[00:02:57]
And we'll grab this frame, we'll go to design, and we'll hit auto layout. And you'll see that it's shrunk to the size of these components, and again this is where the flexbox metaphor works, space in between items, that sounds somewhat familiar. You can set the various margins and padding around the items and then like the alignment, right?

[00:03:22]
Now in this case if you look, I purposely set that to 17 before you can see by default figma did its best to figure out the rules for how my auto layout should work. It's like you add a bunch of things evenly spaced out by 17 pixels. You probably want a spacing of 17 pixels.

[00:03:42]
I don't, but it wasn't wrong for assuming that because I did it to be chaotic to make a point, right? And so I can say, okay, 17 pixels. If you can have some padding, right? You can kind of see that you can almost I'm holding and dragging this case.

[00:03:56]
You can adjust the padding too, you can actually grab anything in here now, hold on let me grab one thing I could just literally flip it around like this, right? Because it is saying like cool it's effectively a flexbox in this case. This is a collection of things, they all have like a gap of, how many pixels I have it set to these days.

[00:04:19]
And in this order with effectively like a flex start I can this case are all the right size but so this doesn't matter I can set the margin, effectively like it's very much like what we think of from CSS. And now if I add more items in so I just like, grab settings, hold on let me grab it and I just drop stuff in.

[00:04:48]
And it'll all just rearrange and lay everything out for me, kind of like as we would assume that it might. This is powerful in a lot of ways, it's powerful for a list, navbar menu, you could see it being really useful like, cool. We just wanna add a thing.

[00:05:02]
I don't wanna sit there and like distribute everything all over again every time I'm like, changing like a word or imagine like, think about if you had to handle it out. Your navbar and then you just change one word, right? Like yeah, maybe you got that grid in those constraints perfect and everything works.

[00:05:21]
But chances are you're gonna have to do some amount of like readjustment and that's no fun. But it's useful and powerful in a lot of other ways, as well. So, yeah, you can see and you can adjust all of these things. I'm just gonna play around some settings as well just to kind of experiment.

[00:05:37]
I can change the direction. Let's just move this real quick. And now it's almost like a navbar in this case, right? I just said instead of flex column, flex row, right? And it automatically lays everything out just as I might expect. I can go switch that again. The other powerful thing, right now it's sorta set to hug contents.

[00:05:59]
That's when you saw it shrink down when I first set that auto layout it's like cool the frame itself like just gives up and says whatever is in it that will determine my width and height, right? Not unlike CSS but we have a few other settings here I can say it's actually got a fixed width, right?

[00:06:20]
And what we'll do here is we'll go a little bit. And in this case you can see that they're centered I can do almost a flex justify start with flex end. I can also do space between where it'll spread them out just like we would in flexbox. If we go into inspect, you can see that it does in fact, in this case like it didn't before with our layout grids, it didn't like try to figure that all out for us, but in this case it is such a similar paradigm to flexbox.

[00:06:54]
That in this case like, yeah, it will actually give us at least the beginnings again, I wouldn't just copy and paste it and throw it in there. But you can like again, because like as I joked before, like, who amongst us hasn't visited that one CSS tricks article?

[00:07:11]
Reminding us some of the different terms in flexbox. And so yeah, we'll go ahead and we're going again, in this case, I'm gonna just change it to column again. Because now it's got a known width and height and I can change in this direction. And again, this is space between as the setting that we have right now.

[00:07:32]
And again, I can like grab one more thing, toss it in there and everything automatically readjust. This is incredibly powerful. Let me show you one more way in which it is powerful. Who doesn't like to make buttons? Right? One way that you might choose to make a button is you make a rectangle like, y that like meme of like, there's the brain and there's like eventually get to galaxy brain.

[00:07:58]
Basically, we're gonna do here, right? So, I can make a rectangle and I can put some words over it. That, I mean has the problem of they're separate, but like I'm better than that I can group them. I could do that. I could put it in a frame together.

[00:08:14]
That seems fun, right? The problem here is the rectangle is part of the frame. So, like the next level up is that I could make the frames background color that green, right? But like I don't I wanna sit there, like I could set constraints I could do that, right?

[00:08:37]
I could like, okay, let's do this again, now as a frame instead of a rectangle I can say center it and that will work it'll stay centered until I give it a very long name. Again, I'm gonna sit here manually tweaking stuff over and over again. I don't wanna leave like this.

[00:09:03]
So, what I wanna do is I wanna say, hey frame, you're an auto layout now. And you know what, like, let's say you've got, I don't know 16, 8,16 and 8. And just to make you a little more buttoned, like we give you a border ready still to give it a stroke as well.

[00:09:27]
But now, short name, longer name. Now we have a button that grows and shrink even like so, auto layout is great if you have a lot of things. Auto Layout is really great for just one or two things. Now you can imagine if this is a button with an icon.

[00:09:43]
Now it's two things, it's still useful. It's kind of like what these are, right? So, I can grab any given one of these and say I can also hit Shift A. And you can see that I do need to change this to like centered. And I might say that like fill container because it's in another auto layout.

[00:10:02]
Now this one is filling the width of the fixed width frame that it's in, but then on width and height hugging and centering its contents, right? And so I can do that for all of these and then like effectively have auto layouts nested in auto layout. So, should explore a little bit more in a second or two.

[00:10:20]
One easier way if you find yourself making a lot of buttons and you don't have button components yet If you can literally just take just some text grab it and either right click and say create auto layout or hit Shift A. It puts it in a frame with an auto layout with some sensible defaults that you can now like change the color of.

[00:10:49]
And like effectively create stuff very quickly, and easily. You can create a menu bar like we saw before with the space between. Auto layout is incredibly powerful for like having pieces that you can kind of put in there and play around with as well. There are some limitations, which is basically because layout grid is doing so much it supersedes, I'm sorry.

[00:11:13]
Because auto layout is doing so much, it supersedes any layout grids or constraints that you have. It's rules basically are more important than the rules of your layout grid, your constraints or anything along those lines. Cool, so, there's a bunch of things that you can try like what would be like to make an input field, right?

[00:11:35]
That's kind of like got some center text it should theoretically align it to the to the left. So, you can definitely check out making an input field. We'll do that a little bit more later. The other you can try out real quick just to get your hands dirty with it is like, what would it look like just be able to add another tab in here?

[00:11:52]
Add another button in here. Just put courses in here. We could theoretically, if you think about the way that the web works, unlike more other pixel perfect designs that you might implement, like this entire frame, could be just a series of layoffs grids, right? Like, I wanna add another course like cool.

[00:12:11]
There's my course, I wanna add another div on top of this it should stack up just like it would with an auto layout, yeah.
>> Can figma do something like flex wrap?
>> No, I wish, you can't like have it wrapped around stuff like that yet again, this is a feature that was relatively new like somebody was using.

[00:12:30]
If someone new so like, hopefully, but like at this present moment, you cannot. So, what I want you to do is at this point like go ahead, make a button, make an input field, they don't have to be perfect. We'll make better ones with some of the accoutrements in a little bit and see like, what would it be light implement Is some kind layout grid in this UI.

[00:12:51]
We won't do the like you can take this as levels of extremely everything kind of lays out like a wood on the web that would take us like more time than we have patience for watching but like you could do it, yeah.
>> Jut like sort of like a brugstor now that we are talking about buts and stuff, does figma have any ability to mock functionality in any way?

[00:13:10]
Right like I think about a button that you click and then it opens and modal would if I'm doing something like a mock in figma what I have to create like two separate frames? And this is where my button lives so then this is the modal that would open, or can we map that functionality of opening a modal onto the button and create a sort of interactive mock?

[00:13:26]
>> I'm gonna give you a little bit spoiler alert, oops, so figma has a full prototyping, we can like jump between frames, right? That's like the first part of your question, but a relatively new feature I think it's only like a few months old. I don't have the timelines memorized.

[00:13:44]
But like is there's an idea of interactive components. So, you can actually say here's a button, here's the buttons hover state. Here's one's active say when the hammer clicks on it, right? Here's a hole and also like, do an animation like the same way you'd have a CSS animation between the two.

[00:14:00]
And then in the prototype when they hover over the stuff will your hover state you can have it transition to the hover state. You can have, like zoom you have a lot of that interactivity kind of like built in by some stuff you will move to another frame.

[00:14:13]
Some stuff you may like choose if it's like actually triggered by the click, you might have a second frame that has the modal up. But for a lot of the like this should be highlighted when I mouse over it this should like you know raise up and have a background drop shadow behind it you can actually do a lot of that, yeah