Figma for Busy People: Mastering Auto Layout

1. Welcome to the Class: Figma is pretty awesome, but let's be real. Some of its features like auto layout can feel very complicated sometimes, right? The thing is, once you get the hang of it, it's a total game changer for your Figma experience. And this class is all about making auto layout fun and easy, no matter where you're starting from. Everyone. My name is Adi, and I'm a web designer and developer with over ten years of experience. And I've made a lot of courses and tutorials on the topics of Figma, UI, UX Design, web development, and more. And usually, my courses are very detailed. But this one is different. This one is designed specifically for busy people who don't have a lot of time to spare, but still want to learn something valuable. This course is concise, yet packed full of essential information. Now, in my opinion, auto layout is Figma's most powerful feature. Whether you're creating websites, apps, or any other digital content. This can seriously speed up your workflow and make your designs more flexible and responsive. So let's break it down. We'll have six main lessons, each focusing on one fundamental aspect of auto layout. We'll start by learning how to add auto layout to your design and how to organize and arrange objects efficiently. Then we'll move on to nested frames, which are essential for building complex layouts. In the third main lesson, we'll explore something called layout flow, which dictates the direction and position of elements. We'll have a look at how spacing works in auto layout and how to use gaps and paddings. Then we'll talk about alignment and the various ways of ensuring elements are perfectly placed. Finally, we'll dive into the available resizing options that allow us to create dynamic layouts. Now, I designed this class to be very practical. So each one of these six main lessons has a theory part, which I call basics, and then a practical part, which I call practical application. And for each practical application, I will recreate a layout from a real website. I start with a screenshot of that layout and some design specifications I prepared beforehand. Then I show you step by step how to recreate it using auto layout. On top of that, each major lesson has an assignment. For you. And there are six assignments you can make. These are meant to help you practice what you've learned in each lesson. By doing them, you'll understand the theory a lot better. Plus you'll get some much needed hands on experience. And the assignments are just like the practical applications with one big difference. I also provided written instructions that will help you recreate the layout I selected. So if that sounds interesting, I will see you in class. 2. Assignments & Class Project: Hey, welcome to the class, let me tell you about the assignments and the class project. There are six assignments you can do. You can find these in the Figma file linked within the class details under the Projects and Resources tab. Now, you can either do all the assignments after you finish watching the class or one at a time. It's really up to you. My suggestion, do each assignment after it's a related lesson. For example, watch the lesson about spacing, and then do the assignment about spacing. Now, the class project goes like this. Once you've completed all the lessons and the assignments, your task is to select a layout that you like and recreate it in Figma using, of course, auto layout. So very similar to the assignments, but this time you get to pick the layout, and there are no design specifications prepared by me. You'll have to figure those out yourself. To help you with that. I've created a Figma file that you can find linked. It's uploaded to the community here at Figma, and it's called Skillshare class project. All you got to do is open this while you're logged into your Figma account, and then click on this button here that says Open in Figma. And that's going to create a duplicate for you in your Figma account. Now, inside this file, you'll find the following structure. We basically have a section here with two frames, reference design and recreation. What you need to do is grab a screenshot of the layout that you want to recreate, paste it in this first frame reference design. So you'll have you know, something to reference. Additionally, you can go in here at the bottom and put a link to the website that you grab the screenshot from. This is entirely optional. Of course. And then in the second frame, where it says a recreation, this is where you'll basically recreate that layout. After you're done with that, go ahead and select this section, that's called Skillshare class project, and go to the bottom right. I already prepared an export rule for you. You export it as a one X PNG, and then you post that as the class project on Skillshare. Now, sharing your progress has its perks. First, you can see what your classmates are working on, the layouts they picked, and how well they recreated them. Second, you're not just learning theory. You're actively engaging with a project. I would love for you to share your class project with us. And remember, if at any point you feel confused about a certain topic or you have any kind of questions, please post them in the discussion area, and I'll do my best to help you. With that said, let's get started with the class. 3. Adding Auto Layout to Your Designs: Auto layout is a property that can only be applied to frames. So it doesn't work on groups, it doesn't work on sections, only frames. And you can use it for very simple things, like a button, which will change its size according to the text inside, or for creating complex layouts, like this one, which is made of multiple auto layout frames, each one with different properties. And we'll explore the various use cases for auto layout in the upcoming lessons and really learn about its complexity. But for now, I want to show you how to add it to your designs. So, in Figma, we have a simple frame, and to add auto layout. All you got to do is go to the inspector click on the auto layout text here or the button. And that's it. To remove it, you just click the minus button like so. Alternatively, you can right click on a frame and then go all the way down here where it says add auto layout or use the keyboard shortcut Shift A like so. And to remove it, you would do the same thing, right click and then remove auto layout, or use old shift A on windows or option shift A on a MAC. Now, once you add auto layout to a frame, you'll get access to a couple of different options. This is where you control the direction of the layout. This is where you control the alignment. This is where you set the gap between the items. And these two boxes are for horizontal and vertical padding, and don't worry, we'll be discussing all of these in a lot more detail in the upcoming lessons. Now, one of the coolest things about auto layout is the way you arrange or reorder elements inside the frame. So, for example, if I wanted to move this first box to the right, all I got to do is use the right arrow key or left, if I want to move it left. If I had a vertical auto layout. I would use the up and down arrow keys to move it or to change its position. Alternatively, I can click and drag with my mouse and move it anywhere I want. And Figma will move that element, and it's going to keep the same alignment and the same spacing between items that I set on the parent frame, which is fantastic. Now, you can also add auto layout to individual elements or groups of elements. And I know that I said auto layout can only be applied to frames. However, Figma automatically wraps those elements in a frame if they're not contained in one already. So here's what I mean by that. We have a second demo here. If I select these two elements, they're just, you know, stand alone layers here in the layer panel, and I can do Shift A That's going to create a frame. See, they're now wrapped inside a frame here, and this frame also has auto layout applied to it. How cool is that? This right here is a group, as you can see in the layer panel, it's called group 87. Now, if I do Shift A, and let me actually just show you the contents here, two boxes. If I do shift A with this group selected, that group is now a frame with, of course, auto layout. Now, you might be asking, how do I add an element to an existing frame that has auto layout? Well, it's as simple as click and drag. So if I want to add this to this frame, here, all I got to do click drag, and it's in. I want to take it out. Click and drag outside the frame. And Figma will automatically resize that frame to just match the within height of its children, more about that later. Alternatively, I can, you know, take this command X or Control X, select the frame and just paste it inside Command or Control V. Now, let's have a look at a practical application. And for this lesson, we're recreating a layout from loom.com, and it's this list right here with four items. We basically have a check icon and a piece of text. So, in Figma, I recreated the text elements. I brought in the icon. So let's start by Moving this up here, command or control D to duplicate it. Three more times. And then on the left, apart from the screenshot, I also added some design specifications, like the space between each list item, and also the space between the icon and the text. So let's do that. And I just want to preface this by saying that this type of layout will be incredibly easy to create with auto layout if we were using all the bells and whistles, like the GAP functionality, the alignment functionality, we're not there yet. So we're going to use just the minimum amount of auto layout magic, and we'll do the rest manually, like the alignment and the spacing. Okay? So let's start with the alignment. First, we'll select each icon and text, and then align them, excuse me. Like, so, and like so just align them to the center. And then I'm going to select the text, hold down ult or option and hover with my cursor over the icon to get the distance between them. And then I can use the right or left arrow keys to nudge or to move the text left or right, one pixel at a time. At 29 now. I need to be at 16, so I'm going to do one, two, three, and then shift left to move it ten pixels at a time, and now I'm at 16. Let's do the same here. I'm at 46, so I'm going to do shift left, left, left, and now I'm at 16, 30, so we'll do one, two, three, four, Shift, left, and now I'm at 16. Same here. Shift left, and now I'm at 16. Great. Now, I'm going to select each icon and text shift A. Shift A, shift A shift A. I now have four auto layout frames. Select all of them, align them to the left, and now it's simply a matter of setting that 24 pixel gap between them. So we'll do the same as before, hold down option or ult, hover on the element above, and use the arrow keys to g in place, like so. And that's how you add auto layout to your designs. Next up, you have an assignment. 4. Assignment: Adding Auto Layout to Your Designs: Now that you're more familiar with auto layout and you learned the basics, it's time to get some practice in. And the assignment for this lesson is quite simple. You'll be recreating a layout from stripe.com. So if we go all the way down to the bottom in the footer of the website, you'll recreate this company list with three links. Now, there are three links on the live website. When I got the screenshot a little while back, there were four links, but that doesn't really matter. So this is the layout that you'll be recreating. You have a title, and then four links. And there is a four pixel gap between all of them. I went ahead and got the text elements all prepared for you. And also, I included some instructions on the left side, which you can use or choose to ignore the choice is really up to you. They're simply there as a helping hand. And just as a quick reminder, you'll find the link to the assignment file in the class details. And that's it. Go ahead and complete this assignment, and I will see you in the next lesson, which is about nesting auto layout frames. 5. Nesting Auto Layout Frames: In Figma, nesting frames means placing one or more frames inside another. It's very simple and fully compatible with auto layout. So let me show you how you would do that. Here we have two frames. One is a horizontal frame, one is a vertical frame, and they both have auto layout. Now, if I wanted to create a much bigger frame that contains both of these, I can do that in a number of ways. First of all, and the easiest is just to select these two frames and press Shift A. And that's going to add them both to a frame, or I should say, to a new frame, which has auto layout, as you can see here. And this allows me to create much more complex layouts by using both horizontal and vertical frames. Another option would be to just take one of the frames and drag it inside another. And you can do that from the layer panel. So if I want to put this one, the vertical frame inside the horizontal frame, I can go to the layers panel here, and I can simply click and drag inside. So now I have just one frame that contains the vertical frame and my two elements. In this case, frame with objects is a nested frame. Now, let's have a look at a practical application for nesting. And for this lesson, we're recreating a layout from get pixel snap.com. So if we scroll down, we can find this area right here where it says measure distance, and this is what we'll be recreating. Now, in Figma, I brought over a screenshot. I did some measurements to get the gap between the title and the description between the description and these features, let's call them. And also the distance between each feature and between the icon and the feature text. So now, we'll create the first frame that contains the title and the description. So let's align these to the left, and let's set a 14 pixel gap between them. Like so, select both shift A, first frame done. Let's create the features. So I'm going to move the text, move the icon. Select text an icon, align them to the middle, and let's set a 24 pixel distance between the two. Select both shift A. Do the same for the other one. 24 pixels, select align shift A. Now we have one frame, two frame, three frames. Let's create this part here a frame with the two features. So we're going to select both or sorry, we're going to just align them first to the left. Make sure we have the proper distance between them, and now we select both shift A to create the second big frame. Now, to bring it all together, we just select both of these frames, align them to the left, and we need to set that 42 pixel gap between them. So we're just going to select this and it up until we get to 42 pixels. Finally, we select both, and we do Shift A, or right click ad auto layout. It does exactly the same thing. So now, let's see what we have here. We have frame 96. This is our main frame. Then inside, we have the top frame that has the title and the description. And then the bottom frame. That has the two features. And each feature is a frame in itself, which has the icon and the text. So how many nested frames do we have here? Well, we have frame 94, so one of the features, that's one. The other feature, that's two. Frame 95 is also a nested frame, right because it sits within the bigger one. So that's three, and that's four. So we have four nested frames within this main frame. And that's how you nest auto layout frames. Next up, you have an assignment. 6. Assignment: Nesting Auto Layout Frames: Nesting auto layout frames allows you to build more complex design structures, and that's exactly what I want you to practice in this lesson. So the assignment for you is to recreate a layout from timely app.com. If you go to the product mega menu, you'll find this first section that I'm highlighting right here, so that's what you'll be recreating. I went ahead and added all the elements for you in Figma, including the icon and the text elements, and you also have some design specs, as well as instructions here on the left side, which you can choose to use or ignore the choice is really up to you. Now, once you finish recreating this layout, I will see you in the next lesson, which is about layout flow. 7. Exploring Layout Flow in Auto Layout Frames: Layout flow refers to the way elements are arranged within an auto layout frame, and it consists of three things. Direction, absolute position, and Canvas stacking order. Let's start with direction. Here, I have a frame with three elements, which are positioned one below the other, starting from top to bottom. That's because the direction in my auto layout frame is set to vertical. I can always change this to horizontal or a rap by clicking the other buttons. So a horizontal direction would look something like this where elements are positioned from left to right on a single row. Rap is a little bit special because Figma will automatically place items that don't fit on additional rows. So if I'm resizing this frame, and the elements on the first row don't fit anymore, they'll be displayed on the second row or on the third row. And Figma will do that automatically for me while keeping the same alignment and gap between items. So as a quick recap, a vertical will display items in a vertical fashion top to bottom, in one column, regardless of the height of the parent element. So if I'm resizing this, the elements stay in one column. Hizontal, displays the element left to right in one row regardless of the size of the parent frame, and a wrapping will display or will move elements on additional rows if they don't fit when I'm resizing the main frame. Now, let's move on to absolute position. So I have a frame with two objects, and I added this white border so you can see the boundaries of that parent frame. If I were to drag this element inside, the frame will resize to accommodate its contents. If I select this element and I move it left, right, up and down, Figma will automatically place it in set positions depending on the alignment and the gap between items. So I cannot move this element freely anywhere that I want. However, if I go to the inspector and I click on this button that says absolute position, two things will happen. First of all, the frame just resized itself to match the w and height of the original two elements. Basically, the frame doesn't even consider this pink element as part of it. And second, I can now move. I can freely move this element anywhere I want within that frame. And if I want to move it outside of the boundaries of the frame, I can hold down space bar. That's a protip for you right there. And it's not going to take the layer outside of the frame. Just move it just change its position, basically. That's absolute position. Finally, let's discuss Canvas stacking order. That's super easy to understand. I have an auto layout frame here with three boxes, and I'm using a negative gap between items more about that later to overlap them. So, as you can see here, they are placed one on top of the other. And if we look at the position in the layer list, we have box one, two, three. So box three sits on top of everything else. Box two sits between box one and box three, right? Visually. Now, if I select this frame, and I go to the inspector in the auto layout panel and I click on the advanced settings, I can change the Canvas stacking from last on top, which is the default to first on top. This means that now the layer that's first in the layer panel, which in my case is box one, is going to sit on top. And then it's going to be followed by the others. So now box three sits behind the other two boxes. Now, let's have a look at a practical application. And for this lesson, we're recreating a layout from airbnb.com. More specifically, one of these listings, which includes an image, some text information, some icons, and in some cases, a guest favorite badge. So, back in Figma, I grabbed a screenshot of one of those listings, and I also added some design specifications. I also brought in the image any icon that we might need, and I created the text elements. So let's start recreating this layout. With the guest favorite badge. This is a simple frame to which we add a background, a border with and height, and we also make it around. So that's quite easy to do. Let's select this. Shift A to create a frame with it. We're going to set its height to 26. We're going to add a fill color. And we're going to add a border white, one pixel. And also, let's make it round, like so. Next up, let's start with the text here at the bottom. So we have tile distance date aligned to the left with no gap between them. So let's do that. Title distance date. Let's align them to the left, and let's not leave any gap between them. So with these three selected, shift A, and that's our first frame. And because the items were initially positioned one on top of the other, Figma is very smart about this, and it set the direction automatically for us to vertical. Next, we have the price, which sits at six pixels from the elements above. So let's do that. We'll align everything, and we'll set it to six pixels like that. Shift A to create yet another vertical frame. Next, let's work on this rating here. So we have star, four pixel gap, and the rating score. Let's select both these elements. Let's align them to the middle. Let's place the icon here at four pixels, like so. And then we'll select both and we'll add a auto layout frame. So now let's move the text up, and let's move the rating horizontal frame up as well, align these with the image. Then we'll select both of these, shift A to create a horizontal frame, and then select this frame and the image, shift A to create a vertical frame. Now, the last two elements that we need to place are the guest favorite badge and the hard icon. They sit on top of the image, 12 pixels from the edges. How do we do this? Well, if we grab these elements and we move them over our main frame, they will just be positioned according to the direction of the frame, in my case is vertical. However, I can select them, and I can go to the inspector and click on absolute position. And that will allow me to move this element freely within the auto layout frame. And with a little bit of nudging up and down. We are able to position these correctly, leaving that 12 pixel gap from the edges of the image. So that's our finished frame. We've used several techniques here, nesting for one, and also we created vertical auto layout frames, we created horizontal auto layout frames, and we also used absolute positioning on these two elements. And that's about it for layout flow. Next up, you have an assignment. 8. Assignment: Exploring Layout Flow in Auto Layout Frames: All right, it's time for you to practice using layout flow in Figma. And your task is to recreate a layout from Notion. This is the Notion website, and if you scroll all the way down, you'll find this section. So you'll be recreating this box, along with the image on top of it. And back in Figma, I, of course, provided a screenshot, some design specifications, and also the raw images, text, and icons, along with some instructions that as usual, you can use to get a helping hand or disregard and do everything by yourself. So go ahead and do the assignment, and once you're done, please join me in the next lesson, which is about spacing. 9. Mastering Auto Layout Spacing: In oral layout, we have two key methods for controlling spacing. And those are gap and padding. Let's start with the gap, more specifically, the gap between items, and in an oral layout frame, the gap between items is always equal. So in this example, I have 56 pixels between the first and the second item, and again, 56 pixels between the second and the third. And I can easily change the gap by clicking on the handles and dragging here, or I can go to the inspector and I can enter a value manually here, let's say, 50. I can also do math operations. So I can do 50 times two or plus two or minus two or divided by two. It works just the same. I can also click and drag on this handle here to change the gap manually. Now, in horizontal and vertical frames, I have a single value for the gap. However, if my frame is set to wrap, I have values for both horizontal and vertical. And by default, the vertical gap is the same as the horizontal one. But I can override that. I can have this be a totally different value, and I can also change them from here or from here. And if I want to go back so that the vertical gap is the same as the horizontal one, I can simply select this delete, press enter, and they'll just revert back to being linked with one another. Now, the gap can also be a negative value. So let's change this back to a horizontal layout, and I can just drag this until I get to minus whatever, -100. In which case, my items, my child elements are overlapping. They're stacked one on top of the other. And I can change that gap from the Canvas or from the inspector just like I showed you previously. Now, the gap can also be set to auto. And here's what that does. So a numerical value we'll basically set the same amount of spacing between the child elements regardless of the size of the parent frame. But if I set this to auto by either going here in the Inspector, clicking the drop down and selecting Auto, or by clicking on the handles and typing auto. It does exactly the same thing. It uses the largest distance possible between items regardless of the size of the parent frame. So I can resize it like so, and Figma will automatically add the same distance between all the items. It will calculate that on the fly. Really, really cool. And there's also a very handy keyboard shortcut for Tuggling between auto gap and number gap. So if you click on the alignment box here and you press x, that's going to Tuggle between auto and a number value. Now, let's move on to padding. And the padding is basically the space between the boundaries of an auto layout frame and its child elements. And to illustrate that, I added a white border to this auto layout frame. So you can see where its boundaries are. And you can add padding by going to the inspector, you can use these two boxes. To add horizontal padding, which means left and right or vertical padding, which means top and bottom. Alternatively, you can click on the box here to change the padding like so, or you can use the handles here on the Canvas, like this, or you can click and enter a value manually. You can also hold down the option or old key, while clicking on these handles to change both opposing sides at the same time. So that means top and bottom or left and right. If you also hold down shift, you can change all four sides at the same time. In the inspector, you can also enter two values in here. So, for example, 5030, we'll use 50 padding left, 30, right. Same thing goes for bottom. Ten, 20, we use ten on the top, 20 on the bottom. And you can also click Individual padding, and that's going to allow you to change each individual side to your liking. Since we're here, you can also hold down control or command and click on any of these boxes to change all four sides at the same time by entering the same value. Now, let's have a look at a practical application for GAAP and padding. And for this lesson, we'll be recreating it another layout from a get pixel snap.com. And we're going to recreate this first part of the hero section, which has the title, the two buttons, and the 30 day money back text. So back in Figma, I brought in a screenshot, and I also did some measurements. I created some design specifications. And I recreated the text elements, and I brought in the icon that we're going to place right here in the second button. Speaking of buttons, let's start there because a button is one of the main use cases for auto layout. That's super simple to create, and it's going to allow that button to resize itself as the text inside changes. So let's actually recreate this first button that says by now. And we need to add a background to it, a linear gradient. Border radius change the text color to white, and we're also going to change its padding. So let's start by selecting the by now button. Shift A to add it to an auto layout frame. And we're going to add the necessary padding here. Or actually, you know what? No, let's let's add the fill color. So we're going to add a linear gradient here. So let me actually zoom in here so you can see what we're doing a little bit better. So we're changing the first color is going to be F E 84 B. Second, is going to be FA 4567. Since we're here, change the text color to white. And now let's change the padding. So if we look at the specs really quickly, we have 30 pixels. Lateral or horizontal padding, and 14 vertical padding. Let's also change the border radius to eight pixels, and our first button is now complete. How easy was that? And of course, if I'm going to change the text here, by now, or by let's say today, you can see the button just a resizing to fit the text element. Let's move on to the second button. This is very similar, except we have this icon. So let's go ahead and first of all, align these. Shift A to add them both to an auto layout frame, and we have a border to add here, so let's do a two pixel border. And let's also add the necessary padding, so that's 30 horizontal, 14 vertical. We'll change the corner radius to eight, and let's change the gap between items to ten pixels, just like that. And that's our second button complete. Now, let's move on to the rest of the layout. We need a 30 pixel gap between these two buttons. So let's create a frame with both of them. Select both, shift A, and then change the gap to 30 easy. Now, let's set a 40 pixel gap between the text and the two buttons. So we'll roughly align these to the middle. Select both shift A, and we'll set the gap to 30 pixels. And finally, we need oops, that was 40 pixels there. Sorry. And finally, we need to set 55 pixel gap between the title and these other elements. So select everything, Shift A and 55. There we go. Those were positioned perfectly. So, by using the spacing techniques as well as some other techniques that we've learned previously, we were able to very quickly recreate this layout. So we used padding to create the two buttons, and we also used the GAP property to set the spacing between all the elements in our layout, as well as the spacing between the icon and the text inside the second button. And that's about it for spacing. Next You have an assignment. 10. Assignment: Mastering Auto Layout Spacing: This assignment is all about mastering auto layout spacing because you'll be working with paddings and GAPS a lot. So your assignment is to recreate a layout from cleanshot.com. We're talking about this first part of the hero layout, which starts from here, and it ends with this 30 day money back text. And to help you, I've added as usual, the screenshot, some design specifications, and all the text elements. And also all the icons are prepared for you alongside some instructions, here on the left side, which you can choose to use or ignore. It's really up to you. Now, go ahead and complete this assignment because it's very, very important. And once you do that, join me in the next lesson, where we'll talk about alignment. 11. Achieving Perfect Alignment: Before we get started, there is one important thing you need to understand. And that is, you cannot control the alignment of child objects separately. Instead, you set the alignment on the parent frame. And here's what I mean by that. Right here, we have three elements. Shift A to add them to an auto layout frame. And if we look in the inspector, we have the alignment box. Currently, all three elements are set to align top left. And if I were to resize this frame, and let me show you the bigger picture here, changing the alignment option, we'll move all three elements in the direction that I want, or align them in the way that I want. And I can align them to the all four sides. So top, right, bottom left, as well as top left, top middle, top right, and so on. So if I want them to be right in the middle of my a parent frame, both horizontally and vertically. I just click right here in the middle. If I want them to the left, but vertically in the middle, I just do that. You get the picture. But the idea is they all move at the same time, they are grouped together. They are aligned as a group, and I cannot change the alignment individually. On any of these. So I cannot have this first element be aligned top left and this other element be aligned top right. It doesn't work like that. And you have these nine alignment options pretty much all the time, regardless of the direction your frame is set at. So even if it's set to vertical layout or horizontal or um, p, you have the same nine direction that you can choose from. There are just subtle differences, for example, when you're setting it to p, you'll have a different icon here. And the items, you know, will be aligned slightly differently because you might be dealing with multiple rows. But most of the time you'll have these nine options. That is, of course, until you change the gap between items from number to auto. So when you do that, when you change to auto, you no longer have nine alignment options. You just have three alignment options. And depending on the direction of the layout, these can be either left center or right on a vertical layout, or top center or bottom on a horizontal layout. And if you swap this to wrap, then, you know, you have two gaps, and the alignment options also change there. Now, at any point, you can click on this box and you can use the arrow keys on your keyboard. To move the active point, so to speak. So currently, if I press right, it's going to move that to the right. If I press left to the left, top bottom, you get the picture. You can also press WASD to move them to the corners. Like so. And before moving on to a practical application, I want to quickly tell you about another alignment option, which is called text baseline. So when you have horizontal, careful, horizontal only ordo layout frames, you have the option to align text elements to their baseline. And what is a baseline? Well, essentially, it's this line right here that the text sits on. Okay. So here I have two text elements of different sizes. And if I create an auto layout frame with them, I can choose to align them to the top to the center or to the bottom, but none of these options really look that good. I would like to align their baselines. Okay? And you can easily do that if you go to the advanced auto layout settings and checking this box right here. And that will essentially do this. It will align the baseline of text one with the baseline of text two. Really, really handy, and you're about to see exactly a very cool use case for this technique. Now, let's do a practical application. And for this lesson, we'll be recreating a layout from kineticlabs.com. More specifically, this part right here that offers information about a certain product. So, I brought everything to Figma. As usual, we have the screenshot, along with some design specifications. And I also brought in all the necessary images. I recreated the text elements. And I went ahead and created some of the frames like this button or this stack of stars just to save a bit of time. So with that said, let's recreate the layout using the new techniques that we learned today about alignment. Let's start from the very top with this part. I want my stack of stars, one pixel gap, rating, ten pixel gap, and then a link for the reviews, and everything has to be aligned to the middle. So let's do the stars, select these. Let's make sure the alignment here is set to middle, and let's set the gap to one. And then let's bring in the reviews. Select both of these. Shift A. And again, we're going to make sure the alignment is set to middle. And we're going to set the gap to ten pixels. So that's our first bigger frame done. Now, whenever creating these complex layouts, I always try to see elements that I have the same gap between them, and then group those in an auto layout frame. For example, the first three elements in my layout have the same gap between them, 16 pixels. So grab these three, shift A, make sure they are aligned to the left. I'm going to set a 16 pixel gap. Let's move on. We have the list here. So icon and text. And we have eight pixel gap between icon and text and a ten pixel gap between each list item. So then let's bring in the icons. Let's duplicate this. Bring the other. And then select the first one, shift A, align to the middle, set the gap. Let's do the same for the second one. Set the gap and for this one. And then select all three, shift A. Make sure we align them to the left and set a gap ten pixels. That's our second frame complete. Let's move on. We have the price, and then pack of 18. No gap in between, but they are aligned nicely using the baseline, the text baseline. Okay? So select this. Shift A, I'm going to change the layout to horizontal, click here and press B. That's the keyboard shortcut for Tuggling text alignment on and off. And let's just remove the gap there. So, that's frame number three. Next up, let's see, we have this quantity text, which is already done, and then we have these buttons. So we have plus minus. Each button is 48 pixels in size circle, and with the icon placed exactly in the middle, and then we have a number in between them and 16 pixels gap. So let's start by creating the buttons. Now, these icons here are already frames, as you can see from the layers panel, and they contain a vector inside. And since they are already frames, we can go ahead and add auto layout. Shift A. And in the inspector, I'm just going to change with and height. I'm going to change the border radius 2100 to make it a perfect circle. And then I want to make sure the icon is positioned exactly in the center, so I'm going to click this. And then finally, I'm going to add a border one pixel dF dF D F. Let's do the same for the minus. And then we'll grab the minus and the number. Select all three, shift A. Make sure we align them to the middle. And we're also going to set a 16 pixel gap. And that's another frame ready to go. After that, we have the button, which is already made, and we still need to work on creating these two elements here. So icon, text, icon text. Eight pixel in between the 230 pixel in between the two bigger elements. Let's bring in the icon. Like so. And like so. Select these. Shift A, align to the middle. Eight pixel, do the same here. And now select both shift A, Align both of these to the middle and set 30 pixel gap. Now we have all the major frames completed. Now we just need to bring them all together and set the proper spacing between them. So let's start from the very top. We have first frame and then 18 pixels, and then this second section. So select all align them to the left. 18 pixels. Next up, we have 22 pixel gap and the price. And here, I'm actually going to show you a really cool trick. Instead of selecting both of these and creating another frame with them just so I can set that bigger gap. I can move this Inside the main frame, I can push it down, and I have currently 18 pixels gap, and I need 22. So I can make up the other four pixels by adding a padding top to this frame. So it goes something like this. I select the frame, I go in here, and I add four pixels. Right? That's just going to add four pixels of padding above basically the price text. And that four pixels with the other 18 that I have from the main frame gap gets me to 22 pixels. So that allows you to create these frames in a more efficient way and not overcomplicate them with a multiple nested frames. Really cool. Next up, we have 25 pixel gap until the next item, which is this quantity. So I can just command X this, paste it in. And since this is also a frame, I can make up the rest of the difference by adding a top padding. So I need 25 pixels, and I have 18 gap here. The difference is what seven pixels, right? So select this frame, add seven pixels to the top. And then we have 16 pixels between this element and the row of buttons. This is where I need to select both these elements, shift a to create another frame and then set that spacing to 16, because it's smaller than 18, which we had set as a gap for the main frame. And because I cannot use negative padding to get that to 16, I had to make another frame with these two elements. Now, let's select these elements, shift A to create another frame with them, align them to the middle and set the gap to 16 pixels. This is just going to make things a little bit easier for me because now I need to set the gap between this and the rest to 32 pixels, as you can see right here. So again, two ways I can do this, either select both these, create a new frame with them, or bate this directly in the main frame. We have 16 pixels here, and I need another 16. And because this is an auto layout frame, I can add 16 on top, and that will push it down just enough. So visually, I have that 32 pixel gap. So there you have it. That's how you can build a slightly more complex layout in Figma by using all the alignment and all the spacing and padding options we learned so far. Now, next up for you, there is an assignment, so I will see you there. 12. Assignment: Achieving Perfect Alignment: This assignment is about getting comfortable with alignment within auto layout frames. It's a super important one, so please don't miss it. Now, your assignment is to recreate a layout from nucleo app. And it's one of these pricing table sections. It's not exactly the one that you see on the live website right now. I have a slightly older version. Apparently, nucleo app changed its pricing page between the time I took the screenshot and when I started recording, but that's all good. You can still get a lot of practice even with this outdated version. So, as usual, I included the screenshot, the design specifications, and also all the text elements, the icons, and I also created this button for you, so you don't have to mess around with the gradients and all of that. Also, I included some instructions which you can ignore or use it's really up to you. So go ahead and do this assignment. As I said, it's very important, and once you're done, I will see you in the next lesson, which is about resizing with auto layout. 13. Resizing With Auto Layout: When resizing with auto layout, you can control both the parent frame as well as the child elements. And in this lesson, you're going to learn about the following three resizing options. Hug contents, fixed and fill container. As a bonus, we'll discuss min max sizing. Let's start with Hug contents. This works only on the parent frame, and it's the default behavior. So if I select these three elements and I add auto layout, Figma sets the horizontal and vertical resizing to hug, more specifically hug contents. This means the frame is only as tall and as wide as its contents. That means that if I were to delete one of its child elements, the frame will then resize. It's much smaller, right? If I add it back, then the frame gets bigger. Now, bear in mind that Figma will do this while keeping the same padding that I chose. So if I'm going to change the padding here to, let's say 30 pixels, it's going to make the frame as big and as tall as the child elements plus the padding that I have set to it. So, again, if I delete this one child, the frame will get smaller, but it will also maintain that padding. And if at any point, I have a frame that's set to know, a different resizing option than hug contents. I can always set it back to hug contents from the inspector, if I click here, I can set it horizontally, or I can set it vertically, or I can actually, and this is a pro tip, I can double click either a horizontal edge to set the horizontal resizing to hug contents like this, or I can double click a vertical edge. So either the top and bottom edge, like this to set vertical resizing to hug contents. Now, if you want your parent frame to remain fixed regardless of the size of the child elements, you need to set the resizing option to fixed. And you can do that in two ways. Here, I have a default frame that uses hug content, and to set it to fixed, I can either change a size from the canvas, you know, by dragging on any of the handles. And if we look in the inspector, now, both the horizontal resizing and the vertical one are set to fixed, or if they're set to hug content, I can enter a value manually, and that will automatically set it to fixed. And that works, of course, for both directions. And a frame that is set to fixed will not resize according to its child elements. So for example, if I were to make this element a lot bigger, you'll see that the frame because it's set to fixed stays exactly at the same size. So far, you've learned that Hug contents basically allows a frame to shrink or expand as needed to fit its contents to fit the size of the child elements. But what if you want a child element to shrink or expand to fill the entire available space within the parent frame? That's when you need to use fill container. Now, fill container only works on child elements. So let's look at this frame have two boxes inside. Each one is set to a fixed dimension. So when I'm resizing this parent frame, nothing happens. The child elements stay at that exact same size. However, if I select one of them, and I set, let's say, the horizontal resizing to fill container, that child element now takes up the entire available space. And Figma takes into account, of course, the padding inside the element and also the gap to the other elements. Also, if I were to set this element to be fill container, these two child elements will have the exact same size because they will fill the container in equal amounts. They will both take up the same amount of space. And if I added a third one, all three will now have the exact same size because they're all set to fill the container, so they will take up the same amount of space. I can set a child element to fill the container in the vertical direction as well, just like that. And that means that now resizing This parent frame will produce totally different results than we've seen before. The elements are now resizing along with their parent frame. And here's another protip for you here. If you have a child element selected and you hold down Option or ult, and you double click on one of its edges. For instance, this bottom edge, that will make that element or it will set its vertical resizing to fill container. Alternatively, if it's set to fixed horizontally, let's say, holding down ult or option and double clicking either the right or left edge, will set that item to fill container in the horizontal direction. Now, auto resizing can sometimes cause an element to break the layout if it gets too big or too small. That's why you can set minimum and maximum values for width and height. And this works on both child elements and parent frames. And it's really simple to do. Let's say that I want to allow this frame to resize But don't get too small. Like, when it gets this small, not good. I wanted to have at least 400 pixels. So to do that, you would go to the inspector where you find the width and you click the drop down and you add a minimum or a maximum width. So minimum width, let's say 400, and let's also add a maximum width of 800. So now, I can only resize this parent frame 400-800, which are the limits that I have set for it. All right. Time for a practical application on resizing. And for this lesson, we are recreating a layout from air call dot IO. More specifically, this one right here, this whole pricing table. So I brought it over to Figma. As usual, I grabbed a screenshot, I did some design specs. And I also recreated the text elements, I brought in the icons. And in the interest of time, I already made some of the more complex sections. Where, you know, we basically used techniques that we learned in the previous lessons. So now what I want to do is just complete this layout and show you some resizing techniques that will come in handy. First things first, we basically have two halves here. This left half is already done. It has an we should actually set it to auto. So Depending on the height here, this button always stays at the bottom. Now, I want this button to take up the whole available space. So I'm going to click it, and I'm going to set its horizontal resizing to fill container, just like that. Next up, let's move on to the right side where we have these separators, these gray lines in between each item. So I want to set those to also fill up the entire available space. So I'm actually going to select all of these, and I'm going to create an auto layout frame align them to the left. And I'm going to select every single item in here, and I'm going to set its horizontal resizing to fill container. And that includes the list items themselves, as well as the separators. And let's actually create as many separators as we need simply by duplicating and changing their position. We need to set that 32 pixel gap in between the title and the list. So let's do this. Shift A. We'll set the gap here to 32 pixels. And then we have this section at the bottom, which should also resize alongside everything else. So let's select these two shift A. We don't need any kind of spacing in between here. So I'm going to select this section, Alt double click to set it to fill container. Also select this or lay of frame. Do the same thing, set it to fill container, and then we'll do the same for these two. We'll set them to fill instead of ug. Now, when I resize this, things are starting to look okay, but not exactly. So this section on the bottom is fine, but not the one at the top. So let's set this one to fill container and then let's go down the order and set the rest. That's good. Let's also set the text elements. I'm just going to select all the text elements and set these to fill container. So now, when I'm resizing, Everything resizes accordingly. That includes the separator, the text, and these two elements at the bottom. Now, let's bring these two together. They are part of a bigger frame that has a white background. I has some padding applied to it. Select these both, shift A. And let's apply the padding first, so we have si four and 48. And let's do a fill white. Let's do 24 for the border radius. And we should be good to go. Now, what about the gap between these? Currently, set at 103. Let's make it a little bit smaller, say 96, and let's have both these elements set to fill container. So they take up equal amounts of space, and when I resize this main frame, those elements inside resize along with it. Now, there is one thing that doesn't resize. And that is this first half. And here I have a choice. I can set these to fill container as well. But maybe I would like these to stay exactly as they are. So let's actually set a maximum or sorry, a minimum width on the section. So currently, it's set 376 pixels. Let's set 300 and as soon and six pixels as the minimum width for the section. That means when I'm resizing, it will not go below that value. And I can do the same for the one on the right. I can say that maybe I want these to be a minimum of 450 pixels. So now resizing will basically give me this. All right. So that was quite a lot of information on a resizing. Hopefully, the basic demos, and also this practical application gave you all the information you need to understand it a lot better. Now, next up, we have an assignment or rather you have an assignment. 14. Assignment: Resizing With Auto Layout: The resizing aspect of Figma auto layout is probably the most complex aspect of it. And that's why you should get really familiar with it. And to help you with that, here's an assignment you can practice on. You're going to be recreating a layout from module system design, and if you scroll all the way down, you'll find the pricing section. So this is the section that you'll be recreating. It's bit more on the complex side. But if you apply all the techniques that you've learned so far, I'm sure you'll have no problem with it. I created everything you need. I brought in the screenshot, I made the design specs, and I've created the text elements and the icons. Of course, as usual, you have a set of instructions which you can choose to use or ignore the choice is really up to you. Now, that was the final assignment. So please join me in the next lesson for the conclusion and some final thoughts. 15. Conclusion and Final Thoughts: D Hey, congrats on completing this class, and thank you very much for watching. I hope you found it helpful, valuable and that you learned something new. I really enjoyed creating this class, and I look forward to seeing you in the next one. But until then, let's do a quick recap of what we've learned so far. We explored different methods of adding auto layout and organizing objects within frames. We discovered that auto layout frames can be nested, which is essential for crafting complex structures. We experimented with layout flow, learning about direction and absolute positioning. We mastered spacing techniques, including creating gaps between items and adding padding around them. Towards the end, we thoroughly explored all the alignment options within FICMa auto layout. And finally, we learned about the various resizing options and how to use them to craft dynamic layouts. So what should you do next? First of all, I would really appreciate it if you would leave a review for this class. Your feedback is in valuable, and it will help me create better classes for you in the future. Second of all, check out my profile and explore my other Figma classes. You might find something that you're interested in. I also run a YouTube channel where I share content on a web design with a focus on Figma and Webflow. If you're interested, feel free to check it out. You can also get in touch with me on X Instagram or Facebook. Links are in my profile page. All right. Time for me to sign off. Thank you again for watching, and I look forward to seeing you in my next class. Bye for now.