A · LayoutBeginner40 min read
2. Frames, shapes & constraints
Figma · 52 pages source format
Frames are artboards — not groups. Constraints control resize behavior. Build a mobile login + home shell before Auto Layout.
What you'll learn
- Frames vs groups
- Constraints
- Device presets
- Layout grids on frames
Frame first
Always draw a frame (F) for screens. iPhone 14 preset is fine for mobile exercises.
Do this now
Build login screen: logo area, 2 inputs, primary button, footer link. Use frames for each section.
Clear?
Constraints preview
Pin elements left/right/center/scale. Test by resizing the frame.
Do this now
Pin header left+right, center logo, pin button bottom. Resize — nothing should float randomly.
Clear?
Home shell
Tab bar or nav + content area + FAB optional. Same file, second frame.
Do this now
Build home screen shell matching login width. Link visually (same header style).
Clear?