2.4 Practical Uses for Auto Layout

Hello and welcome to lesson number four, where we'll learn a few practical ways to use Auto Layout. So let's begin. The first and probably the one that it's gonna be used the most is for creating buttons. We all know the problem of creating buttons in most UI design tools, right? You start with a rectangle and then you add some text. And then let's make this a little bit smaller, maybe 50 in height. And then you, Align these vertically and then you nudge these. So you get the same padding on the left and right. In my case, this needs to be a little bit smaller, right? So something like this. And then you maybe make a group of this. What the problem is, once you change the text, you would then have to go back to the button background and resize this. And recheck its padding so that it's the correct amount. And this might not seem like a very difficult task, but in time it really adds up. So with Auto Layout, we can do this much easier. I'm gonna select my text I'm gonna do Shift+A to create a frame with Auto Layout. And with my frame selected, I'm gonna add the fill color that I want. And I can also change the radius. And then, I can change the padding here. So we have 30 and 15. Distance here doesn't really matter because we don't have another item. But now, let's also change this to white. Now, if I change the text, Right, the button background resizes automatically with my text. So it's a much faster way of doing things. Not to mention if I want to change the font size, let's say 24, Right, the button background automatically resizes. If I want to change the padding, let's say 45 and 25, I can do that as well very easily. And just like that, we have a button, That totally resizes with its text, and that's super easy. If you wanna do buttons with icons inside, for example, that's also super easy to do. Let's grab an icon, and I have an application here called IconJar. I can select any icon from here. I can export it in a variety of formats. I'm gonna choose SVG and then I'll take that and drop it in Figma, and I could paste it in the same frame. I can set its orientation to align centre or its alignment, excuse me. Make sure the text is the same. And now I can select my mainframe and I can set the distance between items to whatever I want, 30 for example. So now you'll have a 30 pixel gap between text and icon. Let's go ahead and change this color as well. And that's super easy. And now if I change the text, you'll see the icon stays exactly where it's supposed to. And the background of the button automatically resizes. Same thing if I change the font size, it does that as well. If I change the size of this icon, let's size to 16, that resizes automatically. It stays in the middle and I can also change the distance here. And again, the background of the button resizes automatically. How cool is that? This is a fantastic way of creating buttons with or without icon inside. Cool, let's move to our next element which is a text menu. So lets say that you're designing a menu with a bunch of the links for your website, right? You'll have stuff like Home, Portfolio, About, Blog, and Contact, right? So traditionally, you would select all of these and either distribute them. Excuse me here, distribute them horizontally. But that doesn't give you an exact amount in most cases. Here it's 15. But if you want more than 15 then there's a lot of math involved. Or you can do like this. If you want, for example, 30 pixels in between, you'll select these, And move them manually. One more, do the same for these two. And do the same for the last one. All right. So to avoid this problem, right, let's say you have them like this. You can select all of these. Shift+A to add Auto Layout, and this created another frame with a horizontal Auto Layout. And from here you can simply change the alignment or the distance between items, excuse me, as you please. Are you changing one of these links? The others will change their positions accordingly. Maybe you wanna change the font size. Well, that works as well. Do you want to change the orientation? Maybe you change your mind, I don't want a horizontal menu. I want a vertical menu. Well, go ahead and change it from here. And now it's vertical. Do you want this to be aligned or all the items to be aligned to the left? Well, that's simple. Select all of them, align them to the left, like this or to the right, or to the middle, or to the left. It's really up to you. Do you wanna change the distance between items now? That's totally doable, even in vertical mode. Super easy, super helpful. Now, what about an icons menu? Well, let's grab a couple of icons. Let's do just some random ones. Let's export these as SVGs. And let's drag them into Figma. Let's select all of them. Shift+A. And now let's add like 30 pixels of distance between them. So imagine that this is like a bottom menu. You can add a fill to your frame. Let's say this. And also let's add 30 pixels padding. Let's go ahead and make all of these white, okay? And let's say that, for example, I want this icon to be on a different position. I can drag it or I can use these arrows. That's totally fine. What if I wanna change the size of these icons? Well, simply select all of them. And let's make them 16 pixels. So much smaller. Maybe the padding isn't right on the top. Let's do 15. It just works beautifully. Now, let's do a more complex example like WordPress comment. So if we think about it, a WordPress comment has a few elements. It has an avatar. It has the name of the person who commented, the date, the actual comment, and the Reply button. So let's see how we can create that with Auto Layout. I'm gonna start with an oval tool. I'm gonna make it let's say 50 by 50. And then, we're gonna have the person name. Below, we're gonna have the date. Now, let's do slightly different styles for this. And then we're gonna have the, Comment body, and then we're gonna have a Reply button. So let's grab one of these. Let's do some minor changes to this. I'm gonna change the text to say Reply. Change the padding here a little bit. So lateral should be, I don't know, 20, 15. So that should do it. So now, how do we create an Auto Layout for this? Well, first, let's start here. These two, Shift+A. And I'm gonna set a distance between these two of, let's say, 8 pixels. Then, I'm gonna do Shift+A with these two elements. And it's going to be vertical. Make sure this is aligned to the left. And we're gonna set the distance to 24, right? So 24 pixels between the comment body and the date. And then I'm gonna select these, Shift+A again, make sure it's vertical. And I'm gonna select, Again, 24 pixels is gonna be between the button and the comment body. Now I'm gonna select these and this, Shift+A again. This is gonna be a horizontal Auto Layout. And let's put, 16 or maybe 32 pixels of spacing between items. So now, once we populate this and I actually have a plugin here. All right, let's do some alignment fixes here. This needs to be aligned to the left. This is to the left. This is to the left and the buttons to the left. And let's get this text. It's gonna say, grow vertically. I'm gonna set a width for this to about 300 pixels. And then, let's put a picture in here, and we have a nice comment. So now, whenever I change the comment body here, notice my reply button is pushed down. And then I can also select my picture here and I can change its alignment. Maybe I want this to be aligned to the center or to the bottom. I'm just gonna leave it on top. And that's how easy it is to create a WordPress comment with Auto Layout. If at some point I want to change the distance between these items. Let's say that it's too big of a distance between the title or the author and the date. Well, I can select this frame and I can say, okay, maybe instead of 8 I want 4. Maybe instead of 24 here I want 32, all right? And maybe 32 here as well. So you're able to change this layout simply by changing some numbers. There's no individual selecting of items, checking the distance between them. Nudging them into a new location, and then re-doing the rest of the layout for the other elements. It's super, super simple. And for our final example of a practical use for Auto Layout, we're gonna build a very simple contact form. So contact form, you basically have a couple of fields and a button. So I'm gonna start here with a text for the label. Let's say name. I'm gonna use Roboto, bolt 13. Let's do a 3% letter spacing. And then this is a placeholder. This is gonna be Roboto, regular. Let's say 16. And let's change the color here a little bit to maybe 35. Let's do a Light Italic. Shift + A on this text to create a frame with Auto Layout. I'm gonna add a fill, let's keep it white. And I'm also gonna add a stroke with a very light gray like 5% black. I want maybe 15 or 16 lateral padding. And let's do 24 top and bottom. Let's put 0 there. Let's make this a vertical Auto Layout. And let's create a fixed width for these items, maybe like 320. And make sure this text is aligned to the left. So now let's take this, let's align it to the left. Let's also add maybe like a 5 pixel border radius. Select these two, Shift+A. This creates a vertical Auto Layout. And the distance between the label and the input, let's put it at 8. So now, I can duplicate this, select, Shift+A. This is gonna be for EMAIL and let's say I want 32 pixels in between these elements. So now you'll see that when I duplicate this field it automatically adds a new stacked element that's 32 pixels from the one before it. Let's say this is the SUBJECT, and then typically, we would have a, Message. So in this case, we don't actually need Auto Layout. We'll simply make a bigger frame, and let's not forget to align these properly to the left. And let's also, Change the opacity here to 10%. And finally, let's add a button. Let's change this font size to 16. And that's all there is to it. Now, if l want, for example, my subject to be after the name, l can simply move it up, move it down. It's really easy. If l want more distance between these items, I can change it here. Let's say I want 40 or let's say I want 24. Super easy. Maybe I want a little bit more distance between the label and the input. I can select these. I can say I want 16 pixels. How cool is that? You saw just how fast you can now work in Figma because of this Auto Layout feature. All right, and that's pretty much it for this course. I tried giving you the basics of working with Auto Layout and also showing you some practical example. So I hope you found this course useful. Go ahead and play around with Figma's new Auto Layout feature. It's definitely a time saver. And I'm gonna be using this from now on a lot, let me tell you. So thank you very much for watching. I'm Adi Purdila and until next time, take care