Figma MCP Server + Claude Code/Cursor Integration: Building React Components from a Single Design URL

When a designer drops a Figma link in Slack, that's when the developer's hands get busy. Open a browser tab, read the specs, copy color values, figure out the layout structure... honestly, the whole process is pretty tedious. So the thought of having AI handle it has probably crossed everyone's mind at least once. You may have tried pasting a Figma screenshot into Claude or ChatGPT and saying "turn this into React" — I tried that a lot too, but the generated code was too often disconnected from the components my team actually used.

Figma MCP Server changes that approach entirely. Instead of images, it feeds structured design data directly to AI agents, enabling Claude Code or Cursor to generate production code that aligns with your team's actual codebase from a single Figma URL. By the end of this article, you'll be able to connect an MCP Server to an existing project today. We'll walk through how the connection architecture works, what a real workflow looks like, and the practical constraints you absolutely need to know before adopting it.

Who this is for: Frontend developers using React and TypeScript, or teams running a design system. Prerequisites: a Figma Professional or higher account, and access to a frontend codebase.

Core Concepts

MCP: The USB Port for AI Agents

Model Context Protocol (MCP) is an open standard protocol that Anthropic released in November 2024. Like a USB port, any AI agent that supports MCP can plug into any server that supports MCP. After OpenAI officially adopted it in March 2025, it has become a common interface across major AI IDEs including Cursor, Claude Code, VS Code Copilot, and Windsurf.

Through this protocol, the Figma MCP Server transforms raw data from the Figma REST API into a form that LLMs can digest and passes it to the agent. Information that screenshots can't capture — whether a layout uses Flexbox or Grid, whether spacing is 8px or 12px, which design tokens are applied — is all delivered to the AI as structured data.

Code Connect: The Layer That Makes "Use Our Team's Button" Possible

I initially thought connecting the MCP Server alone would solve everything — it didn't. With just the MCP Server connection, layout information comes through fine, but you get generic <div> code instead of the components your team actually uses.

Code Connect: A mapping layer that connects Figma components to components in your actual codebase. With this configured, the AI generates code like import { Button } from '@/components/ui/button' — the code your team actually uses — instead of <div className="bg-blue-500">.

Server Configuration: Remote vs Desktop

There are practical reasons to recommend the Desktop server in corporate environments. The Remote server is SSE-based and routes through Figma's cloud, while the Desktop server operates locally only — it doesn't violate internal network policies and eliminates concerns about design data leaving the organization. If you operate under strict security policies, the Desktop server is worth considering.

Practical Application

Example 1: Figma Design to React Component in Claude Code

The official way to connect Figma MCP to Claude Code is via the claude mcp add command or by directly editing the config file. For the exact, up-to-date commands, it's recommended to check the official Figma help article — the command format can vary slightly between versions, so referencing the official docs directly is the safest approach.

Once MCP is connected, the workflow goes like this:

1. Select the frame (or component) you want to implement in Figma
2. Right-click → "Copy link to selection" to copy the URL
3. Paste the URL into the Claude Code chat
4. Enter your prompt

Here's what you might actually type:

https://www.figma.com/file/xxxx/Design?node-id=123%3A456
 
Implement this design in React + Tailwind.
Reuse our project's Button, Card, and Typography components.

In the background, the MCP Server automatically calls the get_design_context, get_variable_defs, and get_image tools to supply context to Claude Code.

Here's how the generated output differs:

As you can see from the intermediate example, connecting MCP alone improves layout accuracy, but integration with your team's components isn't complete until you add Code Connect.

Example 2: Setting Up the MCP Connection in Cursor

Cursor manages MCP servers via a .cursor/mcp.json file. Add the file to your project root or the ~/.cursor/ path.

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/v1/sse",
      "headers": {
        "Authorization": "Bearer YOUR_FIGMA_PERSONAL_ACCESS_TOKEN"
      }
    }
  }
}

You can generate a Figma Personal Access Token from your Figma account settings → Security → Personal access tokens. After restarting Cursor, MCP tools will be automatically activated in Composer Agent mode.

In Cursor, you can explicitly invoke MCP tools using the @figma mention. This @figma mention syntax is Cursor-specific — in Claude Code, you simply paste the URL directly into the chat.

@figma https://www.figma.com/file/xxxx?node-id=789
 
Build this card component with Next.js + Tailwind.
It should be responsive — refer to the mobile frame in the design for mobile breakpoints.

Example 3: Connecting Your Design System with Code Connect

This is where the real impact lies. Code Connect is managed via a separate config file and tells the system which component in your codebase corresponds to which Figma component.

// figma.config.ts
import figma from '@figma/code-connect';
import { Button } from '@/components/ui/button';
 
figma.connect('https://www.figma.com/file/xxxx?node-id=Button', {
  component: Button,
  imports: ["import { Button } from '@/components/ui/button'"],
  props: {
    variant: figma.enum('Variant', {
      primary: 'primary',
      secondary: 'secondary',
      destructive: 'destructive',
    }),
    size: figma.enum('Size', {
      sm: 'sm',
      md: 'md',
      lg: 'lg',
    }),
    disabled: figma.boolean('Disabled'),
    children: figma.string('Label'),
  },
  example: ({ variant, size, disabled, children }) => (
    <Button variant={variant} size={size} disabled={disabled}>
      {children}
    </Button>
  ),
});

With this configuration, when the AI encounters a Button component in Figma, it automatically uses the correct import path and prop interface. You'll notice a meaningful improvement in generated code quality with each component you map.

Example 4: Reverse Conversion — Code → Figma (Separate Feature)

A feature introduced on the Figma blog, there is also a flow for reverse-converting production code into Figma layers. However, this is a separate product flow called "Claude Code to Figma" — not the Figma MCP Server itself. Confusing the two can lead to frustration when you try to follow along and it doesn't work.

This feature can be useful for code-first teams who want to share implementation results with designers or generate design artifacts after the fact. For the exact setup instructions, it's recommended to refer to the official Figma blog post.

Pros and Cons

Advantages

Disadvantages and Caveats

Tool Poisoning: An attack type where a malicious MCP server provides incorrect tool descriptions to an AI agent, causing unintended behavior. Extra caution is warranted when connecting third-party servers beyond the official Figma MCP server.

The Most Common Mistakes in Practice

1. Judging the results disappointing after connecting MCP without Code Connect — The MCP Server alone delivers layout information well, but your team's components won't be reflected. If you're getting generic HTML/CSS, it means Code Connect configuration is missing.

2. Attaching MCP to a Figma file with disorganized layer names — The AI interprets Figma's layer structure as-is. If names like Frame 1234 and Rectangle copy 3 are everywhere, generated code quality drops significantly. Cleaning up your Figma file before adopting MCP makes a noticeable difference.

3. Merging generated code without review — Faster iteration speed doesn't mean you can skip review. In particular, aspects that aren't expressed in Figma — especially accessibility and error states — should always be supplemented manually.

Closing Thoughts

The real value of this tool isn't "fast code generation" per se — it's the structure where the quality of output improves in direct proportion to how much you invest in organizing your Figma file structure and Code Connect configuration. Maintaining your design system in a form that AI can understand becomes a new capability for the team in its own right.

Here's the order I'd start in:

1. Audit the layer names in your Figma file — Start by renaming auto-generated names like Frame 1 and Rectangle copy to meaningful names.
2. Follow the official docs to connect the MCP server to Claude Code or Cursor — Try regenerating one small component from an existing project using its Figma URL; the gaps in your current setup will become immediately apparent.
3. Add Code Connect configuration to Button, Input, and Card — Mapping just those three core components will let you immediately feel how much the quality of generated code changes.

References

• Figma MCP Server Official Guide | Figma Help Center
• Dev Mode MCP Server Announcement Blog | Figma Blog
• Claude Code and Figma: Set Up the MCP Server | Figma Help Center
• Cursor and Figma: Set Up the MCP Server | Figma Help Center
• Remote MCP Server Installation Official Docs | Figma Developer Docs
• Claude Code → Figma: Convert Production Code to Figma Designs | Figma Blog
• Design Systems and AI: Why MCP Is the Key | Figma Blog
• Hands-On Guide to Claude Code + Figma MCP Server | Builder.io
• Pixel-Perfect Components with Figma MCP and Claude Code | DEV Community
• The Complete Guide to Figma's MCP Integration | Medium - Garima Dua
• Official MCP Server Guide Repo | figma/mcp-server-guide
• Introduction to Figma MCP Server | Figma Developer Docs
• The Impact of MCP in 2025 | Thoughtworks
• How to Structure Figma Files for AI Code Generation | LogRocket