0:00:00
Alright guys, I have outlined my website process numerous times and if you look at that process you can see that Figma is a really important part of that process. We use Figma for wire framing and then we also use Figma for UI design. Now I want to preface this. We are going to be doing a crash course in Figma today primarily for the wire framing side of things but some of the stuff that you’re going to learn would apply to the UI side as well. I just want to preface this with I am not a Figma expert by any means. I am serviceable in Figma which means I can get the job done and that is from a UX slash wire framing perspective. I don’t do UI design at all. I always use UI designers but the fact that I can do wire framing in Figma and share that wire frame with them and allow them to use some of the styles that I started with and so on and so forth makes it very very easy. Figma is a very very powerful design tool as well.
0:00:57
There’s been a big debate on XD versus Figma. I think if you use both of them, most people are going to come to the objective conclusion that Figma is vastly superior to Adobe XD. I’m going to show you why. Now some of this stuff probably can be done in Adobe XD but Figma’s user friendly nature and just it’s far more intuitive. It’s far more intuitive but we’re going to do a crash course. I’m going to show you the ins and outs of Figma. I’m going to show you some beginner mistakes to try to avoid making some best practices things like that. Like I said, this is going to be pretty much focused on wire framing. This is a quick and dirty guide to wire framing in Figma. Let’s go ahead and take a look. All right. I am going to, first we need to probably screen share that usually helps.
0:01:47
I’m going to open up Figma. This is Figma right here. This is the dashboard that you’re going to see. You’re going to see all of your files. You can have teams. You can have a drafts area. You publish things back and forth. I’m not going to get into all of how Figma works. There’s plenty of basic, like how do I start up Figma and how do I organize files and Figma tutorials. I want to get to the nuts and bolts of actually doing something in Figma. The first thing I want to do is open up a design file. This is a wire frame that I’ve been working on. Just did this one yesterday. This is super fresh.
0:02:22
We’re just going to kind of scroll down and take a look at it. Before we look at the details, notice on the left hand side, there is a structure panel of sorts. Pretty much just like the structure panel in oxygen, except it’s in reverse. The things up high are the things that you, if I add a new something or other, you’ll notice it adds it to the top. Instead of adding new things to the bottom, it’s adding new things to the top. That’s how the layering works as well. Stuff at the top is going to be on top of stuff that is at the bottom if they’re overlap. If you look at this YS frame right here, and then the hero is down below it. That’s why this is showing up on top. You have your structure panel. It’s just a little bit reversed from how you normally see it in oxygen. You have your styles panel over on the right hand side. What’s important to understand about Figma is that if you do things correctly in Figma, you can save a tremendous amount of time and you have a tremendous amount of flexibility.
0:03:24
So, as we build a sample wireframe, we’ll get into all of the details there. But I want to make it clear that there’s a wrong way to do things for sure. The very manual way of just adding things and moving them around. Then there’s a more automatic way of doing things in Figma, which if you understand the automatic way of doing things, it’s really going to be a game changer for you. That’s what I want to focus on in this tutorial. I do want to just kind of take a look at this. This is not going to be a UX tutorial. It’s just going to be a how to use Figma to build a wireframe tutorial. We’re not going to talk about UX design principles or anything like that. This wireframe, you see we have our intro section, little talking points area. We have a carousel for our reviews. We have a gallery here. We have another section that talks about all of the different subservices that they offer, little three image composition over here.
0:04:25
We have the process steps again in a carousel. We have another testimonials carousel. We have our FAQ section. We come down and see the service area section, the final call to action, your footer. Then on wireframes, especially lately, I like to put all the SEO, like the meta title, the meta description, additional keywords that we’re targeting. I like to put that as part of each page. That way, when we’re actually doing dev, when it comes to the SEO side of things, we can literally see page by page what the plan is for SEO, meta, and all of that. This is what a wireframe that I create looks like. I know this is fancyer than some people’s wireframes, maybe a little less fancy than other people’s wireframes. I don’t know. I feel like it’s more on the fancier side when it comes to wireframes. It’s just how my brain works, I like to put some design elements into it.
0:05:22
Even though I’m not a designer, I do my best to just make it as clean as possible. Just to show some detail on what I’m thinking, so that when the designer actually gets the file and does the work, they have more of a grasp of what I was trying to get at and what I’m trying to achieve and what’s in my brain, even though I typically can’t really do it that well myself. Let’s go ahead and let’s start on a wireframe. What I could do is you can literally hit CMD, CMD, and it’ll paste another version of this next to it. That’s cheating because I’ve already got a lot of stuff set up. If you start from scratch in Figma, it’s not going to be like this. You’re not going to be able to kind of follow. You’re going to get stuck. What I want to do is start a clean file. I’m going to hit New Design File on my dashboard and it’s literally going to open up a blank slate.
0:06:15
There’s nothing in structures. There’s nothing in styles. There’s just nothing period. We’re going to talk about best practices starting from scratch. What do you need to know to start doing wireframes in Figma? Because this is a big part. If you’re not a UI designer, but you want to start incorporating the wireframing UX aspect into your projects and it’s going to be on you at the very beginning anyway, you need to know how to do wireframes. The good news is you only have to be serviceable at Figma to do wireframes. You don’t have to be an expert at Figma. If you want to do UI in Figma, you probably need to know a lot more. If you just want to do wireframes in Figma, you can just be serviceable. Let’s just take a look at tools up here. You have this like move tool, which also nested under that as a scale tool, which we may or may not talk about.
0:07:03
I have no plan for this whatsoever. We’re going to just start putting a wireframe together and we’re going to get little lessons and golden nuggets as we do that. Then there’s frames and slices. Then there’s these shapes. What I will tell you right now is you’re going to be very tempted to use these shapes. Unless it’s a circle or like a polygon or like an actual shape, like an arrow, those are fine, whatever. If you need a rectangle or a square, do not use a shape. That’s like one best practice tip and I will explain why, but you’re going to use a frame. This frame right here, I want you to just embed in your mind, build everything with frames, build everything with frames, build everything with frames. Frames in Figma are like divs in oxygen, whereas these rectangles are like an image in oxygen. It’s more powerful than that, but it’s far less powerful than frames.
0:08:06
You’re going to see when we get to actually putting stuff together why I say frames, frames, frames, frames, frames. Don’t use rectangles. Okay. Then you have this pen and pencil tool, which I hardly ever use. You have your text tool, you have your hand tool, and then you have a comments feature, which is really, really powerful. We’ll talk about prototypes and previewing files and things like that probably. I’ve got a call, that’s in an hour and a half, so we got plenty of time. Let’s just get started by adding a frame. When you click on the frame tool right here, in the right hand side, you actually have access to a lot of presets. If you look on your desktop, you’re going to see 1440 by 1020. What you’re not going to see is 1920. Okay.
0:08:58
If you want to have a 1920 canvas, if I click desktop 1440, it’s just going to put it right there for me. Bam. It’s ready to go. If I wanted 1920, I could create my own frame. You could literally just draw a box and then you can change the dimensions over here. You can say that’s going to be 1920 pixels wide. There it is. You can just drag it and make it. Let me zoom out a little bit. You can drag it and make it as tall as you need it to be. Just your canvas as your website continues to grow in length. If you look at this one, obviously very long, you’re going to be able to continue to grow this frame just by dragging it. You’re not, if you build this correctly, you’re not going to have to constantly have to move things around in order to make them fit inside of this frame.
0:09:44
You will a little bit, but not as much as you think you should. If you do it the wrong way, you will have to be constantly just dragging and repositioning stuff. We’re going to show you how to do it the right way. Here’s your frame. Anytime I add a frame, I take it in the habit of naming it. This is going to be my homepage. This will be a good time to talk about pages in Figma. Traditionally, at least the way that I do it when I want an about page, I duplicate this and then I say about. Whoops, just put about. Now I have two frames. One is home. One is about. I’m not creating pages.
0:10:22
What I would create pages for is this. This would be, we’ll say, pages. This might be marketing or something like that. This might be, let’s say, welcome. You would put something maybe for designers, other people that are going to be working on the project. You put some notes. It might be like, UI style guide. That’s a good one to have as an actual page. My pages are all contained, my actual pages on my website are contained in one page called pages. You can use these other actual pages for other things. I’m going to delete these for now. We’re just going to stick with one page called pages. That’s where all of our website pages are going to go.
0:11:07
That way you can go frame by frame side by side. You can also use the prototyping feature very easily to link all of this stuff up. If you wanted your navigation to actually navigate in the prototype from one page to another, very, very easy to do when you use a setup like this. I’m going to delete the about page for now, but that’s a little bit of a crash course on getting started with just putting a frame in there, making sure it’s the right width. Next thing we need to talk about is your layout grids. There’s some preset grids in here. These are just overlays to help you with designing and laying out your website. What we’re going to do is we’re going to click on this grid and you’re going to see that we can edit it. We can use a grid. We can also use columns and we can use rows. I like to do two different things. I like to have columns.
0:11:59
Typically you’re going to be doing a 12 count. You can stretch that or you can center it like that. If you’re centering it, you’re going to need to do a little bit of math to figure out. If you want a 1440 website, how big do these need to be? Let’s say that they’re 80, something like this, and then you have your gutter of 20. There’s 12 of them. That’s going to get your website with. You can also turn on rulers. Let me see where those are. View show rulers. If you drag your rulers out here, so that’s starting at zero, you can put that at the left edge of that one and then you can drag yourself another ruler and you can put it out here. That’s going to show you your website with as well. The difference between 1552 and 372, 1552 minus 372 is 1180. That’s giving you an 1180 with website.
0:13:03
I suck at math when people are watching, so let’s go. 1920 by, I don’t can even see. I’m using a 1920 minus 1080. Wait, no, what am I doing? 1440. That’s 480, 480 divided by 2. I need like 240 from the left and the right. If I put it at 240 here, 240, come on now. 240. There we go. Then 1920 minus 240 is 1680, so we’ll come into 1680 there. Perfect. Then what we need to do is we need to get our layout grid to kind of conform to that. That’s very close. 105, no, 102.
0:13:53
There you go. Okay. We’ve basically got a 1440 website now. I can, whoops, don’t want to delete that. I’ll just take my rulers off the screen now in a way. We have a basic 12 column grid here. Count them 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 and 12. Got a 20 pixel gutter in between. Now let’s go ahead and add. We’re going to hit the little plus sign here. We’re going to add a grid, and this is going to be rows. For rows, you want a gazillion of them. I’m just going to set this as a thousand. I’m going to set this to the top to align them to the top. I’m also going to set the gutter to zero.
0:14:34
What this is going to do is allow you to go control your vertical rhythm a little bit and make sure that whenever you add something, like if I add a frame here, it’s always going to be as far as the height goes, it’s always going to be even. You’re never going to get weird like 202 height and then 187 heights and things like that. It’s going to snap the height to that vertical rhythm on the grid. Now that I’ve set this up, all I have to do is use control and G, and I can show and hide it the entire time I’m doing design. If you want to, you can change the color of this. You can make it a little less prominent on here so we can go 5% on this one. We can go 5% on this one. Now, it’s not so kind of in your face as you’re doing your design. That’s kind of up to you. That is up to you. Just over here, if you look at this layout panel, I want to show you something about saving this and it’s the same method for saving presets for anything.
0:15:40
I’ve created two layout grids. You can see them right there. I can turn them off with the eyeball icon, one or both. I can remove them with the minus. I added them with the plus, but let’s say I want to save this layout grid because I don’t want to lose it and I want to be able to call it any time I want other than just turning it on and turning it off. So if I hit these little four dots right here, it opens up the styles panel. Whether you’re doing grid styles, text styles, fill styles, box shadow styles, it’s always the same. So four dots and then you can hit the plus sign and you can basically add a class. Think of it like a class. Wow, I’m going through puberty apparently. Think of it like a class. It’s not exactly like a class, but that’s kind of the most similar thing.
0:16:28
So you would say grid, just say grid. There’s my grid right there. So I named it and now you can see it’s actually one component. If you want to edit your component and see these little slider icons over here, you hit edit style and you can see my two right there and I can edit them just as I was editing them before. You can give them a description, whatever you want to do. You can add more properties, but now you basically have one component. So if I were to remove that component and I wanted to add my grid back, let’s say you removed it on accident, well, you would think you would have to start over. But because you have assigned a class of that style, basically, you can click the four dots and now choose your grid and it’s back. So you’ve saved, you’ve effectively created a preset for it. You’ve saved it. All right, so now that you have your grid here, let’s talk about putting stuff into your wireframe.
0:17:21
So this is a frame and we’re going to use frames for everything. Remember what I said, frames, frames, frames, frames, frames. So let’s go ahead and create a header. So I’m going to grab my frame tool and I’m going to drag a new frame into the mix here. It’s going to all snap to everything that I’ve created, right there. Boom. And then what I’m going to do is name this. This is going to be header. And what do I want in my header? So I want a logo, I want it kind of a logo placeholder and I want to navigation. Let’s make this just super easy. So for the placeholders, I actually use these placeholder images. You can see them all over all my wireframes. I’m just going to grab one from here and paste it in. If you don’t have one, you’re going to need to find one.
0:18:05
Let me turn off the layout grid real quick and watch this. So by the way, this placeholder image, I love it because I can make it any size and it’s still just kind of retained to that placeholder background image thing. But I’m going to make this super small for a minute. And then as I drag it, look at see, see all the red lines, that’s snapping to my vertical rhythm grid. Even though you can’t see my grid. It is still in effect. And so are the other columns grid. But see what just happened. Let me pull it out here. Everything’s going to light up blue. And that’s going to let you know that, hey, you’re inserting this into that frame. But if I come up here, there’s another frame. Bam, you see now it’s inserting it into this frame.
0:18:55
And so I’m going to drop it right there. And so I now have, and let’s just put a little background image so you can see this frame a little bit better. So I’m going to fill it. And I’m going to go, let’s do like a light, oh, that’s way too dark. Okay. So let’s drag this down to somewhere in there, like 35%. All right. So now you can see clearly that frame. Now before we continue, I’m just going to make one more frame. Now if you use the F key on your keyboard, that gets you to a new frame much faster. And then I’m going to drag this out. And this is going to be my hero. So I’m going to put hero on that. And we will fill this with another color, which is going to be maybe like a 60% of that gray.
0:19:43
Okay. So we’ve got our two frames clearly, our hero and our header. Now look what happened in our structure panel. It is properly nested the image underneath the inside of, I should say, the header, which is really cool. So now I can actually just extend this out. Now let’s talk about attachments because frames, one of the most powerful thing about frames is being able to attach elements to the frame. So when you click on an image, because it’s in a frame, that’s the key, because it’s in a frame, I can click on it. And then over here, you’re going to see constraints. I call them attachments, but they’re constraints in Figma. That’s the technical term. So but constraints allow you to attach that item to the sides of a frame or to a single position in a frame.
0:20:30
So right now the default is attached to the left and the top. So if I were to make that frame bigger, let me scroll this down, let me make that frame bigger. Notice how the image stays exactly where I put it. But if I attach this image differently, so let’s say instead of attaching it to the top, I actually attach it to the center of this frame. So vertically it’s attached to the center now. So if I make this bigger, it goes wherever the center goes, which is really, really powerful. What if I attached it to the bottom? So instead of the center, I’m going to attach it to the bottom. Now as I grow it, it stays with the bottom of the frame, but still maintaining the spacing that I originally gave it. All right, so that’s very important. So I’m going to attach this to the center. Now by attaching it to the center, it will not send itself to the center.
0:21:23
You actually have to put it in the center, but once it’s in the center, it will stay there. And that’s just kind of a little caveat there. Don’t expect the attachment to go to that place. Because remember, it’s relying on where you’ve placed it and then from there the attachment will take over. So you actually have to place it where you want it to go first. So that’s really cool, really important. You’re going to see that come up over and over and over again. The next thing I’m going to do is add text for my navigation. We’re going to come over here into the text panel and we’re going to choose one of my favorites, which is DMSANs. That’s my favorite lately. I’m going to make it 20 pixels. It is regular and I’m just going to start typing here. And so we’re going to say home.
0:22:05
So this is going to be a link. And I’m going to zoom in now so we can see an actual version of what this looks like. Okay. So you’ll see I have alignments, right? So it’s telling me that’s centered there. I’m going to bring it over here. And what we’re going to talk about is building an navigation properly because here’s how you would probably do it the wrong way. You would say home, you would duplicate it, you would drag this over and you would say, all right, this is going to be an about page. And then you would drag it over and you would say, oh, look, it’s spacing it for me automatically. See, it’s telling me that I have equal spacing between them 42 pixels. Cool. So I’m going to now do services. Remember, this is the wrong way.
0:22:43
Don’t copy this. Okay. So I have equal spacing. That’s good. I’m going to do context. So I’m going to do a couple of things right there. And if I select them all, what’s really cool about Sigma is let me come over here. All right. Select, select, select, whoops, select, select, select. If I group them, where is my? Okay. So I don’t know why it’s not doing it. But let me ungroup. Ungroup. Ungroup, please.
0:23:11
Thank you. Okay. Ungroup. So I can move things around what I was going to say is usually you here. Let me try it with this real quick. So if I had like a lot of these. Okay. Let’s do them like vertically like this. And where’s my equal spacing right there? Okay. Bam, bam, bam. Right there. See, maybe it’s because those elements are a little too small. I’m not sure. You see these little handles, it allows you to actually change the equal spacing between the items.
0:23:47
That’s what I was trying to do up there with the nav. But I guess maybe they’re too small. I’m not sure. And I haven’t grouped these. I haven’t framed them just literally by selecting all of them. You get access to changing their spacing. And a lot of people think this is powerful enough to be able to just create a little nav. So they would copy them. They would come over here. And they would put them where they want to. But then you come along later and you’re like, I want to add something between about and services, which is like, or maybe services and contact, which is, let’s say, join the team or something like that. Okay. So what would you have to do?
0:24:24
Well, you’d copy this and you’d say, join the team. But now how do I like get it in there? Right? Oh gosh. So I’ve got to like move all these over. I’ve got to put this in. Now I’ve got to come back here and try to get them evenly spaced, but they’re not all evenly spaced. So I would have to come up here and do something like distribute horizontal spacing. And now they’re evenly spaced. But like, how much of a hassle was that? And now you’re like, oh no, I need to change that from here to there. Oh gosh. I can do all that over again. All right.
0:24:58
Let’s do. Let’s move this one. You guys get the point, right? This is not the way to go about this. So I will say the other mistake people make is they get it the way they want it and then they group it. And they create a group so that they can grab the group and just move the group around. And they think that’s cool. And they can still attach the group using constraints because it’s in a frame. But this is all wrong. It’s all wrong. Don’t do any of this stuff. So let’s start over. Okay. Here we go.
0:25:28
Home, right? So what I’m going to do, we’re going to go back to frames. And when I say don’t group things, remember when I said don’t use rectangles, use frames, don’t use groups, use frames. Okay. Always use frames. Just default to frames. That’s a good kind of best practice. So what we’re going to do, there’s two ways to do this. One, you can right click and say frame selection. See how you can group the selection? Well, guess what? You can also frame the selection. So if I frame the selection, you can see that my text is now in a frame, which is really cool.
0:25:58
And you’re going to see why this is super important in just a second. All right. Back, let me take away that frame. All right. We haven’t framed it now. The other way, see frames and figma are smart. If I draw a frame around that item, it will frame it automatically. It knows that I wanted that thing framed. And so it frames it. But the difference is it did add a little padding and spacing in. But now it’s an item that I can drag around. And if there was another item in that frame, like we paste, and this is not how you do it. Okay. If you add two items in the frame, it behaves as a group still. But now we have to unlock the true power of frames.
0:26:36
All right. So let me start all over with this. You can see it again. So I’m going to add my text. Okay. And I am going to add a frame to it. Now the other thing you can do is hit shift A. And shift A is the keyboard shortcut for framing something. But actually, that’s, hold on, that’s not the keyboard shortcut. That’s the advanced keyboard shortcut for auto-laying out the frame, which I always use. So it’s shift command G. Shift command G. Is that correct? Shift command G. Shift command G.
0:27:06
No, that didn’t work. Is that a shift? Shift? I don’t know. It’s option command G. Option command G. I never use that shortcut. Okay. Option command G is to frame. All right. So it is created to frame. I told you I’m not an expert. I’m just serviceable. Okay. Here we go. So what we really want to do here is talk about auto-layouts. So I’m going to select the frame.
0:27:28
And over here, you’re going to see this auto-layout button. If you click auto-layout, it suddenly becomes a very, very powerful div like in oxygen. And now you can control that you can make the auto-layout happen vertically or horizontally. Now, this is a navigation bar. So what is it? It’s horizontal, right? So we want horizontal. You can control the spacing between items automatically. You can control the padding inside the frame. And just like with Flexbox, you can control the position of the item in the frame. And this is different than constraints because this will actually auto position the item for you. You don’t have to drag it to that position. And then you can also constrain these items. All right.
0:28:10
So let’s back up and delete it again. Start over. Just do this a lot because you can get used to it. You created some text. What do you want to do? You want to frame it and you want to have an auto-layout because this is a navigation. That’s what the keyboard shortcut I did before, which is Command A. No, not Command A. What was it? Shift A. Shift A creates a frame and turns the frame into an auto-layout automatically. And then what’s cool about Figma? Let me undo that. Some of you are going to get frustrated with me undoing over and over and over again. But I just want to show you some different things that Figma does really intelligently.
0:28:47
So if I create an auto-frame around these, like I just did, it already knows that they need to go horizontally. Okay? Versus if I did it this way, don’t let me down Figma. Because I’m pretty sure about this. About, it doesn’t most of the time. Services. Okay. Now I’m going to select them. One, two, three. I’m going to auto-frame them, it knows now to create a vertical layout. Because it’s looking at how I’ve already laid out the content before it creates the auto-frame, which is really cool in that you don’t see when I first started with Figma. I thought I have to make the frame first and then set all the direction levels and stuff and then put things in it the way that I, you know, it is in my mind.
0:29:35
But really you can just lay things out, select them, auto-frame them, and Figma won’t screw up your layout, right? It’ll just figure out how you’ve already laid things out and the auto-frame will behave properly in most cases. All right, so let’s start over. Home. I’m going to auto-frame it and then I’m going to select the item that’s inside the auto-frame and I’m going to duplicate, duplicate, duplicate, duplicate. This is really awesome. Okay? So I’m bringing this over here. So now I’m going to say this is our, well, I just said zoom out a lot. Let me zoom back in here. All right. Let’s get up here.
0:30:12
There we go. What did I do? Oh, I selected the wrong tool. All right. So this is going to be a contact us. Now notice it’s going off to the left but our thing really needs to be going off to the right. So I’m going to select all these and I’m just going to change their alignment to text the line right. And now when I write contact us, well, that didn’t do anything. Did it? Let’s go here. Let’s say, maybe I can change their attachment. Okay? All right, or actually the frame direction.
0:30:42
Yes. So I’m going to attach these to the center right side of the frame. Maybe that will help. So let’s go in order. This is going to be about us. No, still not doing it. Is it because I haven’t? Yeah. It’s because it’s attached to the left side. Okay. I’m just playing around with it for a second. Again, not an expert. Just there we go. Okay. So I’m going to do some things backwards.
0:31:05
So now you see what I did because it’s a frame inside a frame, you can use constraints. And by default, it was attached to the left side. See these little dotted lines? Those show you the attachment. All right? So I can see it’s attached to the top, attached to the left. Well, if it’s attached to the left, it’s going to push all new content that I add to the right. But if I take that frame and I attach it to the right side, and you can see the dotted lines switched up, now it should push everything away from the right hand side. So when I do this, services, there you go. It’s getting. If I add more links like that, it’s growing out to the left. Okay. Away from the right side where it’s attached to.
0:31:50
And notice that everything is staying evenly spaced. So I have about us, home about us, services, and this is going to be a join the team like we did. And then contact us. Now let’s say I want more space between these items. No problem. Here’s the space between the items. It says it right there, spacing between the items. Let’s change it to 30. Bam. Let’s change it to 40. There you go. Some spacing it out. Now there’s some padding around this that’s making this not line up, right? And if we go back to our grid, we can say, well, this is way off.
0:32:24
I want it to be right there. But look, the padding is messing things up. And this doesn’t really need padding. So we can just go to zero on the padding. And now it’ll align perfectly. Let’s get it centered. OK. It’ll align perfectly with the edge of that grid. All right. Next, let’s talk about this. Open up this little position panel. Remember, you can do it to the top or the bottom on the right-hand side, but there’s no padding so it doesn’t really matter. Like the frame is not bigger. But if I did grow the frame, I can now say, hey, put that stuff on the bottom or put that stuff on the top, right?
0:33:02
So this is like that flex box alignment in oxygen. But I’m going to make sure that it is not gigantic. Now I don’t have to drag it back. Watch this. There’s another little feature. And I’m just doing all this playing around because it all unlocks more things that Figma does. So notice my constraints. When I create a manually sized box, it changes it from hug contents to fixed because I basically drug that box to a fixed height. Is it drug or dragged? I dragged that box to a fixed height. Maybe that’s better. If I hit hug contents, it’ll snap back to the height of the contents, which is really, really convenient.
0:33:48
So keep that in mind when you’re using these constraints as well. That always comes in handy of whether you want this frame to be a fixed width or height frame, or do you want it to just hug the contents that are inside it. Very, very powerful. So now look at this. Let’s say you want to join the team to be before about us. Watch this. How easy is that, right? So now it’s just working inside of the auto layout. I can drag stuff wherever I want it to. So now I effectively have a header with a navigation. And we’re also going to control the attachment here, make sure it’s center attached so that now when I say, hey, I want that header to be a little thinner, everything inside of it moves with it. Now that’s not properly aligned to the center.
0:34:35
Let’s see. Maybe it is. Okay. So we’ll do that. Let’s take a look at our grid. We need to move this in. Bam. And so now we have nice alignment on our page. Okay. Here’s our header. And now let’s take a look at what we’re doing over here. So we have a big, we have, you know, basically a column of text right here. And then we have this big image over here. So what I’m going to do is grab this image. I’m going to paste it.
0:35:02
And I’m going to drag it into this frame. Notice it turns blue. And this frame needs to be aligned properly. And I’m going to bring this up to the corner. And I’m going to drag it out. And I’m going to turn my grid back on so we can see where I want to drag this to. Later right there. And I now want to create a little heading text, text, another heading text and a button. Okay. So this is going to be cool. So let’s turn off this for a second. So before we do that, one thing I forgot, we need to click on these. Remember, this is a style of text that we’ve created. It’s 20 pixels. It’s DMs, it’s regular.
0:35:42
We need to create a class out of that basically or a preset. So I’m going to hit the little four dots. I’m going to add a plus. And then this is going to say link nav like that. And I use the same conventions that I use. Like I use BIM inside a Figma, just like I do in oxygen. All right. So now I have these styles saved as a preset. And so but I did it only on the home. So I now have to add about services, join the team, contact us and choose that preset. Now watch. If I wanted to change the style here, I would click it, hit the little edit style icon. He’s a slider icon. And then let’s say I wanted it to be 22. 22, enter.
0:36:26
They’re all 22. And because of the attachment, they grew out the correct way, right? If I wanted to change the font size of these, let’s say IBMplexSans. Bam, they all change. All of them. Let’s just rock and roll with IBMplexSans. That’s kind of another font that I’ve liked a lot recently. All right. So that’s, everything is still perfect, the way that I wanted it to. So now I’m going to come down because this is IBMplexSans right here. So we need swimming pool construction. So I’m going to hit the T button on my keyboard, which gives me the text tool. And I’m going to type in swimming pool construction. Now it’s still under link nav. So I’m going to unlink that style.
0:37:06
And then I’m going to create its own style here. So we’re going to be doing IBMplexSans condensed. And we’re going to uppercase it. So I’m going to hit these three dots right here. And we’re going to make this uppercase. And then we’re going to make this only 20 pixels. And then we’re going to make it medium. And then we’re going to space it out 5%. And then I’m going to save that as a style. This is going to be called H double dash accent. So there’s my accent heading. I’m going to bring up my grid. I’m going to pop this into place. OK. Now what I’m going to do is hit the T button again.
0:37:46
I’m going to hit just click anywhere in there. I’m going to break off of my accent style. And I’m going to create a new style. Now what it does in Figma is it uses the last style you created by default. Even if you turn it off, you now style from that point. So I turn this into standard letter case like that. And then I’m going to use bold for this. I’m not going to use condensed. So I’m going to use IBMplexSans. I’m going to use 48 for the heading size. I’m going to use minus 2%. And then I’m going to make sure that this is aligned to the left. And what’s that supposed to say? Let us build the pool you’ve always wanted. OK.
0:38:32
Let us build the pool you’ve always wanted. And then all I have to do is just drag this. And it’ll adjust the width for me. OK. I haven’t put anything in a frame yet. Nothing isn’t a group. I’m just kind of getting these things situated the way that I want them. Now I’m going to add a little paragraph of text. Now first I need to save that style. So I’m going to hit the 4 dots plus sign. This is what we call it H1. That’s my H1 right there. All right. Now I’m going to add more text. Remember, it’s saving.
0:39:00
It’s using the last style I created. So I’m going to unlink that. And then I’m going to change this to 20. I’m going to change this to 0. I’m going to change this to regular. And this is going to be my body style. So I’m going to hit that plus sign body. And then I’m just going to start typing. And really what I’m going to do is just copy this text. So we don’t have to spend the time. All right. So there it is. And now I’m going to drag that into its position there. All right. And then we’re going to create a button.
0:39:29
Now here’s how you create a button. Most of you would say, oh, I need a rectangle. And then you put no. What did I say? Use frames, right? Two ways you can do this. One, you can just start with a, whoops, you could start with a frame. I hit F on the keyboard and draw my frame. And then you can add like a background color to it. So we can say we’re going to do black. And then you could start typing in it. So you could put the little type tool in it. Start typing, position here. OK.
0:39:55
But that’s a lot of steps, right? So what I do is I hit the text tool. And I type my button text, which is get a quote, let’s say, or get an estimate. Let’s do that. And then I hit Shift A to create an auto layout frame. And then I just add a background color to it. So I hit fill black. And it fills it black. I select the text. I come over to fill white. It fills it white. Now I can make the frame either constrain hug contents like this, or, and if you want to hug the contents, but you still want padding, it’s cool.
0:40:32
You could come over here. Now this is even padding, or it says padding around items. If you want uneven padding, like you want to control it on all sides, just like you do in oxygen. And by the way, I would set that to center all the content in this frame. You can go 10, 10, and maybe 30, 30. And it’ll do that. Maybe you want a bigger or like a wider button, 40, 40. There you go. So there’s your button. And now I grab this text. Let’s do medium on this. And let’s do a style of text button, just like that. All right.
0:41:09
And then you can have a fill style as well, but I’m just using black, because this is a wire frame. And let’s say I wanted a little bit more, maybe 16, and 16, a little bit taller button there. And then let’s say I wanted to round the corners. I can do this little box up here, allows me to round the corners super easy. All right, so there are my items here. And there’s a couple ways you can align these all with even spacing. You could select all of them. And you could go up to this icon and say, distribute vertical spacing. And now they’re all evenly spaced out. You could, let me set it back to the way it was.
0:41:44
You could drag them until you get the markers that say you have even spacing. See that? Now they’re all 25 each. Either way, you want to do it. Now what I want to do is grab all of these. And I want to frame the selection. Or you can hit shift, or command, no, shift A. Yeah. There you go. Shift A, auto frames them with an auto layout, right? And you can see the auto layouts turned on. And because nothing changed, except for the fact that now I can move things around in here. And if I add new things, like I want to add another paragraph, it’ll start, everything will move accordingly.
0:42:23
So see the button moved away as I added more content in here. And when I delete, it’ll move the button back to its position. I can now automatically control the spacing within this grid. Or with it, I call it a grid, because it behaves like a grid with a gap, right? Auto layouts behave like a grid with gaps. That’s probably how you should think about it. Now I can move this to where I want it to be. Let’s get our grid back. So I’m aligning this all perfectly. And now I can control my attachment. So I can say, all right, for this, and this is cool, OK? Let’s check this out. For this text, I want it to be centered.
0:43:02
And I wanted to attach to the left hand side. For this image, I want it to be scaled. So this is a little bit different. So I’m going to hit scale. And then I want to attach this image to the right hand side of this container. So let me zoom out just a little bit. Let me go to like, because that’s too much. Let me go to like 90%, like 80%. There we go. All right, so if this gets bigger, look what happens. The image grows with it. It’s like you put height 100% on the image, right? Or flex one on the image. And then the text always stays in the center.
0:43:43
So if you want to adjust the height, you don’t have to move everything around in your frame. Because you’ve built the frame properly. And then if you wanted more space here, because you’ve made this thing bigger, you could do 30. And that’ll get more white space, OK, more breathing room, whatever you want to call it. But see how we’ve tried to do things the right way. And that’s why I’m doing this tutorial. I get files back whether the wireframes are UI from designers all the time who they’re great at what they do, but they’re not great at Figma. And they haven’t set things up like this. So there’s no auto layouts on the nav.
0:44:22
There’s no auto layouts here. They’re not doing this kind of stuff properly. So when you go to make changes, think about this. Let’s take this constraint off. Let’s say you didn’t do this right. So that’s constrained to the top. And it’s constrained to the left. That’s the default. This is constrained to the top and the left top by default. And now I’m like, OK, why’d like this here to be a little bigger? OK, so now I’ve got to do this. And now I’ve got to grab this. And I got to pull it down. And oh, but it came off my grid.
0:44:57
So now I’ve got to come over here and do this. You see how this is a huge pain in the ass. And then if this wasn’t in an auto layout, you’d have to move all this stuff around manually. It’s just no bueno. No bueno. So let me undo all of that. So to do this properly, we’ve created the frame. We created this frame with the auto layout. We do the attachments properly. So I want this to be left. Actually, is this vertical? I want vertical to be center. And I want this to be left. On the image, I want it to scale vertically.
0:45:32
And I wanted to attach to the right hand side of the container. Simple steps. Save you tons of time, right? And make this super responsive. If you were to grab your main frame and change the width of it, now we have other issues. So we have to see how we’re attaching stuff inside of that. But the good news is, with the wireframe, you set your width. You’re not going to really change that unless you start doing mobile versions and things like that, which we’re not going to cover there. But you can absolutely solve this problem right here with some other different attachment options. OK, we need to keep moving.
0:46:12
And I’m not going to build this whole wireframe for you. I just want to show you some things that you’re going to run into. I want to get maybe down to this gallery. We’re not going to do the rest. I’m just going to get down to the gallery. All right, so the next section is this text and then this box of the features. So I can actually steal this. What are we going to do? We’re going to add another frame or hit F on your keyboard. All right. We’re going to make sure that’s all lined up. And then I’m going to call this the intro. Try to always name your stuff.
0:46:45
And I’m going to paste that in. Now, this is part of our new frame. But it keeps its same attachment. So it still attached to the center and it still attached to the left. Now, what I’m going to do is hit F, and I’m going to build a brand new frame here. And I’m going to give it a background color. All right. This, as you can imagine, is going to be our little box here for the Y Choose Us for Swimming Pool Construction. Did I name all these properly? OK. That’s not done properly.
0:47:17
That needs to be chosen as my body text, which we need to adjust the style on real quick. So I’m going to do 35 on that, or actually 36 for the line height. And then we will grab that and make sure that it’s body text. OK. Cool. That’s better. All right. So with this box, I wanted to overlap. But the problem is there’s two problems, really. Well, it could be potentially two problems. One problem is that by default frames clip content. So they don’t allow content outside of them, unless you choose to have the content go outside of them, or choose to turn off the clipping.
0:47:54
So we select the frame. And right here, it says Clip Content, Bam. Now watch. I can drag it, and it can overlap other things. That was something that tripped me up for the longest time in Figma. So hopefully, that helps you out. So I’m going to drag this and align it with the edge over there. And I’m going to make this box come out to about there. OK. All right. Good. I think we need to go a little further. Snap. There we go.
0:48:20
All right. And then I will grab that frame, and we’re going to do like a five on that for rounded corners. OK. The other challenge you might run into is that if your intro is below your hero, it will, the hero will clip what you’re trying to overlap. So in your structure panel, you need to make sure things are layered properly, so that, remember, things at the top are on top in Figma. Things at the top are on top. All right. So just make sure that that’s good to go. And then what are we going to do here? We’re going to just throw in a heading.
0:48:52
And you’re going to see how this becomes super, super, super useful. All right. So why choose us? All right. I’m going to put that here. And then look, I’m just going to come over here and choose my H accent. There you go, just like you added a class to it. Next thing I’m going to do is add my text and then this. Now these two things are aligned next to each other. So what we’re going to do is hit 01 here. I’m going to break off that style. And I’m going to go with 40 on the number, or 60 on the number. Perfect.
0:49:25
Bring that up here. I’m going to do 60 as the line height as well, so we don’t need any excessive line height. And then I’m just going to steal this text. And I’m going to drag it in, make sure it’s white. And let’s just cut it off like right there. And then I’m going to bring that in there. And I want to make sure it’s in the frame. It is in the frame. I can see it right there inside of the frame. So that’s all good. And maybe I don’t want it to be. Maybe I only want it to be two lines, even though that sentence doesn’t make any sense whatsoever. So now I’m going to grab them, and I’m going to frame the selection.
0:50:01
And I can even auto lay out, and it’s going to make it all good to go. I don’t actually have to move anything around. And then I’m also going to auto lay out this black frame. Now notice it changed its height, because the default is to hug the contents, which is fine. So as I add more of these, you can see that it just behaves properly. But if I did want it to be a certain height, and let’s just do this because it’s a good lesson, I’m going to make it a certain height, which is like 7, 4, 39, whatever, 38. And then what I’m going to do is is there a button in there? Yeah, there is a button. So I’m going to steal this button and drag it in. Bam, I pop it into the auto layout.
0:50:44
Now watch this again. As I drag it in, you’re going to see, well, let me put it out. Let me drag it back in. See that blue bar? That’s showing you where in the auto layout this can go. I can put it there, and it would put it in there. But it’s going to break our layout, right? Obviously, I want to put it below. Boom. Now, if you have an auto layout that’s in another frame that doesn’t have an auto layout, you might drop this in the wrong position on accident. So that little blue bar shows you where this item is going to go, or it gives you a preview of where the item is going to go.
0:51:17
I’m going to change that fill to white. I’m going to change that text to dark and bam. OK. So one thing I want to show you at this auto frame, it’s really cool. We can go up here to how this content is positioned. I want it to be centered maybe. But watch this. Just like in Flexbox, where you do space between, you can do that in Figma, space between, bam. And it’s going to space it all out to take up the entire space of the container, regardless of how big that container gets. That is super useful as well. Now, I don’t always use that.
0:51:54
I’m going to use Pact. And then I’m going to use, instead of dragging this up, because look, that’s not good spacing. That’s actually incorrect. I’m going to use HugContents. And now it’s going to respect the padding values that have been put in here. Now, where do these values come from? Remember, I put in content before I created the auto layout. So it shows, based on the way I position content, to assign padding based on how my content was already positioned. But you can always change that to something even. Like you could say, 60, 60. Maybe I just want to do 60 around all sides. Bam.
0:52:31
Then it got smaller in the wrong direction because my attachment is the wrong way. This needs to be attached to the right hand side of this container. So I’m going to attach it to the right. By the way, you can just click the little button right there. You don’t have to come down here and then choose right. You can just click the little icons in here. All right, and this one is center right there. So I’m going to attach it to the right. And then this one, I’m going to attach to the center. And there you go, center right. OK. So now, if I put this back, let’s test it. When I hug contents, I’m hoping it hugs it the other way.
0:53:09
Let’s see if it does it. So I’m going to say hug contents. Bam. There you go. It kept it attached to the right hand side so it wouldn’t break the layout. All right, so this is fantastic. I’m going to pull this over here. And I can let that. OK, so this is another good example. Here’s a frame. Here’s text inside a frame. But it doesn’t go all the way to the edge. If I drag this all the way over, that text doesn’t get any bigger. Because it’s own kind of frame.
0:53:37
It’s not a frame. But the text is really a frame in itself is set to a fixed width. If I hug contents, look at that. It’ll go all the way over. Now, I’m not sure why it allowed itself to break out of that frame. Oh, is it because the clip content wasn’t on? Let me try that again. No. Oh, there we go. Sorry. It’s not hug contents. Because the content is as wide as it can be. It’s fill container. So you have the option to fill the container with the content or hug the contents, which could be a fixed width.
0:54:11
So there’s your fixed width. Text baves a little bit differently. I want to do fill container. Boom. Now when I change the container width, look what happens. Otherwise, if it was hug contents, and I change the width, it just clips it. And if I’m not set to clip, it allows it to expand out. And so that’s some of the things that kind of confuse people. I know it confused me in the very beginning of using Figma. It’s like, why is this frame that’s supposed to be containing this text, not constraining that text? It’s because that text is set to hug the contents, which respects the text, not the container. If I say fill container, then it will respect the width and constraints of the container itself.
0:54:56
So that’s definitely something to be aware of. All right, the same thing would happen with this. You would want this to be fill container. Look what happens if you do fill container here. It makes the button full width. So it’s not respecting the width or the contents of that button anymore. Wow, that’s a mouthful. Hug contents. So I feel like that’s a pretty good little summation there for that section. And we built it. Let’s go on and do the next section. So we’re going to do these little cards here. So all I’m going to do is start with a frame and I’m going to call this frame reviews.
0:55:36
And then I’m going to create another frame. How are we doing on time? We’re doing OK. All right, I’m going to create another frame inside of it. I’m going to hit F and draw a frame. Just any box will do. And I’m going to make sure that it is a gray box. And then I am going to drop some text in it. Let’s make it a little, oops, let’s make it a little bit bigger. So I’m going to grab it and there. OK, I can move it up, centered in the frame. And then I’m going to add some text to it. And this is going to be actually, instead of doing that, I’m just going to steal text from here. And I’m going to drop it in here.
0:56:11
Now, remember, this isn’t really, there’s no auto layout stuff happening yet. So I’m just kind of playing with stuff. All right, so there’s going to be the review. Is there anything else in there? Yeah, the reviewer name. All right, so I’m going to duplicate this. And then I’m going to say reviewer name. I’m going to drag that down here. That’s going to be bold. And I can make a new style out of this, even though I haven’t really changed it, I can break this off. And I can create a new style immediately called text review, like that. And then this can be text review name.
0:56:48
So I’ll create a style here. Text review name. Not exactly BIM, but I’m just moving quickly here. All right, so I’ve basically created my card here. Now I’m going to open up and see where we’re at with our layout. And what I really should do is if I want three up, we’ve got four columns times three is 12. So if I do four columns wide, that should work out well. Grab these and center them. It’ll snap it to the center. And then I can just duplicate, and I can drag it into position. But before I do that, let me make sure first, all of our, it’s all in the reviews frame. I’m going to auto-lay out this. So Shift-A gives me the auto-lay out.
0:57:34
It shows this poorly, though. So I’m going to make sure that it’s vertical. And I’m going to check on the alignment here. We always want to be centered. And then yeah, 10 pixels of padding looks good. And spacing between items is 10. That looks good. Let’s make sure that this is behaving properly. OK, it’s not something’s wrong with this. Let’s see what we’ve got going on. Oh, OK, yeah. Sorry, I put the auto-lay out on the wrong thing. There. Yeah, these two things should be inside of this frame. There you go.
0:58:11
Got it. OK. So I don’t know what happened there exactly, but obviously when I did the Shift-A, it was on the wrong item. So now, because I was like, yeah, that’s going to seem like 10 pixels of padding. So let’s go with like 30. And is that 30 on the edges? Yeah. And then let’s go with like 20 between. OK. And then maybe I want this to be a fixed height. So I wanted to be about that tall. And in this case, I actually want to space between. That looks pretty good.
0:58:46
And let’s just use more padding in there. So let’s use like 50. OK. That gets me to about where I want it to be. All right. And we’re going to use a fixed width. And we are aligning everything to the center of this. And it is aligned to the left. OK. Let’s make sure it’s in the center. Now I’m free to just duplicate here and duplicate one more time. Perfect. And now what I want to do is auto-lay out these. So I’m going to go to frame selection, auto-lay out.
0:59:19
There we go. And then I’m going to add another one. Excuse me. And I’m going to add another one. And then I am going to, because the frame got super big, right? I’m just going to drag this into the center. There’s our snap. OK. So now we have effectively what we wanted, which is if I take our layout grid away, it’s the reviews going off the page. All right. And then if I delete one, it brings them in. Now I should attach this frame differently because of the way this is structured.
0:59:51
Let me zoom in. I’m going to grab the frame. And I’m just going to say center everything. OK. Now if I delete one, it keeps them all centered, right? It didn’t take away from the left or the right. It took it out of the center and moved them all in. And if I add another one, bam, if I have another one, it’s just going to keep the exact alignment that I want. Now I’m going to make this frame, because I don’t really want any padding around it. I’m going to make it hug the contents. Let’s see if I can do that. Constraints. Here’s that frame, reviews.
1:00:25
OK, I could do this. OK, yeah, sometimes it doesn’t allow you to hug the contents, which I’m not sure why that is. But I can just drag it into the right position. There we go. All right. So I’m going to drag that up to where’s our other frame, right there. OK. Perfect. OK, we have one last thing to do, which is this little gallery section. All right. So I’m going to turn off this. We’re going to take a look at these headings.
1:00:55
I have two centered headings now. First, I’m going to create my frame with F on the keyboard. Drag this up to here. I’m going to call this gallery. OK. Now I’m going to grab my text. I’m going to do an H1, because that’s as close to an H2 as possible. Our work speaks for itself. Perfect. Now guys, this would be moving a lot faster if I wasn’t taking all the time to explain all of the different aspects of this. I’m going to unhook H1. I’m going to change this to like 38.
1:01:32
And then I’m going to resay that style as an H2. All right. And then I need another thing, which is a pool construction project. So I’m going to say pool construction projects. And I’m just going to change this to an accent, like that. Put that right above. Perfect. OK. So we’re in our frame. Next, I need to make our gallery. Make that a little bigger. Oh, and then I want to show you the footer. We need to do the footer, because it’s super important. So just bear with me.
1:02:07
Let’s just whip up the gallery real quick. So I’m going to grab an image here. I’m going to paste it into our frame. I’m going to bring this down and just say that, actually, give me my grid back. So this is going to be, let’s say, 3. So 3 appears to be like 344 wide. So it’s snapping. OK. I want to be 344 tall as well. So it’s a square. And then it’s a wire frame. You know, that has to be perfect. Actually, what we should do is just continue to use our little grid here.
1:02:48
Perfect. But I can clearly tell, because there should be 20 pixels of spacing between them, and there’s 24. Yeah, I’m on. There’s your 20 right there. And then I just need to move these over. Perfect. Now it should be perfectly aligned to the grid. All right. Now you can auto lay out these if you want. So Shift A, boom, gives you an auto lay out. It keeps the 20 pixels of spacing. You can just duplicate the frame and bring it down. And then you see we’re running out of space, right?
1:03:25
So if I just grab our home right here, our home frame, and drag out, bam, I have more space. OK. Very simple. I can do the same thing with this one. And because the attachments are defaulting to the top, you can always drag from the bottom without messing anything up. If you drag from the top, things are going to move around. All right. But you can change the attachments like I’ve already pointed out. So now I’m going to take these, and I’m going to frame them up. So frame selection. And I can even auto lay out these. And now I can always add another one, and it’ll keep my spacing.
1:03:57
Now what’s happening is it’s clipping the content of the frame. And the frame is not set to hug contents. Which sometimes these parent frames, I have trouble figuring out how to get them to hug the contents. But alas, it is what it is. Maybe because they’re not in an auto layout. That’s probably why. Yeah, that’s probably why. OK. I’m trying to move quick here. Move this down. What else do we need to do? I’ll just add a button down there so I can literally just steal a button from right here. Or let me grab this one.
1:04:31
Bring it down here. Let’s give us some more space. Now, because the button is always going to be the last thing in the frame here, I may want to attach it to the bottom. And I definitely want to attach it to the center left and right. So now, if I drag this up, it’s going to move. Now notice nothing else is moving. So how is this attached? It’s attached to the top. Actually, we want to grab all these, probably, and attach them all to the center. So we’re going to do center. And we’re going to do center. And now they’ll all move together.
1:05:10
But they’re not centered yet, because I haven’t actually dragged them to the center of this frame. But now they are. So now they all move correctly. And I can get the exact spacing that I want. Now, sometimes you want to make things bigger, frames bigger without the items inside moving. You don’t have to turn the attachments off. You can hold. I think it’s command or alt. It’s command. So if I hold command, I can make this bigger. And the attachments will not. It’ll ignore the attachment, right? Or if I don’t do command, it will respect the attachments.
1:05:47
OK, let’s jump down and do the footer. Let’s do that here. So I’m going to hit F. Let’s draw our footer. This is going to be black. OK. And we’re not going to do everything involved here. I’m just going to put in some stuff. Let’s show you how to do these columns. This is very important, probably. So I’m going to hit F again and draw another frame. Let’s get our grid open here. Now, this becomes where the grid is actually very difficult to see. So you can drop the percentage down on your fill here. And then you can do your alignments.
1:06:25
Let’s get it aligned in the center right there. All right. And so that’s my frame container for my links. So what I’m going to do is add some text inside there. And we’re just going to choose Link Nav here. I’ll do Home. All right. And then I’m going to make another one. This is going to be called. And what I can do, let’s just grab this right now. So you can see. And I’m going to auto-lay out this frame. We’re going to make sure it’s a fixed width. And then I can just start pasting here. So about services, contact us, join the team, whatever.
1:07:05
We’re just moving quick, right? And then I can change spacing between them. I can change the color of all of these. So these are all going to be, I’m going to create a fill style of white, let’s say. OK. Color styles add. We’ll just say white. For some reason that’s not white. Let’s say white. OK. Let’s unlink that. What happened here? Oh, I added these on accident. OK.
1:07:39
Got it. All right. So we’re going to add this. No, no, no, no, sorry, sorry, sorry. I always think that’s adding the style. You’ve got to be in here, then click the plus sign. Now it’s white. And good. OK. We should be good. All right. It seems like there’s no pass to the unit. That’s what I’m trying to figure out. But hopefully there’s not. Let’s get out of here.
1:08:00
And then let’s go back to 100% here. Yes. OK. We’re good. All right. So we probably want to align all that to the left. And we want to take away, we actually don’t need any padding in here. So I can take away all of this. OK. Perfect. All right. Now I could grab another one, put it next to it, grab another one, put it next to it, columns of text, right?
1:08:31
And then if you wanted to auto-lay out these, shift A, bam. They’re going horizontally. Now you can set this to 60, even spacing between. You’ve got your three columns. Now if I want to add more links to this one, I can. If I want to add more links to this one, I can. I can move links around in here. Very, very simple. What I really wanted to show you here, let’s get this attachment to, let’s put it in the center. I’m going to be doing anything else here. And then let’s attach it to the center and the center. Now I can make this whatever hide I want. And that’ll stay attached. And I’m going to attach, because it’s the footer, I’m going to attach it to the bottom.
1:09:11
And to stick with me, we’re going to talk real quick about components. And I think that’s all you need to know. So attachment. Attach to the bottom. And then attach to the center. Now watch this. If I want the page to be, because look, there’s a big gap here, where we’re not going to put anything. Let’s say this is going to be the last section. Grab my home. And all I have to do is that I drag my frame, my main home frame up, and I get exactly what I want. Now, if you wanted to add something else and watch, if I want to add more content in between there, I just hit home, drag the frame.
1:09:46
The footer comes with it, because it’s attached to the bottom. Now I have space to do something else. But if I wanted to move the frame, remember my SEO stuff that I put down here? I want space below the footer, but I still want the footer to be attached to the bottom. Hold command, drag. You get extra space. It ignores the attachment. Now I can put something down here. And once I go back to changing the height, it’s going to respect the attachment again. Look, it knows where I left it, but it knows that I still want it to be attached to the bottom.
1:10:17
Very, very powerful stuff. That’s why I wanted to show you. OK, so let’s do one other thing. That would also be if you have extra space, and you want to get rid of that extra space, and you’re like, oh, I can’t. Hold command. Now you can. Boom. Now let go command, and suddenly you can drag and it stays attached. So that’s all good. Let’s talk components. So I’m going to take this header, and I’m going to turn this into a component.
1:10:44
Where is it? Create component right here. Bam. And it’s going to turn purple. And it’s going to turn purple in here, and it’s going to get this little component icon. I’m going to come down to the footer. Think of this as templating, right? And actually, what I should do is duplicate this home frame and call this a primary template. Now I can effectively grab all this stuff and delete it. There’s your inner content element. Here’s your header. Here’s your footer. And I can even make this super small if I want to.
1:11:16
So I can drag this up. And there about. So I’m only dealing with my header and footer right here. And now what I’ll do is we’ll undo. Let’s delete that for a second. OK, that one was never done. We can delete that one as well. OK, so there it is. So that is a component. I’m going to right click, create component here. So my footer and my header are both components. Now what I can do is I can duplicate it, and I can bring it over here. And I can drop it in this frame. This is my home page, right?
1:11:54
All right. I need to move it up just a little bit. There we go. Now hold on. What’s going on? Zoom in a little bit. There we go. All right, so I’ve got my home in there. I’m going to duplicate or just copy my footer here. And I’m going to paste it in. Now this is not inside this frame, because I never got a blue box. There we go. Now I got a blue box. I’m dropping it in the frame.
1:12:15
Boom. And now watch the power of this, OK? So let’s say you have a dozen pages. I’m going to paste, paste, paste, paste. Look at all these pages we’ve built. Wow, they’re beautiful. And now you want to change something in the footer. Or you want to change something in the header. And you’re like, do I have to go page by page by page and doing all of that? No, because you created components. So check this out. Let’s say we want this to be, we want to add a navigation item. It’s going to be called, let’s copy paste. I have a new one.
1:12:47
And the key here is you have a master component. And then you have like children components. Here’s the difference. See that icon is full. Click this one. The icon is empty. That’s how you know which one is a master and which one is a full. You can also go to go to main component. And it’ll go to the primary component. The primary component is like the template. It controls all the others, all the children. So I just added something here. So home about us, what else would there be? Like, I don’t know.
1:13:16
Click here, whatever. So now I go over here. Look at this. It’s in all of them. Fantastic, right? So I go to the original. Again, let’s go to the footer this time. And I’m like, you know what? I want to add a logo in here. OK? So I’m just going to grab my logo. I’m going to come down. And I’m going to paste it in. And I’m going to move this down. Move that in, align it.
1:13:44
Perfect. Make it a little smaller. There’s going to be our logo. Let me grab this group and that and drag it into the center. Make sure it’s all good there. OK. So now I have a logo in my footer. Let’s zoom out. I have a logo in all my footers. OK? This is the type of stuff you don’t want to mess up. You want to get this stuff down and know how to do it right before you get started so that you can not hit these snags where you’ve created 15 wire frames. And now you need to go change everything independently inside of the footer.
1:14:18
Now there’s other stuff you can do with components that are really powerful. But this is just the basics to get started. And it’s best practice. So I would create like a primary template just like you would in oxygen. And then that will govern your global components just like you govern those global components inside of oxygen. So that’s it. That’s the crash course. Without a plan, I just did a crash course on Figma to create some wire frames. This should be more than enough to get you started. Let’s talk about previewing. When you’re ready to preview, send it to the client.
1:14:50
You hit the little play button here. It’s going to give you a full screen, full res version of that wire frame. This is my primary template. Hitting left and right on the keyboard will allow you to navigate between the two options. And then prototyping is actually very easy. If you want to actually make, oh, by the way, there’s a new file, you can share the prototype independently. Anyone with the link, copy link, can view the prototype. You can create comments on your, so if I hit the little comment bubble, I can say, hey, this will be for getting an estimate. And then when you’re reviewing with the client, I make comments in real time.
1:15:29
So they’re like, yeah, I want image 745 to be there. OK, this is going to be image 745.jpg. Bam, put a comment on there, right? You can put them all over the place. Remove this button, right? Boom. And then you go back to your file and you turn on commenting and you can see those comments. And you can go make those changes super easy like that. So that’s it. That’s the rundown crash course to Figma. Let me know if you have any questions. If there’s anything I didn’t cover, that you want me to cover, let me know. That’s it.
1:16:05
See.
