Hello, let's talk constraints, we covered it a little bit in the Essentials course... let's look at making sure that when we go and resize for different phones... it doesn't break... what we want to do is be able to have something that is... resilient, robust, and responsive, all the R's... so that when we do change it, comes along for the ride...

you, my friend, need to be 'Android Mini', ah, look how quick and easy that is... so that you don't break it, your teammates don't break it... and it looks the same across all your devices, so it's easy. What we need to do is, we need to select on our lower Nav... we should probably do it to our main component... so that if we duplicate it later on we're all kind of doing it to this one...

if you can't see constraints, there they are... remember, they need to be inside a parent frame... mine's just like a placeholder, just so that... I can change it, doesn't do anything... but I'm going to say, actually, don't be left and bottom... let's be, stuck to the bottom, which is good...

but I wanted to go, not left, but left and right... I want it to stretch out, I don't want it to scale, in this case... because I want to scale the contents, I just wanted to stretch to the edges... now we can do one of two things... because this is actually not one of my instances, so I'm going to delete him... and I'm going to drag this one out holding my 'Option' key, and...

now he should be... defaulting to left, right, bottom, you're like, "That didn't seem very useful"... because we just dragged it out, it's when you move on from here... so when you go, "Okay, I needed two of these now"... or, "I need another size," so I'm going to make my Android size... so I'm going to duplicate this whole thing out...

this is going to be called "Android"... and I'm going to say, actually, it needs to be the size of--  so I've got the name selected, let's go to 'Frame'... let's go to iPhone, it's going to be 'Android Small'... one of the smallest devices that we're going to design for, in this course... and you see what happened? Ah, look at that...

if you don't have it on, should have done that, before and after... I think we were stuck to top and, yeah, top and left... if we don't do that and we say, hey, go resize to it... 'Android Small'... not very useful, it's kind of disappeared off the frame... so let's get it back, I'm going to switch it back to that smaller size...

here we go... quite the responsive little component now. Now remember, a couple of notes... if yours is not kind of resizing how you'd want it... it's probably that your auto is not set up as the spacing... so you can select it, and make sure it's 'Auto'...

otherwise it might not be doing exactly what you want... and remember, constraints can only be found if it's inside of parent frame... by parent, I mean that there's this outside one... and that this child is inside the parent... without it, that goes away. Now we're applying constraints to a component...

you can apply them to anything, regular old rectangle... constraints, as long as it's inside of a parent... could be auto layout, can be text, can be anything, you already knew that. The other thing interesting about constraints is that... they call them constraints here, in Figma... but if you've heard the word Flexbox before...

basically, those are the attributes we're adding to this... they're doing the same thing... if you've never heard of Flexbox, it's one of those things to go have a look at... it's how it's implemented on the website... so either you're custom doing it, hacking your own CSS... or if you're using Webflow, they call it Flex Layouts, it's the same thing...

Components, Flexbox, Flex Layouts... it's all to do with how children interact with their parent... and you can do a couple of different options in there, easy. One last thing is that when you're resizing it, we just typed it in... and it kind of redid it all, if you just drag it, it works too... just means you've got a lot of goodness and flexibility...

because that's what we're trying to do, make things that can't be broken... they can be used on lots of different situations, go constraints... all right, on to the next video.