“Not a single dramatic moment — more like a Tuesday at 3pm when they realized they hadn't thought about cSS output that assumes a different architecture than the codebase they're working in in two weeks. figma-dev-mode had absorbed it. The tool had graduated from experiment to infrastructure without them noticing.”
When I'm implementing a new settings page, I want to get the values they need from a design without a Slack message to the designer, so I can understand the intended behavior of interactive components without a separate spec document.
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.
To make figma-dev-mode the system of record for get the values they need from a design without a Slack message to the designer. Not aspirationally — operationally. The kind of intention that shows up as a daily habit, not a quarterly goal.
The tangible result: get the values they need from a design without a Slack message to the designer happens on schedule, without manual intervention, and without the anxiety of cSS output that assumes a different architecture than the codebase they're working in. figma-dev-mode has earned a place in the daily workflow rather than being tolerated in it.
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.
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.
They've stopped comparing alternatives. figma-dev-mode is open before their first meeting. Get the values they need from a design without a Slack message to the designer runs on a cadence they didn't have to enforce. The strongest signal: they've started onboarding teammates into their setup unprompted.
CSS output that assumes a different architecture than the codebase they're working in keeps recurring despite updates and workarounds. They start tracking how much time they spend fighting figma-dev-mode versus using it. The switching cost was the only thing keeping them — and it's starting to look like an investment in the alternative.
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.