Figma Design for beginners: Constraints fundamentals

[Music]

Constraints are used on child layers

to determine how they respond when their parent frame is resized

This is especially useful when designing across different devices

to make sure designs respond and adapt to different screens

You can use it to make sure

a sidebar always spans the height of an interface

or a button always stays anchored to the bottom right of the screen

Constraints can be applied to any child layer

as long as its parent frame doesn't have auto layout applied

When you select a child layer

you can find its constraint settings

in the position section of the right sidebar

Here you'll find

horizontal and vertical constraints

by default constraints are set to top and left

which means the layer will stay in the same position

relative to the top left corner of its parent frame

When we resize the parent

you'll see this reflected

by the blue dotted lines on the canvas

As an example say

we have a card asset

with a label at the bottom

that uses the default constraint settings

This means when we resize the card

the label will anchor to the top

and remain the same size

However we want it to anchor to the bottom

and stretch to fit the width of the card

So let's change the labels horizontal constraints

to left and right

and vertical constraints to bottom

Now when we resize the card

the label responds the way we want

If you can't see the constraint settings

make sure you've selected a child layer

Top level frames and layers sitting directly on the canvas

cannot have constraint settings

since they do not have a parent frame

to anchor constraints to

Also make sure the child layer isn't in a frame

with auto layout applied