Make an Entire Layout Responsive in Figma - In 10 Minutes

have you ever found yourself in this situation you're in figma you have a full layout and then you maybe you adjust the size or the width or the height of the frame that the layout is in and things just start to break overlap on top each other even stretch or maybe you've tried to translate that design into a tablet design or a phone and you just have all this manual work to do well there's a much better way and i'm going to show you exactly how to do that with figma constraints and auto layout here so that your responsive endeavors are much easier to take care of within figma now you can follow along with this same exact design that you just saw there's a link here in the youtube description so let's go ahead and get started now wait one moment if you're interested in this sort of thing in ui and ux design you should definitely check out designcourse.com now here at design course we are in the pre-launch phase you can't join just yet but make sure to enter your email here to be notified when it launches which is in approximately 70 70 days and january 4th of 2022 all right let's get started so just to reiterate look how horrible this is right now if we were to replicate this move it over here and try to work with this uh in the context of a mobile or a tablet uh sort of view it would be terrible we'd have to manually move a lot of stuff around so we're going to negate that so let's get started we'll start with the top all right first of all we want to see if things move in we're looking specifically at the logo here we're going to start at the top and work our way down it does stick with where it needs to be so by default it is and under constraints it's it's top and left right here it's exactly what we want however if we move this side over here this is not behaving as it should so what we want to do in this case is we simply want to put right so top and right so reverse of this so top right top left because we want them to stay inside uh the areas where they need to now typically you might be using a 12 column grid system on desktop at least let's view that and make sure this is in line with exactly where it needs to be so i can double click we'll move that right there to the edge and that's exactly where we want to be if we move this around there we go now of course if we get smaller than a right around here we're going to want to collapse into a hamburger menu for that icon which we'll get to in a second so now what we want to do is let's toggle this off temporarily focus on this area what happens with this headline and sub headline well it moves all over the place we don't want that certainly so just temporarily i'm going to ungroup this and for both of these what we want to do is we can create an auto layout which will automatically stack them which means now one of them one of the things it means is we can move these up and and make them interchangeable but that's really not the benefit here the benefit is now that we can come and we can change hug contents to fixed under constraints and resizing and then also change it to left and right now it's still going to have a funky behavior so what we want to do is double click into those child elements and then select both of them and we can change this to fill container and there we go now it's going to work watch notice how it maintains the white space between them nothing's overlapping with exception to this area which we will fix here in a second now one thing i don't like is that line height over here on this it's way too high let's just put auto and then also we will increase the margin there we go so now let's bring this out let's also view our grid and we want to make sure these elements are on that grid before we begin making adjustments so we'll just pull that out right there that's all we need to do and we will duplicate that get that in line and then duplicate one more time okay so now what we want to do is the same thing we've been doing here we're going to take these three and we're going to create an auto layout we're going to make sure it's fixed and center left and right and then we'll double click into each of these three change fixed width to fill container and watch this let's go ahead and toggle that off they all maintain exactly how they should awesome stuff now if you think you want this to be pushed down when this is pushed down as well we could also solve for that so the way to do that is we'll take this and this will go ahead right click we're going to frame the selection and then apply an auto layout and then we're going to do the same thing before fixed and left and right double click select both choose fill container and let's see here and see what happens notice how it pushes it down it might be a little bit too much white space there so all you have to do is grab this and reduce this amount right around there and we're almost done with the desktop so the desktop see that that is squishing we do not want that so let's get our grid back up here well actually we don't need the grid for this at all and what we could do is we're going to notice this is a group let's ungroup that that's unnecessary what we'll do here is we want to position this bottom so it stays at the bottom so now watch this we want this to stay at the bottom as well so we'll position that to the bottom there we go and then we want to make sure this is centered and that is already centered so now when we move it in it's going to maintain the size and not stretch anymore all right so now we're ready to go to a tablet portion so we simply duplicate this we'll go ahead and turn this on we can adjust this to typical tablet eight count for columns maybe 60 for the margin then all we have to do is just move this over where it needs to be this over here and obviously we're going to be dealing with a smaller size like around here and then take this hold alt drag out all right and then let's say we want to have a different alternate card sort of layout where we have one at the top spanning all the way and then two at the bottom all i have to do is double click duplicate we will delete one of those and then delete two of these alright so now what we can also do is reduce that white space between these elements we will go ahead and increase the height here oh it looks like this did not change to bottom so we want to make that bottom again probably scale this down just a bit hide the grid and there we go now look how fast that was let's change this because i'm a little bit anal about this to tablet and look how fast this was compared to what we would have done if none of this stuff was set up properly now of course right here i we don't want that menu instead i'm going to grab real quick off the screen a hamburger menu and again we'll want to get our grid there and we'll place it in the center exactly where it needs to be perfect make sure this is correct it is top right hide that and there we go perfect so let's do this one more time for phone so duplicate it get ourselves in a phone sort of viewport right around here and let's say we want these cards to stack on top of each other three rows instead of three columns like on desktop so let's pull this down we're gonna need some more space double click delete that group we're going to change this auto layout to a vertical direction and we'll duplicate now what we can do beforehand if we think we don't need quite as much white space we can drag that up duplicate duplicate and look at that if you think this type up here is a little bit too large we can always scale that down maybe reduce that and let's move things back up scale this down all right we could scale this down as well oops or rather this element i'm trying to grab it put that right there move up oh i put that inside of there by accident there we go sometimes that could be a little bit confusing we'll just move this down manually there we go move this up and one final thing we'll want to change that's too much white space on a a phone so we're going to bring back this one last second change this to four change this here to 30 or 20 whatever you want put that right there this here this extended out up what happened there that's not working well that's because we changed it so all i have to do is is get into here take each one of these make sure it's fill container fill container and finally fill container let's hide the grid and there we go oh no looks like that has to be adjusted too sometimes these things unfortunately happen so remember we'll change this to bottom and center this one is center and bottom there we go let's try that one more time oh no that got all messed up well in that case let's just take these duplicate them bring them on over because apparently i screwed up one of the uh the layer structure of it center and bottom it is still and this will be scale down now let's try it again it better work there it goes much much better awesome awesome stuff

Channel: DesignCourse

Views: 20,233

Keywords: figma responsive, figma responsive design, figma autolayout, figma constraints, figma auto layout, figma auto layout tutorial, figma constraints tutorial, gary simon, designcourse

Id: QjK56pv9Qe4

Length: 10min 55sec (655 seconds)

Published: Tue Oct 26 2021