RESPONSIVE FIGMA AUTO LAYOUT – The Gamechanger Figma Feature is Here #config2023

you can now set up fully responsive layouts thanks to a new auto layout feature that figma announced just yesterday at their conference and in this video we're going to explore what it is and apply this to a project that I'm currently working on to see what are the possibilities of this new feature that I personally liked the most and that I'm definitely sure that you're going to find useful as well and start implementing in your projects so here it is basically what figma announced is a new rap Auto layout direction or mode where you can do this with your existing Auto layout items so what you currently see happening on the screen is just a native figma feature and it's it's pretty amazing I'm not gonna lie it's really good so you no longer need any plugins that would do this for you this is just a simple Auto layout frame with this setup applied you know with the wrap setup applied that then behaves like this so so here's the original that you know isn't responsive at all of course I took this from a 100 free course on designing a website in figma that you can find on my channel by going to playlists so I took this section this feature section from the website and here it is right before these adjustments it's not responsive at all it just does this I mean it remains centered and all that that's great but it's not this what what we're going for right and also keep in mind that I'm still myself getting familiar with all these new features so you can expect more videos on these updates in the upcoming days and weeks so what you need to do first to make this work is set a minimum width for these elements right which is also another feature that figma announced yesterday so basically you need to define the behavior and it this is a bit complex so let's just go step by step first of all basically What's Happening Here is that we have a container the feature section right that contains this headline this all the way out and then this button you can know this that features container has the auto layout set to wrap so this is like this is actually the section that we need to apply the oil layout wrap on so let me do that let me just take the take this features container Auto layout and apply wrapping to this so this is where you define which section or which part of the interface actually contains elements that need to be stacked beneath each other now that we've done this watch what happens when I scale this so first of all this feature section container is getting shrunk so this means it's it's set to fill container but also it has a max width and this Max width needs to be defined on this feature section as well so let me go to with with this feature section that contains the headline this Auto layout and this button and under width I'm going to use this drop down and add a Max width and the max width is going to be what's currently set to fixed so that's going to be 1152 so that's going to be the max weight additionally what I'm going to do is set the horizontal resizing to fill container and this is actually quite funny because a couple of weeks ago or days ago I launched a video on how all of these features work and this means that it's probably outdated as of yesterday so if you've watched that video and you're confused why it looks different than your figma interface don't worry I will probably have to address that in the future so here we have this features container set to maxed with and fill container so what's going to happen now is that figma is going to recognize that it needs to expand this object to as wide of an object as possible but at the same time respecting the fact that at the maximum width of this can be 1152 so what this produces is the behavior where when you scale this down this new this object scales down alongside with it and when you scale this up it scales up alongside with it only until a point when it reaches 11 52. so that's the step number one as you can see these features are getting squeezed right that's because their behavior is set to fill container as well which means it's gonna be it's gonna take as much space as possible so this space is gonna have to be split amongst these four objects that's basically how it's calculated right and how can we make them go beneath each other step number one would be setting this to wrap or layout but that doesn't mean anything on its own you also need to Define that this object cannot be scaled below a certain width so that means that when basically you scale this down right you see me scaling this down as soon as it reaches a certain point it starts to stack beneath each other because each of these objects refuses refuses to go under a certain width value right and the value right now is at this point I think 230. so let's do that let's select these 4 feature cards and set their minimum width to 230 so minimum width is going to be 230. right after I confirm this action you can see that it's beginning to behave as intended which means that now when I scale this down to a size where this approaches 230 pixels or points right 240 moving it a bit further right now it's 237.5 so when I continue it's now beginning to refusing to being scaled down further which produces the behavior that puts this on a new line right so because this has a minimum width and the parent element of this object has the wrap Auto layout set up that's why we get this behavior and when we get this tablet layout you can see that these objects are 224.5 which means that that is more than 230 but as soon as I start scaling this down and start pushing these back you know closer to their minimum width right Watch What Happens as soon as they reach 230 each right now it's at 248 so a few more points it should break right onto a next line so that's because figma knows that it cannot scale these down below a certain point but at the same time when there is no more space for these it simply puts them on a new line so that's the underlying mechanism of this responsive behavior and as you can see it's pretty awesome it's really really great so this is extremely easy to hand over to developers and to show them how this should behave you know scaling this up or down so this is really great and that's how we get this Behavior so I hope this clarified things up a little bit uh let's just go from scratch with this one and let's try and build an article list thing something similar to this but with particles right so right now this is a frame this is a frame so what we are going to do is something similar so step one was setting a Max width to The Container let me do that let me select the article listing container and go to Max with and add again 1152 and then go to horizontal resizing and go to fill container so again what's going to happen is that when I resize this down you can see that the container scales down alongside with it but because this is a simple frame with these objects nothing happens to these articles but the container is getting scaled down that's a good start and let's consider what is the width of these elements so right now it's 270 and let's just say that that is the minimum width these can be scaled to so let's select the parent element and then press enter to select the child elements again and let's set the minimum width to 270 right enter so this means you cannot scale these down below 270 even if I try to do this manually I cannot right now let's just select this articles frame and press shift a this is going to produce an auto layout and as you can see it automatically is being converted to a wrap Auto layout which means that when I make sure that this articles Auto layout is going to be set to fill container when I scale this down this should stack beneath each other let's try that right and this is great so that's exactly almost exactly the behavior that we need to make this way work flexibly similar to these features what we're gonna have to do is I think select them again and instead of fixed with we're going to have to set them to fill container and right now we should get exactly this Behavior so it's questionable whether you want to actually get this weird Behavior where you get like a three by three Matrix and then two by two that's up to you sometimes you do need that sometimes you don't so now as you can see it's great because as it scales down it Stacks beneath each other and we instantly got a tablet and a mobile layout and we could also try and fix these right so when we got a mobile layout uh what you could do here potentially is actually to make sure this you know is this big and hide this and make this scrollable that's definitely one option but let's say you want to try and stack these beneath each other so that would mean setting this category tabs Auto layout to wrap and then to fill container and that's it right as you can see it immediately starts to stack beneath and that's awesome so now you can see that the behavior when you actually scale this down even beyond the smallest Mobile screen you can see the limitation of the minimum width happening right here so this object simply refuses to go below 240 200 230 points I'm not sure or actually sorry about that yeah 270. so it simply refuses to go below that value and this happens so yeah this new feature is pretty amazing I think you can do an insane amount of stuff with this it's actually something that I've been secretly waiting for before I start to convert all of this into a mobile version this project which you can by the way if you want to find out how I designed this website how you can design all of this from scratch how we can assemble a very simple design system definitely go and watch my playlist designing a website in figma in the upcoming days and weeks as I said I'm gonna be exploring these new features I'm gonna also take a look at variables and how you can implement this into your workflow in the most efficient way possible I just wanted to share this one with you as soon as possible because I think it's the most powerful one so yeah this is it let me know in the comments below if you have any questions thanks for tuning in leave a like if you found this video useful and don't forget to go and watch my series on designing a website in figma thanks for tuning in and I will see you in the next one

Channel: Mavi Design

Views: 8,480

Keywords:

Id: dFZhQzUtBT4

Length: 11min 47sec (707 seconds)

Published: Thu Jun 22 2023