Selecting & Inspecting

[00:00:00]
>> Let's do one last little thing about inspecting stuff and figuring out how to select different things, right? Cuz sometimes you're like, okay, I need to get all the buttons. But again, we haven't brought any order to that yet, so how do I get, or I need to change all of the red boxes here.

[00:00:21]
Could I hold Shift and select them one by one? I could, that's a thing that I could do. I don't want to, but it's a thing that I could do. There's a bunch of ways that we can go about doing this. So I could grab one of these.

[00:00:40]
I could go up to this Figma menu, I could Edit, select all with the same fill. We'll grab all of the boxes that have the same fill color, right? That's super useful. The easier way to about doing this is if you go and select, and this is also useful if you get a design and you're trying to figure out what the CSS needs to be, right?

[00:01:05]
You're like, what are all the colors happening here so I can make either SAS variables or CSS variables? You can actually go ahead and see all the hex code colors and begin to set up your variables in your CSS or SAS. You can also, for any one of these, hit that little target.

[00:01:26]
And now I will have just the ones that are that color as well. So that's a super useful way of selecting. So I wanted to get for instance, I would just grab an entire frame, so I command clicked on it. I can see all the colors that are being used in there.

[00:01:44]
And if I just wanted to get these yellow circles and delete them, I could do that as well, right? These are the things that, I think this is true for both engineering as well as using Figma for designs. In a lot of cases, if something feels tedious and painful, it probably is and you probably don't need to do it like that, right?

[00:02:04]
Nurture that sense that there's a better way to live your life, and that there's probably an easier way to do this. So yeah, we talked about selecting and adjusting multiple layers. We saw that we could see all the colors in the sidebar as well. The other thing that we kind of mentioned earlier is, we've got this Inspect panel, right?

[00:02:29]
And Inspect will kind of do some interesting things here, which is it helps you as you receive this design to kind of parse out, how am I gonna implement this, right? At least give you the initial inspiration. So if I go grab this frame, as we saw before.

[00:02:45]
So this is what I use Figma for a lot, even when I'm not supposed to. Don't tell anyone, which is, I will never remember the CSS syntax for box shadows. I've been doing this now for longer than I care to admit, like a decade and a half longer.

[00:03:01]
I will never remember the HTML tag for putting a CSS stylesheet in an HTML file. No idea, it's a link. No, cuz I do it so infrequently. Same thing with box shadows. So a lot of times I will, even if I know I need to implement a box shadow, I'll open up Figma, get the box shadow looking just right, and then figure out what I did.

[00:03:22]
Getting that visual feedback loop is a lot easier sometimes than tweaking the CSS, looking at your browser. Nope, still looks like garbage. Flipping back, nope, it still looks like garbage. This is sometimes a lot easier. The other nice part is it will begin to set up some of your CSS.

[00:03:39]
Now, again, height, a lot of times, yeah, the height should just be relative to the size of the text. We're not hard coding in pixel values for height anymore. But some of these are somewhat useful and the colors are probably pulled out. Border box, you probably did on the HTML tag.

[00:03:57]
Copy and pasting this CSS is a way to lose the respect of your peers. But it at least kind of helps inspire some of this for you, as well. But yeah, take the box shadow, they know that you want it, so you can copy the box shadow directly to even CSS.

[00:04:17]
And you can hit Copy and there's your box shadow. I'll just paste it in here real quick, right? And then you feel like a genius, instantly.