By Mehdi HassanHow do you use Claude Code with the Figma MCP server?
You use Claude Code with the Figma MCP server by adding Figma's server to Claude Code, authenticating with your Figma account, and prompting with links to specific frames. The server gives the agent structured design context, and Claude Code writes the page inside your existing repo.
This setup sits between plugin converters and hand-coding. Our guide to Figma to code with AI compares it with Figma Make and plugins, and our hub on Figma to website covers when Next.js is the right destination at all. This article is the hands-on version: one landing page, built section by section, with notes on where the agent stops being enough.
Both tools change quickly. We describe only the setup that Figma and Anthropic document, and we point you to their docs for anything that may have moved since this was written in 2026.
What do you need before you start?
You need a Figma file you can open, Claude Code installed, and a Next.js project for the page to land in. The Figma file's quality matters more than any prompt, so prepare it first.
- Figma access. Figma's MCP server docs list which plans and seats can use the remote and desktop servers, plus usage limits. Check their plans and permissions page before you rely on it for a deadline.
- Claude Code. Installed and working in the repo you'll build in. Anthropic's Claude Code docs cover installation and MCP configuration.
- A Next.js project. Ideally with your fonts, colors and spacing already set up as tokens, and a few base components such as buttons and containers. The Next.js docs cover project setup with the App Router.
- A prepared Figma file. Auto layout on every section, colors and type defined as variables or styles, named layers and real copy. Our guide to preparing Figma files for development has the full checklist.
How do you connect the Figma MCP server to Claude Code?
Connect them with Figma's remote MCP server, which Figma's docs recommend over the desktop server for most users. Figma documents two routes for Claude Code: installing its plugin, or adding the server by hand.
Install the plugin
Figma's docs give the command claude plugin install figma@claude-plugins-official. Then open /plugin, select figma under the Installed tab and allow access in the browser.
Or add the server manually
Run claude mcp add --transport http figma https://mcp.figma.com/mcp, adding --scope user if you want it in every project. Figma notes the manual route doesn't install its skills.
Authenticate
In a new Claude Code session, open /mcp, choose figma and authenticate. A browser page opens; allow access and return to the terminal.
Confirm the connection
Open /mcp again and check that figma shows as connected before you prompt.
The desktop server runs through the Figma desktop app and works from your current selection instead of a link. Figma's docs still recommend the remote server, because the desktop server supports fewer features, including no writing to the canvas. If your team uses it, follow Figma's desktop server instructions, because the setup differs.
How do you build a Figma MCP landing page step by step?
Build a Figma MCP landing page one section at a time: link the agent to a single frame, ask it to build that section with your existing components and tokens, review it, then move to the next. Small, linked prompts produce code you can actually review.
- Set the rules first. Ask Claude Code to read your repo's components and tokens, and write a short project rules file. Figma's server also offers a create_design_system_rules prompt for this.
- Copy a frame link. In Figma, right-click the hero frame and copy a link to the selection.
- Prompt with the link. Ask Claude Code to build the hero as a component in your app, using existing components and tokens, with no hard-coded colors or font sizes.
- Let it gather context. The agent calls tools such as get_design_context for code and structure, get_variable_defs for variables and styles, and get_screenshot to compare visually.
- Pull assets. Ask it to export images and icons from the frame into your public folder, and to use the Next.js Image component.
- Review and commit. Run the page locally, compare with the frame, fix what's off, and commit before the next section.
- Assemble the page. Once each section works alone, compose them into the route and add metadata.
Figma's server returns a code representation of the frame, which the agent adapts to your stack. If your repo uses Tailwind, CSS Modules or a component library, say so in the rules file, or you'll get a different styling approach than the rest of your code.
Where does a human still need to fix the code?
A human still needs to fix spacing, responsive behavior, copy and accessibility, because the Figma file either doesn't contain that information or contains it ambiguously. The agent builds what it can see, and these four live partly outside the frame.
Area | What the agent tends to do | What the developer fixes |
|---|---|---|
Spacing | Copies exact pixel values, sometimes off-scale | Snaps values to the spacing tokens and section rhythm |
Responsiveness | Matches the frame's single width | Defines breakpoints, stacking order and fluid type |
Copy | Builds placeholder or draft text exactly | Swaps in final copy and checks it fits at every width |
Accessibility | Uses divs where buttons or headings belong | Fixes semantics, heading order, alt text and focus states |
Motion | Skips it or adds generic transitions | Builds the interactions the design intends |
SEO | Leaves metadata out | Adds titles, descriptions, Open Graph and schema |
Spacing errors usually trace back to the file: frames without auto layout come through as absolute positions, which break as soon as text changes length. Copy is the most overlooked. If the hero in Figma says something generic, the landing page will too, and no agent will rewrite it into a stronger offer. Our AI landing page hero examples show what a clear one looks like.
For example, suppose a five-section AI product landing page
Hypothetical example: a team has a Figma file with a hero, logo strip, feature grid, pricing and FAQ, each with desktop and mobile frames. Claude Code builds each section from its frame link, reusing the team's button and container components.
The hero and FAQ come out close to the design. The feature grid needs its gaps snapped to the spacing scale, the logo strip needs a wrapping rule for narrow screens, and pricing needs real button elements and focus styles. The developer also rewrites the hero headline, which was still placeholder text in Figma. The agent saved the typing; the review decided the quality.
Is Claude Code with Figma MCP good enough for production?
Claude Code with Figma MCP is good enough for production when a developer reviews every section, and not before. It removes most of the typing in turning a frame into components, but it doesn't make decisions the design file leaves open.
Pros
- Builds inside your repo with your components and tokens
- Reads structure and variables, not just a screenshot
- Fast for well-prepared files and repeated sections
- Output is plain code you own and can review
Cons
- Quality drops sharply with messy Figma files
- Responsive rules and motion still need a developer
- Copy is built as-is, including placeholders
- Plans, seats and usage limits apply on Figma's side
It fits teams that already have a Next.js codebase and a clean Figma library. It's a weaker fit for a founder with no codebase and one marketing page, where a visual builder may be faster. Our guide to Figma to Next.js covers the full production workflow, and our Next.js development and landing page design services cover the build if you'd rather hand it off.
