Figma × Claude Code Integration Guide — Bridging Design and Code with MCP

What Is Figma × Claude Code Integration?

In February 2026, Figma officially announced a bidirectional integration with Claude Code. Using Figma's MCP (Model Context Protocol) server, Claude Code can read design data from Figma to generate code, and conversely push UIs built in Claude Code back to Figma as editable layers.

This integration dramatically streamlines the designer-developer handoff. Instead of visually inspecting designs and manually writing code, AI automatically understands the design structure — layers, components, Auto Layout, and design tokens — and translates it into production-ready code.

Prerequisites

To get started with Figma × Claude Code integration, you'll need:

• Claude Code installed and configured (see Setup Guide)
• Figma account (basic features available on free plans)
• Figma desktop app (required for the desktop MCP server option)

Setup

There are two ways to connect to the Figma MCP server. Choose based on your needs.

Option 1: Remote MCP Server (Recommended)

Connect to Figma's cloud-hosted MCP server. No desktop app required — the easiest way to get started.

# Add the remote MCP server to Claude Code
claude mcp add --transport http figma https://mcp.figma.com/mcp

This opens Figma's authentication page in your browser. Log in and grant access to complete the setup.

Option 2: Desktop MCP Server

Use the local server running from the Figma desktop app. This offers faster response times and partial offline functionality.

Step 1: Enable MCP in Figma Desktop

1. Open the Figma desktop app
2. Go to Figma → Settings
3. Toggle Enable desktop MCP server on

Step 2: Register the local server in Claude Code

# Add the desktop MCP server
claude mcp add --transport sse figma-desktop http://127.0.0.1:3845/sse

Step 3: Verify the connection

# Restart Claude Code and check MCP connections
claude
/mcp

If figma or figma-desktop appears in the list, you're connected.

Setup via Figma Plugin

Figma also provides a dedicated Claude Code plugin. Installing it sets up the MCP server configuration along with agent skills for common workflows.

# Install the Figma plugin (includes MCP settings + skills)
claude plugin add figma

Design to Code

Basic Usage

To convert Figma designs into code with Claude Code, select a frame or layer in Figma, copy its link, and pass it to Claude Code.

Step 1: Get the link from Figma

1. Select the frame or component you want to code
2. Right-click → Copy link to selection (or Ctrl/Cmd + L)

Step 2: Ask Claude Code

Please implement this Figma design as a React component.
Use Tailwind CSS and make it responsive.

https://www.figma.com/design/xxxxx/MyProject?node-id=123-456

Claude Code reads the design data via MCP — layer structure, colors, fonts, spacing, Auto Layout settings — and generates code that faithfully matches the design.

Working with Design Systems

When connected to a Figma design system (component library), the AI understands existing components and produces consistent output.

Review all Button component variants (Primary, Secondary, Ghost)
from the project's design system, and create React components
that match the existing codebase.

When Code Connect is configured, Claude Code understands the mapping between design components and actual code components, reusing existing components in the generated code.

Practical Tip: Section-by-Section Implementation

Instead of implementing an entire page at once, working section by section yields better accuracy.

First, implement the header section (node-id=10-20) from this
Figma page. Navigation links can use placeholder data for now.

https://www.figma.com/design/xxxxx/MyProject?node-id=10-20

Code to Canvas

Live UI Capture

You can push UIs built in Claude Code back to Figma — not as screenshots, but as editable Figma layers.

Please push the current UI back to Figma.
The file is https://www.figma.com/design/xxxxx/MyProject

Claude Code captures the rendered UI and reconstructs it as Figma shapes, text, and image layers. Designers can then directly edit and refine the output in Figma.

Iterative Workflow

The real power of Code to Canvas lies in iterative workflows:

1. Designer creates mockups in Figma
2. Claude Code reads the design and implements the code
3. Developer adjusts and improves the code
4. Claude Code pushes the updated UI back to Figma
5. Designer provides feedback and makes corrections in Figma
6. Repeat steps 2–5

This bidirectional flow minimizes the gap between design intent and actual implementation.

FigJam × Claude

Figma MCP also supports FigJam integration. Pass text, PDFs, or images to Claude, and it can auto-generate structured diagrams on FigJam.

Create a system architecture diagram on FigJam
based on these project requirements.

[Requirements text or PDF]

Common use cases include user flow visualization, system architecture diagrams, and brainstorming session organization.

Community MCP Servers

Beyond Figma's official MCP server, the community has developed open-source alternatives.

Claude Talk to Figma

A community-built alternative that provides some functionality without requiring a Dev Mode license. It works with Claude Desktop, Cursor, and other AI tools.

# Community Figma MCP (example)
git clone https://github.com/arinspunk/claude-talk-to-figma-mcp
cd claude-talk-to-figma-mcp
npm install && npm start

Troubleshooting

MCP Connection Fails

# Check MCP server status
claude /mcp
 
# Remove and re-add the server
claude mcp remove figma
claude mcp add --transport http figma https://mcp.figma.com/mcp

Desktop MCP Server Not Responding

1. Confirm the Figma desktop app is running
2. Verify that the MCP server is enabled in settings
3. Check if http://127.0.0.1:3845/sse responds in your browser

Low Code Generation Accuracy

• Ensure your Figma design data is well-organized (proper layer naming, appropriate Auto Layout usage)
• Give instructions at the component level rather than full frames
• Explicitly specify the target framework (React, Vue, Svelte, etc.)

Looking back

The Figma × Claude Code MCP integration fundamentally transforms the design-development workflow. Design to Code accurately translates design intent into working code, while Code to Canvas feeds implementation results back to designers — creating a truly bidirectional flow.

Start with the remote MCP server connection, and as you get comfortable with the workflow, consider adopting the desktop MCP server and design system integration for a more powerful setup.