Layers, Frames, Sections & Groups

[00:00:00]
>> So, then we got this idea of frames, which I've mentioned a bunch, but we should probably deal with and talk about in earnest. So, there are a bunch of ways of grouping things. Three of the major ones are this idea of frames, which is most of what we're going to use today, then we've got sections and groups.

[00:00:21]
Since frames are the most important, let's talk about the other two. Sections are actually a relatively new thing, that's this over here, they are mostly just for organizing things. In terms of like when you have a whole bunch of components and how they get laid out in that Assets panel, stuff like sections will add certain levels of hierarchy in there.

[00:00:40]
Other than that, they don't really do anything but have this fun little button here, where you can market something ready for development. We started on our design system before that existed, so we use a very sophisticated set of emoji. But this also work as well. It can remove the ready status.

[00:01:00]
The other one is Groups, Groups don't do anything but they kind of like collect a whole bunch of random objects together. A lot of times I will use, it's really hard for me to remember the times I always use Groups. I use groups when I need them. Like, I have some buttons for a website that have like stars that explode.

[00:01:16]
So that star thing, which is a bunch of smaller vectors, needs to be dealt with. As like a group, but the other place where I find myself using it a lot is think about some of that aligning that we saw earlier. Let's say I wanted to keep this kind of even grid, but I wanted to move the group up, look pun unintended, I could theoretically, a lot of times I'll make a short group, like, just a short live group where I'll group them.

[00:01:43]
So now I can kind of move them together, cuz if I just said, hey, align to the baseline, all six icons would shoot up and they'd be overlapping, which is not what I want. I want the top of this group to align with the other two. So if I put them in a group, we get this, if they were not in a group and we did that, we will get chaos.

[00:02:08]
That's not what I want. So groups are just helpful at times for arranging stuff as well. So sections organizing groups, don't do anything except like keep stuff together. When you need it, you will know that you need it. Groups are not a unique feature to Figma, you've probably seen something like this before.

[00:02:25]
Frames are the more interesting ones. You can think about a frame as anytime that you would've grabbed a div section article, pick your favorite semantic HTML element. And then you would grab one of those is probably a time you would need a frame. If you wanna use stuff like layout grids or constraints or auto layout or a whole bunch stuff that I'm going to talk about that I haven't explained to you yet, that a lot of this is only supported in frames.

[00:02:51]
Components are based on frames. Frames are like kind of the normal name of the game for the pieces of our design that we might use. And there's a lot of different options, you can always, at any given point, hit F. If you click, you draw 100 by 100.

[00:03:06]
Hit F and draw a square, that works too. You also notice that when I just hit the F key, I get some pre-sized frames, which are really useful at the very end when we get to prototyping. You've got everything from various different phones, to presentations, to watch, to paper sizes, to Twitter post sizes.

[00:03:28]
Think those are mostly the open graph sizes, which unfortunately I know from memory at this point. So on and so forth, right? And those frames kind of just, again, they are the component pieces to have almost everything in Figma. One or two last things to take a look at is this clip content button, it just shows or hide things that exceed the bounds of the frame itself.

[00:03:56]
So like obviously this is what I'm trying to implement. But if I needed to, if something was off the page, I need to grab the end, I can toggle that on and off. Lastly, when we change the size of our frame, you'll see that it changes the frame, but depending on how you set up the constraints, everything in it stays the same.

[00:04:17]
And that is one of the core differences between the idea of changing the bounds of a frame and that, like, the move tool and the scale tool. If I grab the scale tool with the K letter, you'll actually see I can and big in it or in small in it, which are very technical terms.

[00:04:33]
And those are available for me as well.