Organizing Layout with Frames

[00:00:00]
>> All right, one other tool that is useful is we talked a little bit about, there was move and then resize, or move and scale rather, and you didn't really see me use scale. Now for things like a rectangle, it's basically the same thing, right? I move it.

[00:00:22]
It's now a bigger rectangle, that feels like scaling, right? But what happens if I grab something that has text in it or something along those lines? Well, it'll change the bounds of the frame. But it'll leave all the texts the same size, right? Scale is like no, you weren't listening to me, right?

[00:00:43]
What I really wanna do is I want to make the thing bigger. So hit the Scale tool, it'll actually scale the type as well, right? And so you can kind of do both in this case. So yeah, it's like no, I don't wanna change the bounds and refill the text, I literally want to bigger eyes everything, right, that is when you pull the Scale tool.

[00:01:02]
Obviously, the key for the Scale tool is, you guessed it, the letter K. I don't make the rules here, I just have to tell you about them, okay. So the other thing that we are going to do in this course, it'd be really great if we spent the day together, and I showed you how to start from a perfect empty Figma and create the correct way to do everything.

[00:01:29]
And that would be wonderful until the first time you either, we can blame other people and say until we receive somebody else's Figma file. And it's not using some of these practices and then you're like, now you're just sad and resentful, but we all know who everyone's least favorite engineer is, right, you six months ago.

[00:01:50]
You six months ago racked up some tech debt that current you has to deal with. So let's look about how to take a design. As I mentioned before, I mocked this up, but I did bad things, right? When I say there's no concepts of frames, there's a few frames in here for where doing it the bad way was so tedious that I couldn't take it anymore, right.

[00:02:14]
And so for some of the buttons, they're technically frames in this case. But what I wanna do is show you a few ways you can begin to take something that isn't set up great and begin to bring order to the universe. And we won't take everything we learned and apply it to this cuz it's just tedious in its own right.

[00:02:35]
But we'll take a few of these concepts so you can kind of figure out how to apply it. We're not gonna get it all the way to perfection. But we'll kinda use it as a case study as we go through. So like I said, there's no real concept of layers here, of grouping in any way, shape or form.

[00:02:51]
I at the very least named the layers for my own sanity, but that's about it. So there's a few things that we can do here. So for instance, let's say I wanna move this card. Right now it's real hard because nothing has any sense of grouping or hierarchy to it, right?

[00:03:12]
And this is both sad to design with. And sad if hypothetically you're a front end engineer who receives this, cuz then you basically have to reverse engineer the component hierarchy, right? We can argue that getting some of these hierarchy and organization and instructional pieces right into design, if you're doing it, it helps future you the engineer implementing it, right?

[00:03:36]
Or, there's some old Figma around, your current designer is great. Everyone knows that. But maybe the previous designer wasn't, right, and you still have that design that you're working with. And you're the one implementing it. It's helpful for you, at least you to be the one that brings order to this as well, right?

[00:03:55]
And like I said, I started using this tool at work but then eventually, on side projects and other things, instead of like, you get an idea for a side project and you start writing code and then you realize your layout is terrible, you start tweaking stuff by hand, this is a lot easier.

[00:04:08]
So how do we bring some order to this? Well, for some of these pieces, we could actually just select, and like I said before, we can hit Command+Option+G, and now I can move this thing around as one kinda contiguous unit. Now you might imagine that you could probably make sub frames in here as well, right?

[00:04:31]
Chances are that I wanna maybe move the name and the company around at the same time. So you could theoretically Command+click and hold Shift and create additional frames as well. I'll do one here. And I could make that a frame, so now I can move this around within the balance.

[00:04:48]
Also, kind of in the same way that you would look at a JPEG of a UI and in your front end engineer brain try to reverse engineer the component structure. Those neural pathways are super helpful right now, right, cuz it's the same idea. And frankly, I would be lying to you if I said that I didn't sometimes just do this as I'm thinking about the architecture of a UI as well, right?

[00:05:13]
Looking at it, even before Figma, you draw some boxes around some stuff, you think about, what is the component structure before you start digging a hole of tech debt as you just start writing code. Stopping and thinking and breaking stuff down is super useful. So there's a bunch of stuff, we can grab, for instance, hold Shift and we can grab a few different things here as well, and see if we got everything here.

[00:05:38]
And one of the ways to check is just to, see, I missed something, grab all of that, put in a frame, and now I can move this around as well. The other thing that we could do is, there's some cases where this background or even over here, if I wanted to basically eventually move both the heading and the search field, let's say this is a contiguous unit of my UI.

[00:06:03]
There's no even implicit box rectangle that this is over. This, before I made a frame, was just a rectangle that had some texts just on top of it. When I turned it into a frame, there's an invisible box that the rectangle is in with everything else that I'm moving around.

[00:06:19]
Eventually I probably delete the rectangle and change the background color of the frame. But we have this other issue here which is, behind these two cards, if I wanted to move this entire section around, that's just the iPhone background, right? There's nothing for me to kinda grab on to here.

[00:06:35]
The super interesting thing is if you just grab, you hit the F key and you kind of just draw where you wish there was a frame. I wish my code worked like this, right? I'm just gonna write the code that I wish, like APIs, right? I'm gonna pretend I have the APIs that I wish the backend engineers gave me, right?

[00:06:55]
It doesn't work for engineering, but it does work in Figma in this case. You can kinda draw the box around it, and you'll see in this case that it, let me see, did I get it right, yep, that it kind of implicitly put everything that I ensnared in that frame inside of it, right?

[00:07:16]
And so these things were not in the same frame, there was no real common rectangle that they were in front of. I just drew a square around both of them and I got a mostly accurate, actually completely accurate frame where there was none before, right? And like I said, we can keep going with this, I won't belabor the point.

[00:07:39]
In cooking shows where they have, they show you how to make a turkey. And then there's one that they pull out the oven four seconds later, right, as if time elapsed, right? We have one that's kind of all parted out that we can kinda use as well, but this technique works.

[00:07:54]
And again, you can either take existing things, select them all, hit Cmd+Option+G. Or when you don't have anything to work with, like again here, if I wanted to kind of zoom in a little bit, I can see like there's a difference there, and it will snap to like where other shapes are.

[00:08:12]
But these are now implicitly inside of a frame, and I can kind of begin to draw out and componentize my UI, which is again helpful if you're the one maintaining this design. Also helpful if you wanna use any of those measurement tools and you didn't have the right kind hierarchy and structure, right?

[00:08:31]
Kinda like when HTML has no real divs or anything and you can't move stuff around. You can kind of bring order to some of the chaos that in this case I made but sometimes you've inherited, you can kinda pull this in and begin to bring some structure to it as well.