How do I prototype in code with Claude Code and Figma?

Connect Claude Code to Figma's MCP server, point it at a frame, and ask it to build that frame in code. Claude Code reads the design, its variables, and a screenshot, then writes the code in your project. You open it in the browser, see what is wrong, and ask again.

You do not need to be an engineer. You do need to read the result critically, because the first build is a draft, not a finished screen.

If you are deciding which AI tools to use at all, start with my AI tools for designers list.

Watch the Figma limits. Figma's rate limits apply to MCP tools that read data from Figma. View and Collab seats get 20 tool calls a month on every plan. Dev and Full seats on Professional get 200 a day. Education plans get the same limits as Professional Dev and Full seats. If you plan to iterate a lot, 20 calls a month will run out fast.

Claude Code runs in the terminal, in VS Code and JetBrains, in a desktop app, and on the web. The steps below use the terminal, since that is the route Figma's own setup guide documents.

These steps come from Anthropic's Claude Code docs and Figma's Claude Code setup article.

1. Install Claude Code. On macOS, Linux, or WSL, run curl -fsSL https://claude.ai/install.sh | bash. In Windows PowerShell, run irm https://claude.ai/install.ps1 | iex. Then open a new terminal and run claude --version to check it worked.
2. Start it in your project folder. Go into the folder and run claude. It asks you to log in the first time.
3. Install Figma's plugin. Run claude plugin install figma@claude-plugins-official. This plugin includes the remote MCP server settings. Restart Claude Code if it was already running.
4. Connect your Figma account. Type /plugin, move to the Installed tab, select the figma server, and press Enter to start authentication. Click Allow access on the page that opens.
5. Check it. Run /plugin again. The figma server should show as connected.

Figma also has a desktop server that runs through the Figma desktop app, but Figma recommends the remote server. The remote one has the broadest feature set and is the only one that can write to the canvas.

1. Prepare the frame. Use auto layout, named layers, and variables for colour and spacing. Clean files give cleaner code. My design system guide covers variables.
2. Copy the frame's link in Figma and paste it into Claude Code with a plain request: "Build this frame as a page in this project. Use the existing components."
3. Let it read the design. Figma's MCP tools include get_design_context (design context for a layer or selection), get_variable_defs (the variables and styles used), and get_screenshot (a screenshot of the selection).
4. Open it in the browser and compare it with the frame. Fix the gaps one request at a time: "the card padding should use the spacing-16 variable."
5. Add what Figma cannot show. Hover states, real data, loading states, keyboard behaviour. This is where a code prototype beats a clickable mockup.
6. Write your rules down. Claude Code reads a CLAUDE.md file in your project root at the start of every session. Put your conventions there so you stop repeating them. Figma's MCP server also offers a create_design_system_rules prompt to help draft one.

It works the other way too. The remote server's generate_figma_design tool can send live UI from your web app back into Figma as design layers.

At Vyro I used Figma MCP and Claude Code to prototype and test roughly 10x faster, cutting design-to-dev handoff friction. I used the same pairing to hand engineers a spec they could build from.

This site is designed and coded by me, from my own Figma design system and my own brand tokens. I also ship my own designs, improvements, and features directly in the codebase.

One line does not move: AI never does the thinking, the brainstorming, or the new ideas. Claude Code just gets it into the browser faster.

• Messy files give messy code. Hard-coded hex values and unnamed groups turn into hard-coded, unnamed code.
• It guesses when the design is silent. If you did not design the empty state or the error state, the code will invent one. Design them, or say what you want.
• A prototype is not production. Have an engineer review anything that will ship. A prototype proves the idea and the feel.
• Limits run out. On a View or Collab seat, 20 MCP calls a month is a few sessions, not a project.

When the prototype is ready, my handoff guide covers what else engineers need from you.

1. Check your seats. Confirm you have a paid Claude plan and know your Figma seat type and its MCP limit.
2. Install Claude Code and the Figma plugin using the five steps above.
3. Pick one simple frame, like a settings page or a card, and build it in a fresh project.
4. Write a CLAUDE.md with three rules you found yourself repeating, and build a second frame with it.