Aligning Objects Exercise

[00:00:00]
>> So with that, let's talk a little bit about kind of just moving stuff around and getting stuff aligned, right? And so Figma does a lot to make your life easier. It's not like you have to have like an eagle eye where you can see literally everything. In this case, you notice that you can go and drag something, that for the most part, let's zoom in a little bit here.

[00:00:25]
As we get close to another object, you'll see that it begins to snap. And on my MacBook trackpad, there's tactile feedback when something like is snapping into place, your mileage may vary. You can see, okay, if they are kind of equidistant from the next one near it, it'll give you a few of those things to kinda snap into place.

[00:00:49]
You can also hold Option, for instance, and measure things. We'll see that in the next session as well. The distance between various units. But sometimes it makes sense to, like, hey, I have a whole bunch of stuff and I want to kinda align it, right? So in any of those cases, you can choose any of these options over here and begin to align some stuff as well.

[00:01:11]
So let's actually take a look at that, in some use cases, where with three boxes, not that hard to drag it around. Let's up the ante to five, right? Could I sit there and try to get them all equidistant over time? Absolutely, I could. Do I want to?

[00:01:28]
No, I don't. So what I can do is kinda make use of some of the initial tools. So here I can select all of them by clicking and dragging. You could hold Shift and click on each one of them individually, whatever makes you the happiest, go for it.

[00:01:42]
And then we can align it either, I don't wanna do any of these cuz these are on the vertical axes. But if I wanna get these all in the same horizontal axis, I can do a line to the top, the vertical centers of each or to the bottom.

[00:01:54]
In this case, doesn't really matter which one I pick, but I could theoretically line them all vertically centered, and that gets me most of the way there. But you can kinda see there's some like different spacing in here. And you'll look, I get this icon here that is very similar to the icon there.

[00:02:09]
And there's Tidy up. There's also, if I just wanna do on one axes, I can distribute the vertical spacing, which they're all on the same axis, or the horizontal spacing, at which point they all even out. And one of the really cool things that you'll see is when they are even, and it knows they're even, it gives you the ability to adjust that either manually.

[00:02:30]
So I can change this to 32 if I want, or I can kind of grab in the middle here and drag as well. So you can do that either on the X or the Y axis. You can also, if you have maybe like a grid of things, you can go ahead and get this all in place where you can see that, it'll try to guess what I need.

[00:02:50]
So we've got the vertical spacing and the horizontal spacing. Neither one of these is gonna do what I want, right. That's not what I need. So what I can do is this Tidy up will do the best to arrange stuff in the closest it can to a grid.

[00:03:07]
And the thing you'll notice here now is because things are evenly distributed on both kind of the x and the y-axis, I can actually adjust either one of those. And I can either change the number or we can see I get this little curse like this, I can do this motion.

[00:03:21]
And there's a lot of tactile feedback from the trackpad and feels great and kind of aligned stuff in a way that makes sense. You can do the same thing like this. And those will be when everything is uniform. One of the things that we'll find out in our time together is there's a lot to love about Figma.

[00:03:38]
One of the kind of slightly tedious things is like certain features will only appear when they're applicable. And if it's not a place where you can do that thing, you just won't see the tool, but the presence of the tool means you can do the thing, as well as, like I said before, I can adjust the spacing here.

[00:03:58]
There are lots of options but that, again, only happens when they are in an even distribution like this. Cool, let's see what else we got in here. We do have an exercise for you, which is basically taking some of the stuff you just saw me do and taking it for a spin.

[00:04:18]
So in this case, we've got somethings that are out of order, right? Why don't you spend a few minutes and just, we're just trying to get warmed up here, and kinda get to the point where we can kinda take on some definitely more ambitious challenges. But just in terms of getting a feel for Figma itself, let's see if we can kind of make the top picture look a little bit more like the bottom picture All right, so now, another particularly special here, what we can do is we can hold Shift and grab a bunch of these.

[00:04:54]
One thing you'll notice is, if you're not getting anything that you want, and I'll talk about this a little bit later, too, you can hold Command, and it'll be literally the thing under the mouse. So if you're not always getting exactly, cuz it's trying, there's a lot going on.

[00:05:07]
There's a lot of stacked layers. You can hold Command, you can hold Shift, select multiple things. Here, I can try this out, and it will give me at least the vertical spacing, and then I could theoretically put them all on the same axis like this. Similarly, I can do this here as well.

[00:05:26]
It will try to even them out like that, but then I can also put them on the same axis. One of the other things that you can do is, yeah, theoretically, did I spiritually complete this exercise? I did. Are they exact matches? They're not. So the other option that you always have is actually looking at the values themselves.

[00:05:46]
And you can do a few cool things here. One, I could theoretically, okay, this is 61, 51, this is 30, 40. I can adjust them by hand by typing in values. And you'll notice that these are relative to the frame that they're in, and we'll talk about frames in the next section.

[00:06:06]
But they're relative to, let's just call it a box for now. The box that they're in, you can do math in these, right? For instance, you can write 30 plus 21 and it will update to 51. You can also divide by half. Let's say, hypothetically, you're working on a workshop and you took a bunch of retina screenshots that it thought it was double the pixels.

[00:06:28]
You could just do slash two and cut the width in half and stuff along those lines. So you can get a lot of that kinda in place here and adjust stuff as needed, and move stuff in bulk. Again, option will show you the distance. So these are 84 apart.

[00:06:47]
These are 84 apart, so it's really just bulk moving these in the right direction. Could I sit here and adjust the pixels? 11, totally. I think we've got most of the point there, but to show that there are lots of different ways to have some introspection and manipulate the position of objects.

[00:07:04]
Seems really low level, so it's things that make using some of these tools really frustrating or like, I know how to do these things. If you've seen the movie The Matrix, it's basically that, but you're using Figma.