Figma Auto Layout Updates (2023) | Figma Tutorial

figma recently announced a bunch of exciting updates and one of the features that has been updated is auto layout so in today's video I'm gonna go through all the new auto layout updates and I'm going to show you the best ways you can apply them to your design so let's dive in here I have a Blog postcard that has been designed using other layout features as you can see it's responsive but if I try to shrink it like this as you can see these tags are cut off and that's not ideal that's because in the past we didn't have the possibility of wrapping elements wrapping other layout objects into a new line but that's not the case anymore because other layout has now this feature so let me show you how it works here I need to select this particular other layout frame this tags frame and if you head over to the other layout section as you can see now instead of having two different directions vertical and horizontal we have a new Option called wrap so if I set the parent element here in this case the tax frame to wrap you may think that nothing happened however look what happens when I select this blog postcard and I try to shrink it look what happens there it is as you can see now these other layout objects are wrapping to a new line which is awesome but that's not all I'm going to show you more use cases in a second so now instead of shrinking this card let me expand it I'm going to increase its width and as you can see this text grows this text layer grows that's because if I select it you can see that its resizing option is set to fill container so it takes up the whole available width of its parent element which is this heading and text however as you may know it's not ideal to have long passages of text so if you want to have an optimal line length you can now set minimum and maximum width and minimum and maximum height for your other layout objects it's so cool let me show you how it's done here let's suppose you want to set a Max maximum width for this text layer the only thing you need to do is Select it and if you head over to the design panel here you can see this drop down menu I'm going to open it up and it allows us to add a minimum width and a maximum width so in this case I'm going to set a maximum width for that I'm going to click on it and here I'm going to specify the maximum width value so in this case let's set it to something like 500 just like this and as you can see now we have a maximum width of 500 which means that this takes layers width cannot grow more than 500 pixels so now no matter how big our car gets this text layer cannot grow more than 500 pixels just like this but we didn't set a minimum width for that you can go ahead and do that as well if you want and I'm going to show you how to do it in a second so now I'm going to copy this blog postcard and I'm going to paste it in a frame just like this inside this desktop frame let me change the background color here for this desktop frame to something a little bit darker and now I'm going to duplicate this card twice let me duplicate it move it to the right and duplicate it once again and I'm gonna select these three cards and just add other layout to them so I'm going to hit shift and a and put them inside an auto layout frame and as you can see now we have all these cards inside this Frame one let me rename it to cards which is the parent frame all right let me align it to the center if you have used other layout before I'm sure you know that you can specify the spacing between your other layout objects right here so I'm gonna set it to 50 now but you may also know that figma could automatically decide this spacing for you and in the past if you wanted figma to automatically adjust this gap for you you needed to go to the advanced settings here and here there was an option called spacing mode and there were two options packed and spaced between we needed to set it to space between and then figma would automatically adjust the spacing between these cards depending on the main frame's width but that's not the case anymore you can now simply open up this drop down menu and here you can set it to Auto and now figma automatically adjusts the spacing between your other layout objects so if I just go ahead and resize this parent frame discards frame look what happens as you can see the gap between them is automatically adjusted it's not a new feature however the way you can apply it to your frames has been changed alright we basically covered all the new auto layout features however I'm gonna show you one more use case which is quite helpful so here we have this desktop frame and when we design a project we usually design the tablet breakpoint and the mobile breakpoint as well and most of the time we change the layout of our page depending on the screen's width so on tablet we may need to change the layout of this page so instead of having three cards in one row we may have two rows of cards and on mobile devices we may only have one column well in the past it wasn't possible to make these kind of changes using figma's native features but now thanks to the other layout new features it's possible let me show you how so here if I select this cards frame and I try to resize it as you can see the card's width is intact that's because if I select the cards inside you can see that they have a fixed width so let's change that I'm going to select all these cards and I'm going to change their resizing option from fixed width to field container now I'm going to select the cards frame and here I am going to change this horizontal gap between items from Auto to something like 32 so now we can maintain a 32 pixel margin in between and now if I go ahead and resize this parent frame look what happens as you can see these cards shrink and grow depending on the parent's frame size but how can we change the layout here let me show you how if I select these cards and I set a minimum width for them we can change the layout automatically so why they are selected I'm gonna head over to this drop down menu and I'm going to add a minimum width I'm gonna set it to 300 so these cards width cannot be smaller than 300 pixels now you may say that alright it should work but it doesn't if I select this cards frame and I try to resize it the layout doesn't change look what happens as you can see now as soon as I reach that 300 pixel minimum width that I just set these cards stop shrinking however what I want to achieve is this since we don't have much space here I want to change the layout I want figma to wrap these cards to a new line so how can we do that yes you're right we can use this new wrap feature so why this cards frame is selected I'm gonna set the auto layout direction to wrap just like this and look what we've got now figma can automatically wrap these cards to a new line isn't it interesting it's so powerful so if I just go ahead and duplicate this card like this and I select the parents frame and I try to resize it I'll get two cards in the next row which is awesome but look what happens when I keep shrinking this parent's element let me just expand my Mainframe like this and if I just keep shrinking this card's frame look what happens there we go now we have only one column of cards which is awesome I'm pretty sure you were waiting for this new feature and here it is thank you so much for watching this video if you found it helpful please hit the like button and subscribe to my channel for More Design tutorials have an awesome day and see you next time

Channel: DesignWithArash

Views: 92,633

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, Figma Auto Layout 2023

Id: jrQNtNm2-Qs

Length: 7min 39sec (459 seconds)

Published: Thu Jun 22 2023