Convert Code to Figma Design with MCP

A recent update to Figma MCP tools lets you convert your code into a Figma design file. If you're a developer or designer, or your team uses templates and wants a design revamp, you're a few prompts away from a first draft.

#Setup

Installation is straightforward.

1. Add the Figma plugin

/plugin install figma@claude-plugin-directory

2. Add Figma Remote MCP Server

claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp

You can also add the Figma Desktop MCP if you're on a Pro plan.

#Try it on a real app

Expermineted it with Finwise SaaS landing page Next.js template by prompting claude as below:

Visualize the landing page @src/page.tsx from my Finwise local web app and push the screen to Figma.

In one shot it reproduced almost 90% of the design; I had to only tweak an image positon and a few gradient colors. With the right fonts and small adjustments it can match the original very closely.

Tips for best results:

• Keep the codebase minimal and clean.
• Prefer no animations, or disable on-load animations temporarily while the agent runs.

#Optional: Chrome DevTools MCP

Adding the Chrome DevTools MCP helps the agent visualize your web app directly in the browser:

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest