Constraints define how child elements behave when their parent frame is resized. This is essential for creating designs that adapt to different screen sizes and for building responsive layouts.
Understanding Constraints
Every element inside a frame can have horizontal and vertical constraints that control:
- Position - Where the element stays anchored
- Size - Whether the element stretches or stays fixed
Horizontal Constraints
Left
Element maintains fixed distance from the left edge of the parent.
- Position stays relative to left edge
- Width remains fixed
- Good for: left-aligned content, sidebars
Right
Element maintains fixed distance from the right edge of the parent.
- Position adjusts as parent width changes
- Width remains fixed
- Good for: right-aligned buttons, icons
Left and Right (Scale)
Element stretches horizontally to maintain distance from both edges.
- Distances from both edges stay fixed
- Width changes with parent
- Good for: full-width elements, headers, footers
Center
Element stays horizontally centered in the parent.
- Position adjusts to remain centered
- Width remains fixed
- Good for: centered content, modals
Vertical Constraints
Top
Element maintains fixed distance from the top edge.
Bottom
Element maintains fixed distance from the bottom edge.
Top and Bottom (Scale)
Element stretches vertically to maintain distance from both edges.
Center
Element stays vertically centered in the parent.
Setting Constraints
- Select an element inside a frame
- Open the Properties Panel
- Find the Constraints section
- Choose horizontal and vertical constraints from the dropdown menus
The constraint control shows a visual representation of your element within its parent. Blue lines indicate which edges are constrained.
Common Constraint Patterns
| Pattern | Horizontal | Vertical | Use Case |
|---|---|---|---|
| Fixed position | Left | Top | Static elements |
| Full width | Left + Right | Top | Headers, nav bars |
| Centered | Center | Center | Modals, dialogs |
| Bottom bar | Left + Right | Bottom | Footer, tab bar |
| Sidebar | Left | Top + Bottom | Side navigation |
| Full screen | Left + Right | Top + Bottom | Background, overlays |
Constraints vs Auto Layout
Constraints and Auto Layout serve different purposes:
- Constraints control how elements respond to parent resizing
- Auto Layout automatically arranges children in rows or columns
Use constraints for absolute positioning within a frame. Use Auto Layout when you want elements to flow and wrap automatically.
Test your constraints by resizing the parent frame. Elements should move and resize exactly as expected for different screen sizes.
Best Practices
- Always set constraints before testing responsiveness
- Use "Left + Right" for elements that should stretch
- Use "Center" for elements that should stay centered
- Combine with min/max width for better control
- Test at multiple frame sizes to verify behavior