#Auto layout figma software

Your navbar and then you just change one word, right? Like yeah, maybe you got that grid in those constraints perfect and everything works. 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. 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. And it'll all just rearrange and lay everything out for me, kind of like as we would assume that it might. 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. 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. This is a collection of things, they all have like a gap of, how many pixels I have it set to these days. 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. If you can have some padding, right? You can kind of see that you can almost I'm holding and dragging this case. 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. You probably want a spacing of 17 pixels. It's like you add a bunch of things evenly spaced out by 17 pixels. 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. You can set the various margins and padding around the items and then like the alignment, right? 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. And we'll grab this frame, we'll go to design, and we'll hit auto layout. But let's go with 17, just to make a point. We would never purposely use, unless we're just feeling extra chaotic that day.

Let's just change that to really purposeful value of 17. And let's take a look some real quick, we'll see that these are they've got about three pixels between it. 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. That's a useful metaphor for our term for our case of like kind of figuring some of these pieces out. 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?

#Auto layout figma software

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.

There are ways to do this and I like don't it, right? It's somewhat tedious. 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. And also just happened to be distributed nicely. And I can use that trick that we saw in the very beginning of the course. 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. 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. Like we might be a little bit on our own in this case. 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. This one we don't seem to have much in the way, this is the overall grid in this case to work with. I'm not totally certain what we're gonna get but let's see. Let's say let's see what happens when we have inspect. 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.