Layouts and alignment - Figma Tutorial

- [Instructor] Layouts and alignment are essential features to understand when working with auto layouts in Figma. So let's quickly learn how we can work with both of these properties and apply them to our responsive design. So as always, open up Figma and make sure you download another exercise file. Here in the Figma project, we have four simple objects positioned horizontally, next to each other. So I'm going to grab all of them and apply auto layout by clicking on the plus icon in the auto layout section. Now, in our auto layout panel, we have layout properties, including vertical, horizontal layout, and also wrap layout. So since we had a row of objects right here that were positioned horizontally next to each other, Figma applied a horizontal layout by default to this auto layout frame. So I'm going to grab this auto layout frame and duplicate it with Control + D shortcut and place it right here on the side. So right now, I'm going to actually change my layout from horizontal layout to the vertical one. And now you can see how actually these objects are stacked under each other along the vertical y-axis. It's important to know that you can still work with spacing settings. So in my case, I have the value set to 10 pixels, but I can, of course, change it to increase the fixed gap to the value of 20 pixels, or actually leave it as it was by default. I'm going to duplicate this frame one more time with Control + D shortcut and place it right here. So I'm going to change my layout mode to wrap. And right here, you can see that objects will be positioned horizontally and when the frame width is reached, they will wrap to the next row. So at the moment, we see no difference between wrap layout and also horizontal layout. But if I'm going to actually grab my auto layout frame and decrease its width, you can see how actually the objects are being wrapped to the next row. This feature can be useful when working, for example, with image galleries or other user interface elements. With each layout direction that we have here in this project, we can work with alignments. So that means that we will have to work with this control. So if I work with my wrap auto layout frame, we can see that, by default, the alignment is set to top left. I can also change it to top center, and now you can see how everything is aligned to the center. And in the same way, I can also change it to top right. And now you can see how everything is actually aligned to right as well. The same approach applies when working with other layouts, such as horizontal and vertical layouts. So for example, if I grab my horizontal layout frame, we can see also that alignment is set to top left. We can, of course, also change it to the center, but as you can see, nothing really happens. This becomes quite handy when, for example, you increase the height of your auto layout frame, and right now, you can see how actually, everything is aligned properly to the center. So if I'm going to change my alignment to bottom center, you can see how actually all objects are aligned to the bottom. In the same way, we can align them to the top. It's worth noting that in each of these examples, we have a specified gap between the objects in our spacing setting. So for example, in my horizontal layout frame, we have a value set to 10 pixels. We can also work with auto setting in our wrap frame. So right now, I'm going to change from the fixed gap to auto spacing. And now, we can see quite a similar alignment feature in this window. So I'm going to actually quickly increase the height of this auto layout frame, and now, you can see how you can align everything, either to the top or to the center or to the bottom. So this is how you can easily work with layouts and alignment in Figma. So now, it's your time to go ahead and try it out with the help of this exercise file. Good luck.