What does Figma MCP let Claude Code do that pasting a screenshot doesn't?
With a screenshot Claude sees only pixels; through Figma MCP it reads structured data: layout, color and spacing variables, components. That lets it use your tokens instead of guessing a similar color code.
The other direction works too: tell Claude Code "Send this to Figma" and it captures the UI running in the browser as editable Figma frames.
I'm on the free Starter plan. Can I try it?
You can connect it, but you'll hit limits quickly: per the DEV Community article, Starter plans and View and Collab seats get up to 6 tool calls a month, which setup and testing alone can use up.
For real work the article recommends a Dev or Full seat on a paid plan. Confirm it's worth it on a small scale first, then decide whether to buy a seat.
Why link only one frame at a time?
Because pasting a full page or a very large frame makes responses slow or truncated. The get_metadata tool exists for this: it gives a lightweight map so Claude fetches only the nodes it needs.
In practice, break the page into components or sections and link and implement them one at a time rather than dropping in a whole page.
Can I use the generated code as-is?
Not advisable. The articles warn that React plus Tailwind output used as-is can grow a parallel UI kit that duplicates your existing components, and that unclean layer names (such as "Group 5") yield meaningless code.
That's why one rule in the rules file says to treat the output as a description rather than final code and to compare against the screenshot before finishing. Neither article provides quantified quality data, so quality has to be verified by you.
Figma's MCP Server lets Claude Code read your designs directly, instead of relying on you to screenshot them or describe them in text. For a designer or PM who doesn't write code, what it saves is the step of translating a screen into requirements. This piece draws on two hands-on write-ups, from DEV Community and Builder.io: how to connect, what Claude can read, and where people get stuck. Neither provides quantified results, and Builder.io sells a competing product, which is noted below.
The first direction is reading: you paste a Figma link, and Claude Code reads layout, variables and components and generates code from them. The second is writing: typing "Send this to Figma" in Claude Code captures the UI running in a browser (production, staging or localhost) as editable Figma frames, with editable text, buttons as separate components, and auto-layout. The latter uses the generate_figma_design tool, which is Claude Code-only and remote-MCP-only.
Both articles give the same steps. First add Figma's remote server in the terminal (adding --scope user makes it available across all projects):
claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp
Then launch Claude Code, type /mcp, select figma, choose Authenticate, and finish OAuth sign-in in the browser; no Token needs pasting. Type /mcp again and a green status means it worked. If figma isn't in the list, restart Claude Code, because MCP servers load at startup. You can also run claude mcp list: Connected is normal, Needs authentication means run /mcp again, and Failed to connect means checking that the URL ends in /mcp and the transport is http.
An alternative is the Plugin: claude plugin install figma@claude-plugins-official. Use the plugin or the server, not both, since installing both gives Claude duplicate Figma tools.
The DEV Community article lists four read tools. get_design_context returns a structured React plus Tailwind representation of the linked frame as a starting point for code. get_variable_defs fetches the variables and styles for color, spacing and type so Claude uses your tokens rather than raw values. get_metadata gives a lightweight map of a large selection so Claude can fetch only the nodes it needs. get_screenshot supplies an image of the frame for visual comparison. There is also write-to-canvas (beta), remote server only and free during the beta.
The article suggests adding a section to the project's CLAUDE.md that fixes the order of work each time:
## Figma MCP rules 1. Run get_design_context first. 2. If the response is too large, use get_metadata to find the nodes you need. 3. Run get_screenshot before coding. 4. Treat the output as a description, not final code. 5. Before finishing, compare the result against the screenshot.
A real prompt might read: "Implement this frame as a React component in src/components/marketing/PricingCard.tsx. Reuse our existing Button and use our design tokens: (paste Figma link)." A simple success check is whether Claude calls get_design_context and get_screenshot before it writes any code.
First, plan limits: a Dev or Full seat on a paid plan is recommended, while Starter plans and View and Collab seats get up to 6 tool calls a month, which setup alone can use up. Paid seats have per-minute limits. Second, link scope: pasting a full page or a very large frame makes responses slow or truncated, so link one frame or component at a time. Third, output can grow a parallel UI kit: React plus Tailwind output used as-is may duplicate your existing components, so name the framework and the components to reuse in the prompt. Fourth, layer names: generic ones such as "Group 5" produce meaningless code.
Builder.io's article adds limits for the code-to-Figma direction: layers don't carry business logic, event handlers or State Management; export is one-directional, so later design updates have to be redone; annotated elements can make MCP fail; Windows users on WSL face gaps; and get_code requires Code Connect, which is available only on organization and enterprise plans. The article ends by recommending its own product, so read that part as a vendor's view.
Check the seat first. If you're on Starter or hold a view-only seat, 6 calls a month are close to useless, which can make the tool look bad; to use it for real work you need a Dev or Full seat, and that is an added seat cost.
Second is usage. Neither article mentions token consumption or a measured time saving, so I can't tell you what this workflow is worth. Pick one real small component, run it end to end, note how long it took and how many fixes it needed, then decide whether the workflow justifies buying seats. Clean layer names and complete variables are the cheapest investment: they make the same design file read more accurately and cut reruns.