How to Turn a Figma Design Into Code With Claude

Designing in Figma and then rebuilding it by hand in code is slow. Claude can do a lot of that translation for you, but how good the result is depends on how you give it the design. Here are three approaches, from quickest to most accurate, and how to get the best result from each.

Option 1: Screenshot to code

The simplest route works in any Claude chat.

1. Export your frame from Figma as a PNG at 2x.
2. Paste it into Claude with a clear brief:

Rebuild this design as a responsive HTML and CSS section.
Match the layout, spacing and type hierarchy as closely as you can.
Fonts: [heading font] and [body font]. Colours: [list hex values].
Use semantic HTML. Make it work at 375px wide.

What helps: give Claude the exact fonts and colour values. From a picture alone it has to guess, and those guesses are where results drift. If you have exact spacing or sizes, list them.

Limits: Claude sees an image, not your layers. It won't know your component names, auto layout settings or hover states unless you describe them.

Option 2: Connect Figma to Claude Code

For real projects, connecting Figma directly is much more accurate. Figma offers an official MCP server (MCP is the protocol that lets AI tools connect to other apps). Once it's added to Claude Code, Claude can read the design data of a frame you link or select: layout, styles, text and variables, rather than guessing from pixels.

The general flow:

1. Add Figma's MCP server to Claude Code. Figma's help centre has the current setup steps; it can be installed as a plugin or added as a remote MCP server, and you'll sign in to Figma to connect it.
2. In Figma, copy the link to the frame you want (or select it).
3. In Claude Code, ask: "Build this Figma frame as a React component: [link]. Use our existing components in /components where they match."

What helps: clean Figma files. Named layers, auto layout and shared styles translate into much cleaner code than a frame of loose, absolutely positioned shapes. Tell Claude which framework and styling approach you use (for example React with Tailwind), and point it at your existing components so it reuses them.

Limits: what you can access depends on your Figma plan and seat, so check Figma's docs if the connection doesn't work. Complex interactions and animations still need describing in words.

Option 3: Start from a section prompt

Sometimes you don't have a finished Figma design, just a direction. Instead of designing every section from scratch, you can start from a section that's already designed and turn it into code with one prompt.

Every section on Oversight Supply's sections page can be copied as a single, detailed prompt that describes the layout, type, colour and motion. Paste it into Claude or Claude Code, ask it to adapt the content to your project, and you get a working section without a Figma file at all. It's also a good way to get the "feel" right before you design the rest of the page.

Tips for accurate Figma-to-code results

• Build one section at a time. A single frame is far more accurate than a whole page at once.
• Give exact tokens. Font names, sizes, colours and spacing values beat "match the design".
• Describe states. Hover, focus, open and closed menus aren't visible in a static frame.
• Check mobile explicitly. Most Figma files have a desktop frame only. Ask for mobile behaviour, or provide the mobile frame too.
• Review against the design. Put the screenshot next to the result and list the differences for Claude to fix.

Which option to use

For more on getting designed-looking results from Claude, see 12 Claude prompts for website design.