Resize a Frame and every child inside it needs to know what to do — stay put, stretch, or move. Constraints are the setting that decides this, per layer, per axis (horizontal and vertical are set independently).
| Constraint | Behavior when the Frame resizes |
|---|---|
| Left / Right / Top / Bottom | Keeps a fixed distance from that one edge; the layer doesn't resize |
| Left + Right (or Top + Bottom) | Pins both edges — the layer stretches to fill the growing/shrinking space |
| Center | Keeps the layer centered, at a fixed distance from the midpoint |
| Scale | Resizes the layer proportionally to the Frame's own resize |
A header bar with a logo on the left and a search box that should stretch: the logo gets a Left constraint (stays put), and the search box gets Left + Right (grows and shrinks with the header). Get this wrong and the search box either stays a fixed width forever or the logo drifts away from the edge as the screen resizes.
Constraints and Auto Layout solve a similar problem from different angles. Constraints answer "what happens when THIS Frame resizes" for children placed freely inside it — useful for a single fixed-size screen like a specific device mockup. Auto Layout (covered earlier in this course) actively arranges and resizes a whole group of children based on their content. Real files use both: Auto Layout for the parts that should flow, Constraints for the parts that should just pin in place.
Select the parent Frame and manually drag one of its resize handles — every child's constraint behavior plays out live on the canvas, no prototype or preview needed. This is the fastest way to catch a wrong constraint before it becomes a real bug.