Skip to main content

Frames vs Groups in Figma

Lesson 15 from: Figma UI UX Design Essentials

Daniel Walter Scott

Frames vs Groups in Figma

Lesson 15 from: Figma UI UX Design Essentials

Daniel Walter Scott

new-class art & design

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

15. Frames vs Groups in Figma

<b>In this lesson we will look at the differences between groups and frames in Figma. You will be using both quite regularly as a UX designer in Figma so keep tuned in on this one!</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

Lesson Info

Frames vs Groups in Figma

Hi, everyone. Uh this video we're gonna look at the differences between groups and frames. Um 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. Uh I introduced it earlier in the course because it was probably the hardest thing I had to get used to um coming to fig A. So I'll introduce a little bit now and a little bit later on a little bit more and you know, towards the end, you will become master of friends. But if you get to the end of this video and you're like, oh, 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. OK? We do three shapes. Let's look at the polygon tool. OK? Give them roughly, you don't need to be the right...

size. They can be three circles. I'm doing these cos I don't know, it looks good. So make three of something. OK? And what you'll see here on this product details frame. OK? 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 control, G on A PC and they're grouped, you're like great. What happens over here? Can you see the icon has changed? OK. It's called group two. Where is a group? There must be a group somewhere else. I made a group earlier, didn't I? There it is, it's their button. So group two, 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 little dotted line is a group. So I can look around, look, there's another group and I can look inside the group of my layers. See this little turn 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. OK? But I can go into them individually by either clicking them here in the latest panel and going OK? 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 operate, you know, work on it, double click it to come out. And it's still a nice helpful group. You can UN group by right clicking it and go to UN group. OK? And then it kind of comes out of that dotted group and it's back to being single units. I'm gonna go back command G or control G on a PC and group it. So what's the difference? Uh Let's make two versions. So I'm going to duplicate this fella and I'm going to right click it and say UN group. So I got this grouped one you can see in here. It's called grouped two. These guys here are just hanging out by themselves in this frame. So what we're gonna do is very similar. We're gonna select them all and instead of right clicking and saying group, we're gonna frame selection and it's basically exactly the same as a group except the icons 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 um What do you call it? Pound symbol, hash symbol, grid, whatever it is. OK? But they do a lot of the same thing. So you can still see them in there. They're all still trapped inside of this nice frame. So what's the difference, Dan is 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. OK? If I undo that cos I want them back the frame. On the other hand, if I go in delete this guy, this one, you're left with a frame which can be weird when you're new. And you're like, why are all these empty frames everywhere? Because the frame can exist without the group? Why is this useful Dan? OK. It is useful because I'm undoing. OK? Is because I can do things like let's say I wanna cut that off. OK? I can drag my frame in. Can you see it? It's, it's operating differently if I drag the edge of this? Look what happens, Squidgy. If I drag the edge of this in, OK. I could do things like this, clip the content so I can use the frame as kind of like a mask. OK? 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. OK? You can grab your frame, you get a bit smaller. I know we're jumping ahead in the course, but I guess I wanna introduce frames a couple of times. So that's why it's good. You got this list and you can set this to scroll. OK. So that it kind of clips it off. Same with this. You got the stuff hanging over the edges here. I can say, where are you frame? You can be over there and I could 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. All right. So clip contents is one of the reasons and there are other ones and the reason I show it to you here is that you're going to download somebody's free U I templates 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 fig A and they just stopped using groups never because fig A um 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 um in depth later on. So what we can do is I'm gonna actually un group. This weird thing about a frame is that you group it. So you group this top one and then you un group it, you frame, you frame it, then you gro it does that make sense? You un group works for both of these. So I'm gonna un group it and you'll notice these guys just come out, I'm gonna put these kind of over here. I'm gonna grab my um name here. OK? And I'm gonna select all of these and turn them into a frame, not a group because I wanna 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 um frame and I'm gonna say you stick to the top left of this frame that it's in this frame is the thing around the outside. OK? These guys though, I'm gonna click on you. OK? And I'm gonna say actually you are gonna go to the top, top right. Stay with you. You can go to the top right, stay with you. Top right. You're like, what does that do? Watch this if I go now and I'm gonna make a copy of it and watch this. When I drag it here, it sticks to the top right of the frame groups can't do that. OK? They call them constraints. We'll do them properly later on. But when it gets to things like OK, I need another um version, it needs to be tablet. OK? So I'm gonna click on my frame tool. I'm gonna say Oh, it's gonna be a tablet mini. OK? It's gonna be in portrait. I'm gonna 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, OK, you go over here and I can get you 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 re flowing, it gets not complicated. It gets more awesome. That's what it does. But that awesome 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. OK? So frames get used for the big thing around the outside but also the little things inside of it, OK? 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, OK? You probably didn't notice. But if I go to um our place image, OK? And 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 it brought it in? As a frame. OK? 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'd be frames everywhere. And 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 gonna do later on. It's just kind of like a group. That's all we're gonna use it for, for this guy. But know that later on there's some fancy stuff we can do. WW So what you're trying to tell me Dan is groups bad. Nope, groups are great and they work just fine and they just don't have all the extra um fancy features. So that is my whole point of this video. Um We're gonna use frames from now on instead of groups because they have features that we're going to learn uh learn later on and they just appear lots in fig. And I wondered why the weird thing is when you've got uh frames inside of another frame. Weird, why have you got frames inside of frames? And 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, I drag them over here, watch his name appears inside his name goes away. So that's kind of why you might uh 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, I, 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. OK. We're going to create some specific icons in a little bit. But yeah, we're moving towards understanding frames versus groups. Uh So delete those and I will see you in the next video.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

RELATED ARTICLES

RELATED ARTICLES