Figma MCP: How to Set It Up, What It Gives Your AI, and What to Use Without a Figma File

The Figma MCP server lets your coding agent read a Figma file directly - the selected frame's structure, variables and components - so it writes code that matches the design instead of guessing from a screenshot. Add it to Claude Code with one command:

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

Start Claude Code, sign in to Figma when prompted, and it's connected. The rest of this post covers the other clients, what the server actually gives your agent, and the case it doesn't cover: when the design you want to match isn't in Figma at all.

Set it up in your client

Figma recommends the remote server (https://mcp.figma.com/mcp). There's also a desktop server that runs through the Figma desktop app; it needs a Dev or Full seat on a paid plan.

Claude Code - the command above, or Figma's plugin, which bundles the server with ready-made skills:

claude plugin install figma@claude-plugins-official

Cursor, VS Code, Windsurf and other clients - add a remote MCP server with the URL https://mcp.figma.com/mcp in the client's MCP settings, then complete the Figma sign-in.

Seats: the remote server is available on all seats and plans, but seats other than Dev or Full may hit usage limits. Check Figma's guide for the current limits on your plan.

What it gives your agent

With a Figma Design, Make or FigJam file you can view, you select a frame (or paste its link) and ask the agent to build it. The server hands over:

• Structure - the frame's layers and layout, so the agent knows what's nested in what.
• Variables and styles - your real color, spacing and type tokens instead of eyeballed hex values.
• Components - which design-system pieces are in use, so the agent can reach for the matching code components.
• A screenshot - for visual reference alongside the data.

The result is much closer to the design than "here's a screenshot, make this". The quality depends on the file: frames built with auto layout, named layers and real variables translate cleanly; a flat pile of absolutely-positioned rectangles doesn't.

The case it doesn't cover: no Figma file

The Figma MCP reads Figma files. A lot of real work starts somewhere else:

• The reference is a live website - "make our pricing page feel like Linear's".
• You're migrating an old site whose design file was lost years ago, or never existed.
• The source of truth is production - the shipped site has drifted from the Figma file, and you need what users actually see.
• You're building from a template or theme that only exists as HTML.

In all of these, there's nothing for the Figma MCP to read. Teams fall back to screenshots, and the agent goes back to guessing fonts, spacing and colors from pixels.

For live websites: a website-extraction MCP

This is the gap MiroMiro fills. It's an MCP server that reads a live URL instead of a file, and gives your agent nine tools: component code from any section (Tailwind, React, Vue or HTML), design tokens, brand colors and logo, fonts, SVGs, images, videos, audio and Lottie animations.

Add it the same way - it's also a remote server:

claude mcp add --transport http miromiro https://miromiro.app/mcp

Then prompt with a URL instead of a frame:

Use miromiro to extract the pricing section from https://linear.app/pricing as React + Tailwind, then adapt it to our plans.

The agent gets the page's real rendered CSS, not a guess. Setup for Cursor, ChatGPT, Claude web and Codex is in how to connect the MiroMiro MCP.

Which one to use

My recommendation: if you design in Figma, install the Figma MCP - it's the best way to get your own designs into code. Add a website MCP when your reference is the web rather than a file. They don't overlap, and agents pick the right tool from the prompt.

Common problems

• "No design context returned" - you need at least view access to the file, and a frame selected (desktop server) or a frame link in the prompt (remote server).
• Output ignores your design tokens - the file probably uses raw values instead of variables. Variables come through as tokens; hard-coded hex values come through as hex.
• Usage limits on the remote server - if you're on a View or Collab seat, you may hit limits. A Dev or Full seat lifts them.
• The live site doesn't match the Figma file - production drifted. Extract from the URL to get what's actually shipped, then decide which one is right.

Or use one API call

If you're not working inside an agent - a script, a CI job, an internal tool - the same extraction is a plain HTTP API: one GET request returns a section as code, plus its tokens. You can start for free: get a free API key, 300 credits a month, no card.