Limitations of Figma Dev Mode generated code

WHAT THIS TESTS Whether you see Dev Mode as a measurement and starting reference rather than a production code generator, and whether you can articulate exactly what must change before shipping.

A GOOD ANSWER COVERS Dev Mode inspects a single frame in one static state, so its generated code mirrors the visual layout, frequently with absolute positioning or rigid measurements and hardcoded pixel values and hex colors. It does not know your framework conventions, your existing component library, or your design token names, and it cannot express responsiveness, breakpoints, interaction states like hover, focus, disabled, or loading, semantic HTML, or accessibility attributes such as roles, labels, and ARIA. Treated as truth it produces brittle, non-reusable markup. Used well, it is excellent for quickly extracting exact spacing, colors, typography, and the rough structure of a layout. The refactor then replaces absolute positioning with flexbox or grid, swaps hardcoded values for design tokens or theme variables, substitutes generic divs for semantic elements and reuses your existing components instead of regenerating them, and adds the states, responsiveness, and accessibility the snippet omitted.

COMMON WRONG ANSWERS Treating the snippet as production-ready and pasting it directly. Assuming it integrates with your component library or tokens automatically. Expecting it to handle responsiveness or interaction states. Ignoring accessibility. Believing it understands your framework's idioms.

LIKELY FOLLOW-UPS How do Figma variables and connected code components improve handoff? Why is absolute positioning a problem for responsiveness? How do you map generated values to design tokens? What about animation and states?

ONE CONCRETE EXAMPLE Dev Mode emits a card as a div with position absolute, top and left offsets, width 320px, and color hex codes. You keep the measured padding and the color values, but rewrite it as your existing Card component using flex layout, replace the hex codes with token references like color.surface, add semantic heading and button elements with proper labels, wire hover and focus styles, and make it fluid with max-width so it adapts, turning a static snapshot into a reusable, accessible, responsive component.