Pathwise

Manuals / Figma / Chapter 11

C · Systems · advanced · Week 3 · Chapter 11 of 13

Dev Mode & developer handoff

Developers need spacing, tokens, assets, and states — not pretty pictures. Dev Mode, specs, export rules, and annotation habits.

Path progress
79%

Step 1 of 3

Dev Mode tour

Inspect spacing, copy CSS variables, download SVGs. Compare token names to your variables.

Dev Mode tourDrag 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 →Dev Mode tourdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

/* Example handoff mapping */
:root {
  --color-bg-default: #FAFAF8;
  --color-text-primary: #1A1A1A;
  --space-16: 16px;
  --radius-md: 8px;
}

Do this now

Developer hat: write down 5 CSS custom properties dev would create from your tokens.

Was this step clear?
Chapter learning outcomes
  • Dev Mode inspection
  • CSS/iOS/Android code snippets
  • Export settings
  • Redlines & annotations

Clear these before you leave

Side quest

Handoff packet

One-page PDF or Notion: tokens, component list, prototype link, open questions for eng.