Lumina

Manuals / Figma / Ch 11

C · SystemsAdvanced50 min read

11. Dev Mode & developer handoff

Figma · 52 pages source format

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

What you'll learn

  • Dev Mode inspection
  • CSS/iOS/Android code snippets
  • Export settings
  • Redlines & annotations

Dev Mode tour

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

/* 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.

Clear?

Export hygiene

Icons @1x SVG. Images @2x PNG if raster. Name files button-primary-default.svg.

Do this now

Export icon set (3 icons) with consistent naming.

Clear?

Annotate a11y

Note focus order, aria labels for icon-only buttons, contrast on primary CTA.

Do this now

Annotation layer on login: tab order 1–4, label for password toggle.

Clear?

Checklist