Get real code out of your Figma files.
Hand a Figma frame to an AI and ask for code. What comes back looks almost right, until you open it: hardcoded hex where your tokens should be, a second button living next to the one you already built, a layout that falls apart the second someone resizes the window. The instinct is to hunt for a better prompt. It’s the wrong instinct. Almost everything that decides the result happens before you type a word, in how the file is built. Ten things to get right, almost all of them in Figma.
Name your layers like code
Open the layer panel. Names like Frame 1268 and Rectangle 42 say little about the intended component. Use names such as CardContainer, PrimaryButton, or EmptyState to give the AI more context about each part.
Treat Auto Layout as the spec
Direction, gap, padding, and whether each child fills or hugs: that is your responsive behavior, written in a language the AI reads. Skip it and you get brittle absolute coordinates that break on the first resize. Resize the frame to a couple of widths and fix the awkward wrapping before you hand anything off.
Bind everything to variables
Of everything in this list, this one changes the output most. When a color is a variable, the AI sees the name, not just that it happens to be #B08830. The name is what lets it reach for your real token instead of pasting a hex string that drifts out of your system the next time someone tweaks the palette.
Link the exact node, not the whole file
Select the specific frame, copy the link to that selection, and hand over that one thing. An exact node link reduces ambiguity when the file contains several versions of a screen.
Wire up the Figma MCP
Figma ships an official Dev Mode MCP server. One command connects it to your AI coding tool, and from then on the AI can read the real layer tree, components, and variables straight from the frame. No more guessing from a screenshot.
Prompt with a contract, not "clone this"
Ask for pixel-perfect and you get a pretty, brittle copy. A contract spells out which components to reuse, which tokens to honor, how the states behave, and the rule that matters most: build inside the system you already have.
Ask it to reuse your components
"Reuse our existing components." Include that instruction, then check the implementation for duplicated components or styles. The prompt gives direction; the review confirms what happened.
Make it resolve to tokens before it writes code
A value can be numerically correct and still wrong. #B08830 might be the right gold, but if your system calls it accent, the raw hex is a landmine. Tell the AI to map every color, spacing, and type value to a named token first, and to flag anything missing rather than invent a value of its own.
Run the loop with numbers, not vibes
Put the result next to the Figma frame and compare them. Give a specific correction, such as "Set the gap under the title to 12px," then check the next version. A measurable request is easier to verify than "It feels off."
Treat the output as a first-pass PR
Review the generated implementation before merging it. Look for hardcoded values, missing states, and keyboard paths that do not work. Compare the result at more than one viewport width.