Auto Layout in Figma

00:00 I want to show you a super cool feature in Figma and it's called Auto Layout. It basically takes you from drawing rectangles on a canvas to feeling like you're building interfaces with Flexbox. I was looking for some inspiration to demonstrate what I want to show you and I found this simple enough example here from Behance.

00:19 So I am going to find that image and take a screenshot just for reference. There it is. And we're going to jump in Figma and paste that here. So let's scroll up and create an artboard so we get some space to work with. Doesn't really matter the dimensions of it. And let's say we want to start with this digital button here.

00:36 So I'm going to intentionally first use a naive way of building it. But just keep in mind that before Auto Layout this is how you were doing things. So check this out. We want a yellow background so I'll use R to get a rectangle and make a shape, sort of the same size. And I will crank up the border radius to the max.

00:55 Next we're going to pick the fill color and I'm just going to grab that with the color picker tool. And then I'll hit T which is going to give me a text here and I'll just put some text inside here. And let me actually make the UI at 100% of the zoom level and maybe I'll make that image

01:12 a bit smaller just so we feel a little bit more like we're working in real resolution. So let's make that a little bit smaller so we match the kind of new image size. And I'll make the text bigger so I'll go with 24 instead of 16. And we're going to place that sort of in the center.

01:30 And finally we'll keep Poppins, it looks pretty close but we'll change the font weight to semi-bold. Alright, so like I said, very naive. And let's try to get actually a little bit more precise. So I'll make a box around the text that I have and then I can select both elements and

01:46 I can vertically center them and horizontally center them with these tools. So see if it's left aligned, it's left. So now we actually have a nicely centered thing. And just to match this a little bit closer I'll make the button background a little bit less wide and this is where the problems start.

02:03 You can see I have to re-center align this but we kind of have our button. And I'll just build one more button just to drive my point home and then we'll switch to Auto Layout. So I'll drag and drop a copy of this and I'll go with like 16 or 12 pixels. That makes me feel pretty good that I'm controlling the spacing.

02:21 I'll change the color to color picker blue and this one is going to say design. And whoops, there's not enough space so make the box bigger which means we need to re-center. As I was mentioning it really feels like we're drawing rectangles and moving things around.

02:39 Let's pretend that these two were at the top left of the canvas. And so now someone say actually the first button should say animation and this is where you see that it gets really painful because animation is longer which means that I have

02:53 to move this button to the right and then make this background longer so I can make the text longer but then I made the text the button a little bit too long and yeah you get the point. We are moving rectangles around and this is really painful.

03:09 And if you think about it the way we drew that versus the way we would write it in HTML and CSS are completely different. The way we're setting up our canvas here is the equivalent of having absolutely positioned everything and then put fixed width and height and absolutely placed things which really feels a bit terrible.

03:27 Now enter auto layout so I'm going to delete everything I've done and we're going to rebuild it from scratch using auto layout. So I want you to think like a developer if you were building one of these tags or chips as they're sometimes called you would write the text and then add some background color

03:44 and some padding and some border radius and this is how it's going to feel so check this out. I'm going to start with a text node digital now instead of drawing a rectangle around it I will right click and select add auto layout and you can use shift a to make that

04:01 happen and look at what happens we have now a new frame which is containing the text inside of it and you can see that this frame has a new panel here auto layout. And ooh interesting top to bottom left to right wrap this already kind of sounds like

04:19 Flexbox right you can see the alignment the gap between elements the padding padding so we're not going to use really for one single chip any gap and Flexbox aligned properties but we can already use this for the internal padding and stuff so I can now select a background

04:39 color from that background that's been created with the auto layout so here I will select my yellow like so once again let's make the rounded corners to the max and now you can

04:55 see that if I bring it down here we can work much more like a developer would if I want to increase the padding on the left and right here instead of dragging my shape I can go in the auto layout and increase the padding like this ooh that's nice so let's go with

05:12 20 and then padding horizontal or vertical sorry seems a bit too big so maybe I'll go with 5 something like this and that's pretty cool and what's really really much improved

05:25 in this situation is if I change this to animation yes the text is dictating how much of the background stretch should happen we are no longer trying to match up the text with a rectangle behind it we have literally an element that has a bounding box with some padding

05:45 internally let's drag this beautiful button here and make another one and this one is going to say design and it's going to be blue nice so now we're still going to have that problem if I put them here where if the text changes on the first oh now this one hasn't

06:03 followed and the reason is our individual chips buttons are using auto layout but the parent is not and this is where it becomes very flexboxy here on the whole frame which is the parent of everything I will also add auto layout and check this out as soon as

06:22 I press plus it has jumped to the default of auto layout left align with some padding values that I had used previously but I can make that bigger and now we are in flexbox

06:35 land so align top left justify content and center center etc even can do space between with this which is then dictated by the padding how cool is this this is much closer to something

06:51 you would do as a web developer so I think we can have a gap of 12 between okay and we're going to start at the top left and maybe you can see there's a very little vertical padding and a little bit more here so I will go vertical padding pretty small let's go

07:11 with 10 and let's go with 20 left and right you know what 15 pretty cool huh so now I'm working with flexbox instead of just moving rectangles around and the really cool thing is if I draw another one you can see that I'll drag and it will literally no matter

07:30 where I drop it it'll put it at the end and if I move I can only go between one of these elements and it's really controlled by the flex parent which is super empowering so this

07:43 one could say hashtag and the field could be white we would need to give the frame here a feel of that dark black maybe let me quickly just duplicate these two drop them wherever

07:58 and then duplicate all of this and uh-oh see what happens here well the same happens in web development we are flex left to writing but we're not wrapping and so it just overflows and if we go wrap whoops my bad I have to select this and if we go wrap now look at

08:17 this we have a fully responsive flex if you change the text I know I'm repeating myself but I want to make sure this really clear you are much more like in the web behavior which is going to save you so much time down the roads and I think that's super super cool

08:36 and when you inspect things that have been built with auto layout you really have the full story of the spacing around the parent and then the gap properties which I think tells a much more web developer story let's take a look at another quick example where

08:52 auto layout is super useful I have a couple of components here we're not going to talk about components now but basically they can have multiple variants and what I want to do is build a to-do list that uses these components so I'll create an artboard here and I will

09:08 to make it nice add some rounded corners and I'll just add a subtle drop shadow let's make it a bit blurry and a bit less ready yeah something like this so just for fun I'm going to assemble this to-do list by just throwing stuff in random places without worrying at

09:26 all and then making the parents become auto layout flex parents and it's going to make everything controllable super easily so T for text and we're going to have the heading that says shopping list 32 that's too big let's go 24 make a bit wider and I want this

09:45 to be let's go semi-bold so it's gonna sit somewhere here but I don't really care for now and then I have these components that can be to-do or done and I can access them from here you can see to-do items so I'll drop one in here buy some milk and then we're

10:03 going to add another one learn figma and maybe we can turn this one to the done status all right so obviously now I would have to do the rectangle moving thing where we move this and then we move that and we try to align them up but instead you know better now let's

10:23 put this completely random places and on the parent here I'm going to define this as an auto layout shift a so what I want is my auto layout container to be top left go to the bottom and there's a few things that we need to sort out we want to have let's say

10:41 16 vertical and 16 horizontal and then we want the gap between the title and the items to be our 16 as well actually but now you can see a problem arising is that the gap between our title and our to-do items is also going to be the gap between each item

11:01 because every of this element is a direct child of the flex parent I really like that this UI shows us everything that we need to know about the vertical padding horizontal padding internal gap so we want their own flex child so we need to wrap them just like

11:19 in HTML you would wrap these in a div or something we can select these two and go command G to create a group which is basically going to wrap them in a container if it was a bit closer here like this all right so now we're going to make this group auto layout

11:36 as well so group shift a auto layout you can see right now the center line and I think it tried this because of the way this one was moved and felt more middle but we wanted it left the line and then we're going to go top to bottom and the gap is going to be

11:52 a bit less we don't want 16 here we probably want 10 or even 8 and basically this is our shopping list now we have the control spacing around it and if I add to-do items so drag and drop the next one and drop it again you can see that the parent is going to let the

12:11 content define its size just like the web instead of this absolutely position thing that we need to reshape every time I don't really need to do this but I'll just make this one to-do and walk the dogs because I haven't done that today and I want to show

12:26 you one more thing here the other component I have here is this badge we have info warning and let's say we want to say this one is overdue this shopping list is overdue and it's actually not a shopping list it's a to-do list we want to flag that it's overdue with this warning

12:42 sign and so I want to put this badge at the top right floating there so I'm going to let's go grab an instance of the component and I'm going to drag it somewhere up here and whoa

12:55 hang on I told you to go here come on remember auto layout is a flex parent and it will decide the flow of the elements so the only places that this hug hug info badge can go is at

13:09 the top between the title and the list or after and that's it I can't put it there as a web developer if you wanted to position this thing to the top right irrelevantly of the rest of the flow of the contents what would you do if you wanted to place this absolutely

13:28 in a specific place yes you would use position absolute well if I click on this thing you can see here there's this little icon says absolute position and if I click now my thing is out of the flow of the flex parent and I can put absolutely where I want so I'll change the

13:47 text to overdue and this needs to be a warning badge and then I'll place it somewhere like this and just like this we have built a pretty nice to-do list that is reactive and as we add elements

14:06 it'll grow and grow and always use the space that it needs and that is the power of auto layout I hope you enjoy this and it gives you some ideas to create compositions in figma and get much much much faster at prototyping and moving things around because you don't have to move things

14:25 around they will move alongside as you add composition to it