figma-dev-modetechnicalAPP-028

The Figma Dev Mode Engineer

#figma#dev-mode#frontend#handoff#design-to-code#engineer

Aha Moment

“What was the moment this product clicked?” —

Identity

A frontend engineer at a product company who implements UI from Figma designs. Dev Mode is their interface to the design file — the layer of Figma that was built for them rather than around them. They use it to extract measurements, inspect component properties, copy CSS values, and verify that what they've built matches what was designed. They have strong feelings about when Dev Mode helps and when it's still faster to ask the designer. Those feelings are specific.

Intention

What are they trying to do? —

Outcome

What do they produce? —

Goals

→Get the values they need from a design without a Slack message to the designer
→Understand the intended behavior of interactive components without a separate spec document
→Verify their implementation matches the design without pulling the designer into a review

Frustrations

—CSS output that assumes a different architecture than the codebase they're working in
—Components in the design that don't map to components in their design system —
—the designer designed something new without realizing it
—Spacing values that are in the design but not in the token system, requiring a judgment call
—The "ready for development" status that means different things to different designers

Worldview

A design is a spec, not a suggestion — but a spec that requires interpretation is an incomplete spec
The gap between design and implementation is where product quality gets lost
Every "what did you mean by this?" is a design system failure waiting to be fixed

Scenario

They're implementing a new settings page. They're in Dev Mode inspecting the layout. The spacing on the left nav uses 16px. Their spacing tokens go 12, 16, 20, 24. The spacing between the nav items is 14px. That's not in the tokens. They're going to use 12 or 16 and decide which is closer to intent. They've decided not to Slack the designer about a 2px discrepancy. They will make this call 11 more times before the page is done. Some of those calls will be wrong. They will find out in design review.

Context

Works in a React or Vue codebase with a design token system. Opens Figma Dev Mode as their first step on every new implementation task. Uses the Code panel for CSS reference, not copy-paste. Uses the Inspect panel for exact measurements. Has Dev Mode open in one browser tab and their codebase in another. Has a design token mapping document they reference when the Figma value doesn't match a token exactly. Participates in design review when implementation is complete — approximately 40% of the time the designer spots something they'll need to fix.

Impact

→Token mapping in Dev Mode that shows which design token corresponds to an inspected value
→removes the judgment call on non-token spacing and color values
→Component status indicators that distinguish "designed" from "implemented in the design system"
→help engineers identify when they're implementing against a net-new component vs. an existing one
→Annotation tools that let designers specify behavior (hover states, transitions, error states)
→directly in the file reduce the separate-spec-document workflow for interactive components
→Redline comparison mode that overlays the design on the engineer's implementation
→removes the manual pixel-checking phase from design review

Composability Notes

Pairs with `figma-primary-user` for the full design-to-implementation handoff workflow from both sides. Contrast with `storybook-primary-user` for the component documentation and design system implementation workflow. Use with `vscode-primary-user` for the full frontend development environment including design reference.