Figma Constraints & Resizing Made SIMPLE

hey there in this beginner tutorial we will look into all the essentials of figma constraints and resizing so let's waste no time and get straight into it so if we look at what constraints and resizing actually is it's a relationship between a parent frame and a child frame or a parent frame and a child element so here we have the parent which is a frame that contains this element that i named child in here what i like to imagine when it comes to the constraints section here in the right sidebar depending on what you set in those settings the child is going to behave in the way you want so if you set it to for example left on the horizontal axis and then top on the vertical axis you can see that we get these strings here that attaches to the top and the left of the parent frame what i like to imagine here is that this child is taking a grip in the top and a grip to i guess the left but it's gonna be the right for you and the camera and it's gonna hold on to that so now if i start resizing this this child is gonna hold on to the left and to the top i'm gonna go through all of these so let's go from top to bottom we take right and we take bottom you can see that those strings now are attached to the right and to the bottom so could you guess what happens in this case well if i start resizing this the child is gonna hold on to those sides at the pit okay so if we go to the left and right here on horizontal axis and the top and bottom we start resizing oh it's going to expand here because it's holding on to both sides right so if it's holding on it's going to be so the same goes for the vertical axis like that let's jump to center on both axes i think you can guess what happens yes it's going to stay in the center just like that then we have the last option which is scale so i put it to scale on both axes here when you think about it what happened with top and bottom top and bottom left and right is that it kind of scaled right when we changed up the size of the frame the parent frame the child scaled but there is a subtle difference between these if we take a look here so now when i scale this drag it to the right you see it kind of looks similar but it's not as it's something that's different right so if we go back to the child element and we take left and right top and bottom and i just create a little rectangle here just to see i want to see the space so this is 813 pixels wide so now if i remove this again so i've copied it but i remove it stretch it out i paste it in again right back there it's still 813 pixels so it maintains the same pixel distance if we go back and i change this to scale i do the same thing again then paste in this so here we can see that it actually doesn't maintain the same pixel distance so what happens here is when you choose scale it's gonna convert it into percentages instead and this distance is going to be a percentage distance from the object to the right side in this case so therefore the pixel distance won't stay the same so that's a difference you can keep in mind when you have scale or when you're going to choose between scale and left and right or top and bottom so here we have something called clipping this is actually not part of the constraints panel or the constraints section as you can see but i think it's still useful to to um go into what you can see here is that we have a frame a parent frame once again with a child element but this child element is currently cut off now in order to make it be seen again i can go to the click content and uncheck that now it's going to be seen even though it's going outside of the frame but if i click the parent frame and i check the clip content it's going to be clipped so that's a good thing to know because when we want to prototype things for example we go to the next frame here we want to prototype for example a scrolling experience then having clip content is very essential if we look at this ring it looks like just a normal frame but what we've done here is that we've clicked some content in this frame so if we unclip you can see this text popping up here in the bottom that says fodder the reason for this is that we want to create this scrolling experience right if we click the content again we're going to prototype so prototype tab and we click on the parent frame and we can see that currently we don't have flow we would need to add a flow starting point here in order for it to be a prototype so i add that now we have a flow and you can see that overflow scrolling here is set to vertical scrolling now if we would go back to this frame and i would increase the size of this frame so that this bottom text is within the frame and we go back to prototype you're going to see this little thing popping up here saying that for scrolling to work on this frame the content needs to be bigger than the frame so in order for us to create a scrolling experience in figma we need to click the content if i drag it up here again you can see that it disappears drag it down now it appears again just to show you how it works in action i'm gonna clip the content again i'm gonna set this to fixed position when scrolling and we've set the constraints here as well [Music] now if we click the parent frame hit the prototype tab click play click play hello sir can i play this please oh temporary outage that's peculiar isn't it hello darkness smile friend okay we're back the technical difficulties are over with i hope let's look at the prototype you can see here if i scroll to the bottom we come to the bottom and we see the bottom text so really what i wanted to show with this is the fixed positioning when scrolling in the constraints section here so that's what it does we fix the positioning of this this circle here and when we scroll it's going to be fixed in the middle of the screen so you can see that it's fixed because we reached a bottom point of the frame anyways let's go on and touch the last thing so this is more of a realistic case here so we have a top navigation we have a couple of rows in the middle and we have a footer now what it looks like when it's not going to be responsive is this nothing is happening to the layout as i shrink it or increase the size of it so what do we do in this situation let's start with the top navigation if we go to the top navigation and we look at these little drop downs that we've been talking about we look at the top one it says just that it's holding on to the left side but we want it to hold on to both sides right left and right it's holding on to the top and that's okay that works for us so now if we resize this look at that it's working and the rose this is also pinned to the left we want it to hold on to both sides and now it's pinned to the bottom but we want it to be pinned to the top in this case as well same for this one left and right and top now let's see how it works hey it's working nice and then we have the footer which is going to be pinned to the bottom and left and right hey there we go a responsive layout super easy super easy [Music] i really hope that was helpful now if you're wondering about auto layouts as well i have a video on that somewhere here check that out i'm going through all the auto layout details in there so i think that could be helpful youtube just launched this new feature where you can like and subscribe and even comment and push the bell notification button okay it's not really a new feature but if you would utilize it here on my channel i would be so grateful until next time my friends have a good one talk soon ciao [Music] oh [Music]

Channel: Tim Gabe

Views: 8,470

Keywords: figma constraints, constraints in figma, constraints and adaptive layout in figma, adaptive layout in figma, figma constraints scale, figma constraints tutorial, figma tutorial, figma auto layout and constraints, master figma constraints, figma constraints resizing, figma resizing, how to use constraints in figma, figma constraints responsive, constraints and resizing figma, understanding figma constraints, ux, ui, ux design, ui design, learn constraints figma, figma

Id: 3xGJ80UpVeM

Length: 10min 16sec (616 seconds)

Published: Sun Jun 12 2022