Frames, Layers & Naming
A frame is a container for a screen or section. Press F, then pick a device preset (iPhone 14, Desktop, or custom size) from the right panel.
01Frames are your screens
A frame is a container for a screen or section. Press F, then pick a device preset (iPhone 14, Desktop, or custom size) from the right panel.
Design inside frames — not loose shapes floating on the canvas. Frames clip content, support Auto Layout, and map cleanly to developer viewports.
Real-life example: A frame is like a phone or laptop screen. Everything the user sees lives inside that glass.
02Layer hygiene
- Name layers: Header / Nav / Logo — not Rectangle 47.
- Group related items (Cmd/Ctrl + G) or prefer frames with Auto Layout.
- Lock background layers so you do not drag them by accident.
- Hide unused experiments instead of leaving them overlapping the main screen.
03Constraints (for fixed layouts)
When a frame resizes, constraints tell children how to stick: left/right, top/bottom, center, scale, or left-and-right (stretch).
Use constraints for fixed chrome (sticky headers). Prefer Auto Layout for most modern UI — it is more flexible than constraints alone.