Chapter 6 › Lesson 29

29. Understand Constraints

Skills: Left, Right, Left + Right, Center, Scale; Apply constraints to items inside a frame; Resize parent frame to test constraint behaviour; Constraints vs Auto Layout (when to use each)

Constraints control how a layer behaves when its parent frame resizes. They're essential for responsive design — making sure your layouts adapt to different screen sizes without breaking.

29. Understand Constraints
Figure: Five constraint modes shown: Left, Right, Left+Right, Center, and Scale — demonstrating how items behave when parent resizes.

Step-by-step

  1. Press F and create a frame (300×200) as your parent container
  2. Draw a small rectangle (40×40) inside the frame at the top-left corner
  3. Select the rectangle. In the constraint controls (top-right of the Design panel), click the dropdown and set Left for horizontal
  4. Resize the parent frame — the rectangle stays at the same distance from the left edge
  5. Change constraint to Right — the rectangle now stays attached to the right edge when you resize
  6. Change constraint to Left + Right — the rectangle stretches horizontally as the parent grows
  7. Change constraint to Center — the rectangle stays centered regardless of parent width
  8. Change constraint to Scale — the rectangle grows/shrinks proportionally with the parent
  9. Repeat the same steps for vertical constraints (Top, Bottom, Top + Bottom, Center, Scale)
  10. Try combining Left + Top vs Center + Center to see how different combinations behave

Pro tip

Constraints only work for elements inside a regular frame. In auto layout frames, constraints are replaced by the auto layout settings (alignment, padding, hug/fixed/fill). They're two different layout systems.