Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

Frames vs Groups in Figma

This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 30:36
SECTION: 2
Wireframing - Low Fidelity 11:03
SECTION: 3
Type, Color & Icon Introduction 1:12:34
SECTION: 4
Pages 8:32
SECTION: 5
Prototyping - Level 1 30:08
SECTION: 6
Animation Level 1 10:46
SECTION: 7
Commenting 14:09
SECTION: 8
Moodboard - High Fidelity 13:40
SECTION: 9
Columns 13:54
SECTION: 10
Tips & Tricks 7:21
SECTION: 11
Colors 34:48
SECTION: 12
Text & Fonts Advanced 47:48
SECTION: 13
Drawing 35:41
SECTION: 14
Working with Illustrator 4:16
SECTION: 15
Images 17:55
SECTION: 16
Working with Photoshop 11:58
SECTION: 17
Autolayout & Constraints 52:08
SECTION: 18
Effects 15:30
SECTION: 19
Saving & History 5:42
SECTION: 20
Components & Instances 36:15
SECTION: 21
Variants 23:04
SECTION: 22
Making a form 34:05
SECTION: 23
Prototyping - Level 2 43:01
SECTION: 24
Teams & Projects 5:19
SECTION: 25
Libraries 11:03
SECTION: 26
Animation & Micro Interactions 1:05:40
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 34:21
SECTION: 29
What next 15:53

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files

Transcript

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.

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024