All language subtitles for 35 - Designing in Figma —

Hey, everyone, welcome back.

We're going to be talking about constraints.

Now, constraints are really important if you're using regular frames, and I'll get into that right

now.

So let's jump right in.

So I'm going to press F to get my frame and I'm just going to pick any frame.

I'm just going to pick this one over here.

So now that we have our frame in place, what we're going to do is we're going to place some items in

there.

Now, I'm just going to press R to get a rectangle.

No place for one rectangle here.

And I'm going to place another rectangle below it.

Now I have two rectangles, so constraints tell Figma how layers should respond when you resize the

frames.

So let's take a look here.

If I'm going to resize my frame, you notice that the layer beneath doesn't actually move.

Now, this really helps you control how designs look across different screen sizes and devices.

So there's two types of constraints.

You have horizontal constraints and vertical constraints.

Constraints are located over here on the right sidebar.

So these are horizontal and these are vertical constraints.

You'll notice that it says left and this one says top.

That means that when I move the left side.

They're going to move with it.

And if I move the top side.

They're going to move as well.

Now, I want to set it to left and right.

And I'll leave that one at top.

Now let's see what happens to this rectangle when I resize the frame.

You'll notice that now it shrinks and grows.

So that's pretty awesome.

You can even do it in this way as well.

So I'm going to leave that when I left and I'm going to do top and bottom for the vertical constraints.

You'll notice that now it shrinks up and down.

You can even do things such as let's move this one just a little bit lower.

For vertical constraints, you can do center.

So that means it's just going to stay kind of in place.

Watch.

So it's centers itself.

You can do this even for horizontal constraints as well.

You can do scale.

This is really great if you want something to grow.

So notice how that rectangle is going to grow in height and in width as you grow the frame.

Pretty cool, right?

You can apply constraints to any layer within a frame.

It's not possible to apply constraints to layers outside of a frame.

So if we now have this layer, I'm going to just create a copy.

So I'm going to do command or control C and go click outside the frame and I'm going to Press Command

V and Control V would be for Windows and I'll just drag that right outside the frame.

So you notice how it doesn't have the constraints on the side like it did within the regular frame.

That's because it's not within a frame.

You can only apply constraints within a frame or layers within an auto frame.

So layers within an auto layered frame and layers outside of a regular frame will have constraints.

Only regular frames will have constraints.

Sometimes, though, you do want to resize the frame with resizing the items within.

And the way to do that is to ignore the constraints.

And the shortcut to hold is command for Mac and control for Windows.

So let's take a look.

So I'm going to resize this again.

This is set to scale.

I'm just going to leave it so you'll notice that, okay, now I don't want to do anything.

I'm just going to hold command and I can do at any point.

See, I'm holding a command now and it'll be controlled for Windows users.

Now the items within are not moving.

Let me just move this one out of the frame there, but as soon as I start to let go of that shortcut.

Things start to scale again and that is how you use constraints within figma.