Groups & Frames

[00:00:00]
>> Let's hop back over to frames and groups, real quick. We talked about frames, we didn't talk about groups. We talked about the fact that, you can put a bunch of stuff in a frame. A frame can be a container, like a div or anything along those lines, even an array if you wanted to use that metaphor.

[00:00:18]
Group is another way, it kind of have a bunch of stuff together as well, but it doesn't have any of the features of a frame, it's not something you can use kind of in a prototype. It's just like, I wanna move a bunch of stuff at once a bunch of times, maybe you want to duplicate three objects at the same time.

[00:00:37]
You can make a group real quick, they'll stay together, so when you select one of them, you'll get all three. So I can hit command J, or right click and group them. But, usually what I use this for is if I had mixed I can subtract 100 pixels and that works that's great.

[00:00:56]
But what if I wanted it like okay, for the whole selection go to the 00 point, because I think you can kind of see in this case, my first thing here is at negative 1279. What if I wanted this page to start at 00? I could grab it, and I could try to guess and move it around and stuff along those lines.

[00:01:24]
I could do the math here, that seems horrible. What I'd rather do is just quickly make a group say move that to zero on the y axis, they'll all move and everything will behave as I thought it should. And then to ungroup you just hit CMD+SHIFT+G, and it will ungroup those.

[00:01:44]
So I'll use it if I need to do a bunch of stuff at once. Occasionally, you wanna group things while you're making the design. I would say like 5% of the time, I'm permanently keeping a group. Rest of time I'm probably using a frame, but I'm just temporarily doing something I'll group it, do whatever I'm doing, ungroup it really quickly.

[00:02:03]
Frames are what we use for everything else, we saw that you can draw a frame, hit F, make box, put stuff in, right, make sense. The other thing we might wanna do is I have stuff. What I wanna do in this case is if I hit command option G, cuz that's the letter we normal think for frames, right?

[00:02:26]
Letter G, it will make a frame out of that as well. And cuz this is a transparent one, so if I try, well non of you can see cuz this Macbook is very fancy, is am slamming on my trackpad. [SOUND] Am slamming so hard trying to select this, I could hit the name, or I can hit command and I will actually get it in this case as well, and we can have that too.

[00:02:48]
So we can create frames by drawing them, we can select stuff, we can make a frame around it with command option JPEG. The other option if you're like, I'll never remember that is, grab two things, right click, you have a bunch of options here. And then eventually, you'll start to memorize some of these things.

[00:03:06]
The one caveat is these two things have different keystrokes for creating groups and frames. But just to keep you on your toes, they have the same keystroke for ungrouping and unframing, which is command option G. And that seems like you'll never remember it, but over time you will, and if not, I've made you this fun little card that you can print out and put somewhere.

[00:03:31]
Okay, one other thing that we want to kind of see here as well. Just some other features of frames. So this is a frame. And if I go to the design piece here, there is this ability to clip content, right, cuz these circles technically overflow the bounce. But if I'm trying to I'll create a box or something along those lines I don't want it to overflow or maybe it's like a browser window or something along those lines.

[00:03:58]
We'll see some other use cases for this in a little bit, I can say anything outside the bounds of this frame, hide, and put away forever.