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. If it is full of Frame 1268 and Rectangle 42, the AI has nothing to work with but shapes. Rename them to the nouns you would use in code: CardContainer, PrimaryButton, EmptyState. A name tells the AI what a thing is. A bounding box never can.
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
This is the highest-leverage move in the whole file. 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. A link to the whole file drags in everything and the AI grabs the wrong thing. A link to one frame is tight and unambiguous.
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"
"Make it pixel-perfect" gets you a pretty, brittle copy. A contract gets you production code: which components to reuse, which tokens to honor, how the states behave, and the rule that matters most, which is to build inside the system you already have.
Say the one line that saves you every time
"Reuse our existing components instead of inventing a parallel system." That single instruction prevents the most common failure in Figma-to-code work: a second, shadow design system quietly growing next to your real one. Say it every time.
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
The first pass is never right. Expect that, and the loop does its job. Put the result next to the Figma frame, look at it like a designer, and feed back specific deltas. "The gap under the title should be 12px, not 4" lands on the first try. "It feels off" sends the AI fishing.
Treat the output as a first-pass PR
The AI gets you most of the way in minutes. The last mile is judgment: a hardcoded value that slipped through, a state nobody built, a missing keyboard path. Read it the way you would read a junior’s pull request, because that is what it is.