-
[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