Selecting & Inspecting Exercise

[00:00:00]
>> There are other useful things that we need to do in terms of getting a whole bunch of different objects, right? Could I hunt and try to get all of the yellow or the red or the cyan rectangles? I could, and honestly, in this amount of a design, it's not that hard, right?

[00:00:19]
But as your files grow, it becomes a lot trickier. Last week I was working on buttons with icons, and I needed to change the stroke width of all the icon SVGs. Right, and not just the icon in the frame, but the actual like each SVG kind of like Stroke and fill.

[00:00:42]
And so some of these tools become really cuz there's hundreds of them and I'm not gonna sit around and they're very small. And I'm not going to play a game of operation and try to get each and every one. I will probably use some of these tools for trying to easily and quickly select things.

[00:00:59]
So, the only thing about this trick is that whatever you're looking for, they do need to be in a frame together. If you just had a bunch of stuff on the canvas and try this, it won't necessarily work, they do need to be in the bounds of a frame.

[00:01:13]
But once you have that in place, you can go ahead and whether it's in the edit menu or with that command palette, you can do the select all with, right? And you've got a bunch of different options here, okay, go get me all the ones with the same properties.

[00:01:33]
Now, these are very uniform rectangles that will work great in this case. Select all the ones with the same fill, right? Same strokes, same effects, effect is like box shadows and stuff like that, right? So if I did select all the same properties, you can see that it's got it's grabbed all of the cyan rectangles, right?

[00:01:56]
So I can get them all very easily here as well, and I can put them back. The other interesting thing that we can do, if I grab the frame as a whole, you can see that it'll show me a summary of all of the colors being used, right?

[00:02:14]
And I can go ahead and see this little target and it will go ahead and select all of the frames that are using that red color, right? And I can change that. The other nice thing is that if you are doing some kind of like large scale change, in this selection colors piece, I can go ahead and I can click this one and I can go and switch it.

[00:02:36]
These are colors that I have from a library. So if you don't see these colors this because we have not set up a color palette yet. We will, don't worry, but I live in the future, right? And so by selecting red and going into this library here, I can change them all to green, right?

[00:02:53]
So if you wanna to wholesale just replace one color, super useful for just taking the entire frame, and just swapping out that one color. Or you could also theoretically, if you needed to get all the red buttons and then change something about their padding, you could use this target.

[00:03:08]
Or you can do the select all with same property, same fill, depending on what you use cases, that will all work in this case as well. But yeah, a lot of times either target or that select is really useful for that. Yet we talked about some of these a little pro tips that hidden here, if you want to see the distance between two objects kind of more in a more practical sense.

[00:03:30]
You can whether it's 64 and 64 is split evenly spaced out, cool, a select all of those. So quick to try it out for a second and try to grab all of the cyan ones and change something about them. All right, few more tasting notes on selecting stuff because not being able to select the thing you want is incredibly frustrating.

[00:03:57]
So spending a few more seconds kind of going up some tips and tricks is super worth it. If I wanted to actually grab the frame, maybe you can feel the anger as I click repeatedly and I don't select the frame, right? I could go up here and click over here and now I've got the entire rectangles frame selected, or I can hold COMMAND and then that is literally whatever is under your mouse cursor, right?

[00:04:25]
Will be selected, right? And so if you know exactly what you want, then you can go ahead and select it as well. And when we have even spacing like this, you can see that is figured out like, hey, Steve, you have a bunch of stuff that's space 64 pixels from each other, right?

[00:04:45]
You can go ahead and just adjust that here as well. Similarly, now that will only appear if they are evenly spaced and Figma can figure out what to do. And so if you don't see it, it's maybe cuz you have something off by one pixel So, so either go ahead and hit that, like, distribute evenly or something else as well.

[00:05:07]
If it's vertical or tidy up, what have you, you can adjust those. The other thing is selecting will kind of grab all of the ones that you're hovering over, unless you grab like a full parent, right? So once I got big enough grabbed the entire frame, but like when I'm just grabbing ones that are kind of not big enough to capture the entire frame and grab a subset inside.

[00:05:32]
Very similar to other things you might use a holding SHIFT, select multiple things, you can also shift and command to grab, combine any of these keystrokes together. And it all worked away that you might hope or expect that it would. And with that, we have, for the most part, covered all of the really glamorous selecting inspector acting and adjusting stuff.

[00:06:01]
That one needs to do in order to do slightly more complicated things without getting incredibly frustrated.