Pathwise

Manuals / Figma / Chapter 2

A · Layout · beginner · Days 1–2 · Chapter 2 of 13

Frames, shapes & constraints

Frames are artboards — not groups. Constraints control resize behavior. Build a mobile login + home shell before Auto Layout.

Path progress
10%

Step 1 of 3

Frame first

Always draw a frame (F) for screens. iPhone 14 preset is fine for mobile exercises.

Frame firstDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Frame firstdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Build login screen: logo area, 2 inputs, primary button, footer link. Use frames for each section.

Was this step clear?
Chapter learning outcomes
  • Frames vs groups
  • Constraints
  • Device presets
  • Layout grids on frames

Clear these before you leave

Side quest

Tablet frame

Duplicate mobile home to iPad frame. Adjust constraints — content should reflow sensibly.