Pathwise

Manuals / Figma / Guide 1

Start · beginner · ~20 min · Guide 1 of 13

How to use this Figma path

Figma is the industry default for product UI. This path goes frames → Auto Layout → components → variants → variables → libraries → handoff. Do every exercise in one “Figma Journey” file unless noted.

Path progress
4%

Step 1 of 2

Pace

2–3 weeks at 1–2 hrs/day. Week 1: layout. Week 2: components + variables. Week 3: libraries + handoff.

PaceDrag 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 →Pacedrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Duplicate Figma Community “Simple Design System” file as reference — do not merge with your exercises yet.

Was this step clear?
Chapter learning outcomes
  • 2–3 week pace
  • File hygiene habits
  • Keyboard shortcuts worth learning day 1

Clear these before you leave

Side quest

Shortcut drill

Practice 10 min: F (frame), R (rectangle), T (text), K (scale), Cmd+D (duplicate), Cmd+G (group), Shift+A (Auto Layout).