-
Not Synced
Figma Constraints Transcript
00:04
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.
-
Not Synced
00:31
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
-
Not Synced
01:00
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.
-
Not Synced
01:13
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 label's horizontal constraints to left and right, and vertical constraints to bottom.
-
Not Synced
01:43
Now when we resize the card, the label responds the way we want.
-
Not Synced
01:50
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.
-
Not Synced
02:06
Also, make sure the child layer isn't in a frame with auto layout applied.
