Frames vs Groups in Figma

Hi everyone, this video we're going to look at the differences between Groups and Frames. Up until now in this course it's been pretty basic, right, like the Type tool does what you imagine, the Rectangle tool does what you imagine, like, it's not rocket science, ready for this video, to be rocket science-ey. I introduced it earlier in the course because it was probably, the hardest thing I had to get used to, coming to Figma, so I'll introduce a little bit now and a little bit later on, a little bit more, and towards the end you will become master of Frames, but if you get to the end of this video, and you're like, "I kind of get it, but I don't kind of get it," don't worry, I'm introducing it early so that we can revisit it a few times. 

All right, first let's understand Groups, let's draw a bunch of shapes up here. So we're going to grab, we'll do Rectangle tool, we'll do three shapes, let's look at the Polygon tool, give them roughly, you don't need to be the right size, they can be three circles, I'm doing these because, I don't know, it looks good. So make three of something, and what you'll see here, on this Product Details frame is my Ellipse, my Polygon, and my Rectangle. I can select them all, and I can right click them and group them, or the really common, 'Command G' on a Mac, 'Ctrl G' on a PC, now grouped, you're like, "Great." What happens? Over here, can you see, the icon has changed, it's called Group 2, where's the group, must be a group somewhere else, I made a group earlier, didn't I? There it is, it's that button, so Group 2, I can rename, so this could be my 'Icons', great. 

This little icon here is not important, but you'll get used to these shapes, so that there, the dotted line is a group, so I can look around, look, there's another group. I can look inside the group of my layers, see this little turned down arrow here, So yeah, you can see stuff inside of it, you can say, "All right, I want to move," like, grouping is useful, because we know what grouping is, you can grab them and they move together, but I can go into them individually by either, clicking them here in the Layers panel, and going, okay, this needs to be a bit further this way, or we can kind of go into that object editing mode. 

So let's double click on the background, click on it once, double click, we kind of go inside of it, inside of the group, and we can opera-- you know, work on it, double click it to come out, and it's still a nice helpful group. You can ungroup by right clicking it and going to 'Ungroup', and then it kind of comes out of that dotted group, and it's back to being single units. I'm going to go back, 'Command G', or 'Ctrl G' on a PC, and group it. 

So what's the difference? Let's make two versions, so I'm going to duplicate this fella, and I'm going to right click it, and say 'Ungroup', so I've got this grouped one, you can see here, it's called Group 2. These guys here, just hanging out by themselves in this frame, so what we're going to do is, very similar, I'm going to select them all, and instead of, right clicking and saying, Group, we're going to 'Frame Selection', and it's basically exactly the same as a group, except the icon is different, can you see over here, there's my top one, let's move the layer order so it makes more sense. 

There's my group, that's them there, there's my frame, the icon's different, you get this, like little, what do you call it, pound symbol, hash symbol, grid, whatever it is, but they do a lot of the same things. So you can still see them in there, they're all still trapped inside of this nice frame. "So what's the difference, Dan?" The difference is, that frame can survive on his own, the group, if I go into this group and say, you are gone and you are gone, remember, double clicking it to go inside the group, the group disappears, by group, if I undo that, because I want them back, the frame on the other hand, if I go in, this guy, this one, you're left with a frame, which can be weird when you're new, you're like, "What are these empty frames everywhere?," because the frame can exist without the group, "Why is this useful, Dan?" 

It is useful because - I'm undoing - is because I can do things, like let's say I want to cut that off, I can drag my frame in, can you see it, it's operating differently, drag the edge of this, look what happens, squidgy. If I drag the edge of this in, I can do things like this, 'Clip Content'. So I can use the frame as kind of like a mask to kind of hide things, which is one thing, and actually, let me show you quickly, so this is why that's useful, you created a nice big list, you can grab your frame, make it a bit smaller, I know we're jumping ahead in the course, but I guess I want to introduce frames a couple of times, so that's why it's good. 

You got this list, and you can set this to scroll, so that it kind of clips it off. Same with this, you got the stuff hanging over the edges here, I can say where you frame? You can be over there, and I can say, 'Clip Contents'. So I can use a scroll, so people can scroll left and right, but clip off the edges, that's one of the things, let's jump back. So Clip Contents is one of the reasons, there are other ones, and the reason I show it to you here, is that you're going to download somebody's free UI template, and you're going to be like, "Why is everything framed?" "It's all a bit weird, I don't understand," that's, that was my position anyway. 

So the reason people do do it, they get to an intermediate level, or an advanced level in Figma, and they just stop using groups, never, because Figma, sorry, frames is just like groups, but with bonus extra features, and clipping contents is one of them. Let's look at one of the other main ones, just to introduce it now, and we'll work on it at a bit more in depth later on. 

So what we can do is, I'm going to actually ungroup this, weird thing about a frame is that you group it, so you group this top one and then you ungroup it, your frame, you frame it, then you ungroup it, does that make sense? Ungroup works for both of these, so I'm going to ungroup it, and you'll notice, these guys just come out. I'm going to put these kind of over here, I'm going to grab my name here, and I'm going to select all of these, and turn them into a frame, not a group, because I want to see the bonus. 

The bonus is, watch this, I can click on-- double click to go inside our kind of object editing mode, I'm inside my frame, and I'm going to say, you, stick to the top left of this frame that it's in. This frame is the thing around the outside, these guys though, I'm going to click on you, and I'm going to say, actually, you are going to go to the top, top right. Same with you, you can go to the top right, same with you, top right, you're like, "What does that do?" Watch this, if I go now, and I'm going to make a copy of it, and watch this, when I drag it, hey, it sticks to the top right of the frame, groups can't do that, they call them constraints. 

We'll do them properly later on, but when it gets to things like, okay, I need another version, it needs to be Tablet, so I'm going to click on my 'Frame' tool, I'm going to say, "Oh, it's going to be a Tablet Mini," it's going to be in portrait, I'm going to stick it over here, I'm starting to design, so instead of trying to drag it all out, and try and make it all line up, you can click on this guy and go, you go over here, and I can get in the top and I can drag this over, and I can stick it to that side, can you see the perk? 

It gets more and more in depth, when you start kind of stacking things up, and it means, when you start adding text things, start reflowing, it gets, not complicated, gets more awesome, that's what it does, but that awesomeness comes at a kind of confusing stage, because remember, at the beginning of this course, we dragged out frames, remember the frame, that was our mobile phone, we just did it, now again with the tablet. 

So frames get used for the big thing around the outside, but also, the little things inside of it, these little nested frames, so I've got a frame inside of a frame, weird. If I bring in say, maybe that icon we brought in earlier, you probably didn't notice, but if I go to our 'Place Image', I bring in the same one or a different one, watch what happens, if I drag this out, you'll notice that, actually, can you see, I brought it in as a frame, it's a frame, inside of it is our little vector thing, but it's inside of a frame. 

So that's why we can't leave it to the end of the course, because there'll be frames everywhere, you're like, in this case it doesn't matter, we're not using, any sort of this goodness with constraints and variants, and all sorts of cool stuff, we're going to do later on. It's just kind of like a group, that's all we're going to use it for, for this guy, but know that later on, there's some fancy stuff we can do. "So what you're trying to tell me, Dan, is group's bad," nope, groups are great, and they work just fine, they just don't have all the extra fancy features. 

So that is my whole point of this video, we're going to use frames from now on instead of groups, because they have features that we're going to learn later on, and they just appear lots in Figma, and I wondered why. The weird thing is, when you've got frames inside of another frame, weird, why have you got frames inside of frames? 

The one last thing is that this frame, why does this one have a name, how did you get that name there, and this one doesn't have a name? Basically, if a frame is not nested it has a name, what I mean by that is, see this frame here, got it selected, if I drag him over here, watch, his name appears, inside, his name goes away. So that's kind of why you might sometimes see a frame name, and sometimes the frame is just used as like a group, and it's inside of another frame, "Wow, what a confusing video, Dan." 

Anyway let's, I hope it got us closer, to understanding Frames versus Groups. What we don't need is, we don't need, these particular examples that we made, we're going to create some specific icons in a little bit, but yeah, we're moving towards understanding Frames versus Groups, so delete those, and I will see you in the next video.