Figma handoff ends at states, not pixels

“Looks done in Figma” is the most expensive sentence in product engineering.

I have shipped broker dashboards, training modules, AI forms, and native mobile flows. The rework always clusters in states someone skipped: first-time empty, slow API, validation error, read-only role.

Rename variants like you name props

If Figma says Default / Hover / Disabled, code will mirror disabled. If Figma hides errors in a sticky note, code will ship without them.

Use variant names that match your component API: empty, loading, error, success-partial. Designers and engineers should read the same enum.

Responsive behavior is engineering work

Auto-layout in Figma does not prove a data table survives 1280px with three filter chips and a sidebar. Prototype the worst breakpoint in code early—especially dense B2B UIs.

Accessibility is not a post-launch layer

Focus order, hit targets, and form labels belong in the handoff package. WCAG contrast for brand colors should be decided before marketing locks hex values—see Formably’s brand contract approach.

When to skip more Figma

For novel interaction—drag in a file grid, live search inside screenshots—build a throwaway SwiftUI or React slice. Throwaway code informs Figma second pass, not the reverse.

Studio and product examples

• RallyLeads — many page types share chrome; tokens prevent drift
• Formably — generated UI still respects global brand settings
• Auri — native patterns for dynamic type alongside chat chrome

Portfolio: brenthaskins.com.

For hiring managers

Ask candidates to critique a screen missing an error state. Strong product engineers will ask who sees it and what telemetry proves it is rare enough to defer—or not.

Brent Haskins writes about UI engineering and shipping on the blog; case studies show the results in production, not in Dribbble shots.