Figma Tutorial: New Figma Auto Layout & Constraints (W/ UI DESIGN EXERCISE)

all right guys let's get right into it so here we have a design file and if you want to follow along feel free to download the file it's in the video description and if you do make sure to gently smash the like button while you're there anyway so what i want to show you is this is what we're going to create together so you understand and you truly understand how auto layout and constraints work in figma because once you do you are going to be one of the most powerful designers on figma all right so here's a modal standard modal and this is what we're going to be able to create imagine you've got 50 modals and your product manager says we want designs for all the viewports we want there's 10 viewports we want 50 different models how the hell are you going to create that and how are you going to scale out for all the different viewports so what we have created here is a responsive solution right no matter what size the campus is going to be let's say they want it for uh whoops they want it for tablet 768 done they want it for one 1080 done they want 1440 done they want it how tall do they want it they want one or two four done they want 960 done they want 240 all done right this is what we're going to achieve and not only that because this is an auto layout guide and tutorial we're also going to have all this done at the same time you don't need to go in tinkering around with ui elements it's all done for you so how do we achieve all this you know what we're going to be designing this from scratch so you understand the fundamentals of how you should create some of the ui elements so you can leverage the power of figma in your design process right guys hope you guys are ready let's get right into it so what we're going to do is we're going to create a new artboard all right hit f in your keyboard head over to one desktop hit 1440 by 1024 and let's say so whoops sorry about that let's take a look at what we need to design so the plan the game plan and master plan is first we need to create this overlay and we want to make sure that it stretches like it sticks to all the corners and it's always going to scale so it will do this and then what we'll do is we'll create another frame to actually create this modal and we'll give it a white background and then we'll add in some content so a title an input field and a button alright so what we're going to do is let's start with the overlay so hit f on your keyboard guys and girls stretch it out to the entire art frame the art frame the art board or the frame and let's give it a fill of let's just say black and give it nine percent one of the biggest mistake guys is and i've i learned this maybe like a couple of years into my uh design career is i used to always use the rectangle tool to achieve this these components you don't use rectangles don't use rectangles use a frame because a frame will give you the ability to turn a group of elements inside it into an auto layout and also give you additional settings like the constraints as well so you'll understand as we go further in so first off we've got our overlay job done isn't being a designer so easy now but however when you click on your your artboard your main artboard it doesn't seem to stick to the edges why because the constraints are not set so head over to your frame which is the overlay actually we should just rename that to overlay so we have a point of reference now the cons this is the introduction to constraints what you want to do and what is happening right now is that you're telling figma that this overlay is to stick and constrain itself to the left on the horizontal two axes and to the top on the vertical axes so if you notice when we're making this upward bigger this and this frame bigger it's stuck to the top left right because you've told it to stick to the top left if it's stuck to the right it's not being a good overlay now if you stick it to the right whoops if you stick it to the right then you drag this out you'll stick to the right now what do you think will happen if we stick it to the left and right give you two seconds to think about it don't cheat guys don't cheat all right yes it will stick to both the left and right because this overlay is an obedient overlay guys now what happens if you click center so if we've selected center and we stretch this out on the horizontal axis what will happen well it would whoops if you can't select a desktop 2 then yes it will stay in the center and what happens if we have the scale well obviously it's going to scale as well once i keep selecting the wrong one here we go there we go so as you notice it was scaled to the left and right but it doesn't scale vertically why because if we hold down command and we directly select our overlay it's only stuck to the top all right so let's reset our artboard so let's just quickly go back here we go so what we need to do is in terms of the constraint let's keep it scaled and this will keep this flush to the top and bottom left and right job done second part we want to create this modal and we also want to turn this into an auto layout and i'll show you why so the first thing we want to do is hit f on our keyboard remember no rectangles only frames and let's just make it such random numbers this is why we need grids and oh by the way if you don't know how to create a grid on in figma there's a video up there and i'll walk you through step by step on how to create a layout grid and also a vertical grid eight point four point whatever point you want you'll know how to do it once you watch that video so let's create a frame for the model itself once again let's add a background color to it by the way i'm sorry about that i cheat i have my own sort of design design system set to my design file but we'll go through the manual way and we'll add colors manually by hitting the plus icon so let's do that and let's make sure and by the way a good shortcut is to hit command or control if you're on windows and select the whatever element you want that will give you direct selection of the element on the right hand side up in the top let's change our border radius to 4 just to keep those rounded corners and then what we want to do is we want to add in a title an input field and a button so if i just take just show you what this looks like there's nothing special it's just a title it's just a input and it's just a button and i've used frames to create these so instead of reinventing the wheel i'll just copy this over hit i'm hitting command on my keyboard i'm selecting this modal directly and i'm hitting command v since i'm on an apple product if you're on windows hit control v alright so here we have it let's just stretch out this these elements to the edge and that's pretty much it now what i want to show you is this is where the magic happens so if you select your frame 1 which is the modal itself so let's rename that to modal so we have a point of reference and we hit shift a on this uh modal this will immediately turn it into a auto layout feature component so if you take a look here you see the icon has changed however on the right hand side you also have additional settings that you can configure so first you have the direction of the elements that you want to stack so you can do it you can make a horizontal cta or you can make a vertical sort of rcta modal type component you also have direct access to the spacing so we can make that 16 if we want and then you can also set the padding around the items so if you want to make it for example 32 it will automatically set it all for you so it keeps everything very very consistent now here is the magic so if we actually grab if we click on our desktop 2 the parent frame and we resize it notice how it doesn't stay centered but we want this model to stay centered because we wanted to keep it obedient so what we need to do is make sure you select your modal make sure you move it and snap it to the center normally when you just hover it around the center it will automatically snap which is the great thing about figma and what do you think we need to do from here just have a think about it really quickly there's no need to no need to rush just have to think about it what do we need to do yes you guessed it we need to set the constraints right so head over to constraints and resizing and you might notice whoa this looks a little bit fancy well it's not too fancy it's very similar to what you saw over here and all we have to do is we need to head over to the this is the horizontal and this is the vertical axis what we want to do is we want to make sure this is hugged set to hug contents and we want to make sure the direction the constraining direction is set to center and similarly to the vertical axes we want to make sure it's hug contents and it's set to center as well now when you click out of it your job is done and you can mic you can drop that mic select your desktop too and you can move this around and now you have every break point set and done for your project however i haven't explained some of the key elements to this constraints and resizing feature however you do know how to create a responsive and constraining modal which is a good thumbs up for you and if you enjoyed that make sure you thumbs up this video as well but it doesn't end there guys there's a little bit more to this so what this i want to walk you guys through exactly what these options mean so because you have turned this into an auto layout your constraining feature settings has has broadened figma has said okay well we'll give you some additional features that you can set so if you take a look at this the this is the horizontal axis right so if you click on fixed if you were to resize this modal the elements would not scale it would just mean that they hide and they disappear behind it so what you want to make sure is you always want to make sure that you have hugged content selected on all your components most of the components and if you on the vertical axis once again hug contents and not fixed and the reason why is because if you double click onto your input field and you hit command d if you're on apple or a control d on a windows this will automatically scale your designs and you don't need to go in to fiddle around with all those different little ui components and spacing this is all done for you like how good is that if you like that make sure you smash that like button because that is a time saver and lifesaver now if you don't set it to hug content and you set it to fixed what will hap what do you think will happen so let's go in the vertical and hit fix what happens when we duplicate this input field well obviously it stays fixed so the only time that i generally have ever used this is to show to a developer that if i was to set the rectangle what if i was to just add a a progress sorry i scroll bar i can just quickly show them that yes whoops that here we go that that is what the intended idea is to be like it will it should cut off the content that is only the only time where i've actually used uh fixed so hopefully that gives you a better understanding of how the hugs and constraint works and since you've got the file open have a play around with it break the design change the different directions change it to top bottoms uh top bottom top bottom center scale move the move the artboard around the actual frame around see what happens why is it and then try to figure out what is it because i can show you and i can drive you and i can guide you but until you actually start designing and you play around with the settings and learn for it for yourself then that is when you will truly understand the constraints and also the auto layout feature guys hopefully you enjoyed this video there's plenty more to come and if you did make sure to smash that like button and if you do enjoy my videos and want to see more of them pop up on your feed make sure to subscribe hopefully you guys found this useful and i will see you in another video very soon [Music] you

Channel: Mizko

Views: 34,649

Rating: 4.9801884 out of 5

Keywords: figma, tutorial, figma tutorial, ui design, ux design, user experience, interface design, mobile design, フィグマ, デザイン, Auto Layout, Auto Layout Figma, figma constraints, figma 2021, design a modal, web design, figma tutorial for beginners, ux design tutorial for beginners, figma web design, ui design tutorial for beginners, user interface design, ui design tutorial, figma basics, figma design, figma ui design, yt:cc=on, figma auto layout tutorial, figma constraints tutorial

Id: rsE9MBOHQjE

Length: 13min 29sec (809 seconds)

Published: Wed Jan 06 2021