Design Handoff

Tools that bridge the design-to-code gap — inspectable specs, exportable assets, and live components.

Design handoff is "engineers can implement what designers made without DMing for measurements." For the design-system / token side, see Design Systems & Tokens. For the prototype side, see Wireframing & Prototyping.

Built into the design tool

★ Penpot Inspect — free OSS; opens any Penpot file with developer-readable specs (CSS, sizing, colors, exports). Free for unlimited inspectors. The OSS pick.
★ Figma Dev Mode — closed source; free for inspector seats; the industry default in 2026. CSS, iOS, Android specs; component code links; Variables → CSS variables.
Sketch Cloud Inspector — closed source, paid; Sketch's handoff layer.
Adobe XD — sunsetting; not a 2026 pick.

Standalone handoff platforms

★ Zeplin (free tier) — closed source; the original handoff tool. Free tier covers 1 project. Still useful if your team isn't on Figma / Penpot.
Avocode — closed source; effectively legacy; replaced by Figma Dev Mode for most teams.
Sympli — closed source, paid; Sketch / Figma / XD bridge.
Inspect by Marvel — closed source, freemium.

Code-first handoff (specs from the codebase)

★ Storybook + Chromatic — free Storybook OSS; Chromatic free tier for visual review. The engineer-led answer: the implemented component is the spec.
Ladle — free OSS; lighter Storybook alternative.
Histoire — free OSS; Vue-flavored Storybook.
Backlight — closed source, paid; full design-system platform.
See UI Components.

Asset export pipelines

★ Figma → SVG / PNG via Variants & Export Settings — built-in.
Penpot → CSS / SVG / Style Dictionary tokens — built-in.
figma-export (npm) — free OSS CLI; pull icons / styles directly into your repo from Figma.
figmaport — newer alternative.
Specify — closed source, paid; pulls assets from design tools.
Diez — free OSS; cross-platform design-token compiler (older, less active in 2026).

Inline visual review (designer leaves comments on the live site)

★ Pastel — see Design Feedback.
Markup.io — see same.
Vercel Comments — free with Vercel deployments; designer-friendly inline comments on preview deploys.
Netlify Drawer — similar.

Spec ↔ implementation diffing (visual regression)

★ Chromatic — closed source, free for OSS; the canonical visual-diff service for Storybook.
Percy (BrowserStack) — closed source; freemium.
Lost Pixel — free OSS visual-diff.
Playwright expect.toHaveScreenshot() — see Specialty Testing.

Pick this if…

OSS, single source of truth: Penpot Inspect.
Stuck on Figma: Figma Dev Mode (free inspectors).
Need a handoff tool that ingests Sketch / older formats: Zeplin free tier.
Engineer-led team, the spec is the code: Storybook + Chromatic.
Pull tokens / icons into your repo automatically: figma-export or Penpot's Style Dictionary export.
Designer review on the live site: Vercel Comments or Pastel.