◉CLAUDE LABJP
●GATEWAY — In v2.1.225, hitting a gateway spend limit now tells you the cap, when it resets, and what your operator wants you to know●TRUST — Running claude agents in an untrusted directory now brings up the same workspace trust prompt that claude does●AUTH — A transient 401 could swap a long-lived OAuth token for a short-lived one and leave headless sessions broken until restart. That is fixed●MCP — On macOS, a timed-out keychain read no longer produces a burst of 401s that look like you were never authenticated●AGENTS — SendMessage can now open a conversation with a Remote Control session on another machine by name, without waiting to be messaged first●WORKBENCH — The legacy Workbench and experimental prompt tools API retire on August 17, and Sonnet 5 promotional pricing runs through August 31●GATEWAY — In v2.1.225, hitting a gateway spend limit now tells you the cap, when it resets, and what your operator wants you to know●TRUST — Running claude agents in an untrusted directory now brings up the same workspace trust prompt that claude does●AUTH — A transient 401 could swap a long-lived OAuth token for a short-lived one and leave headless sessions broken until restart. That is fixed●MCP — On macOS, a timed-out keychain read no longer produces a burst of 401s that look like you were never authenticated●AGENTS — SendMessage can now open a conversation with a Remote Control session on another machine by name, without waiting to be messaged first●WORKBENCH — The legacy Workbench and experimental prompt tools API retire on August 17, and Sonnet 5 promotional pricing runs through August 31
Articles/Claude Code
⟐ Claude Code/2026-03-09Intermediate

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

Learn how to connect Figma and Claude Code via MCP server for bidirectional design-to-code workflows, from setup to practical techniques.

Figma6Claude Code213MCP50Design6Code GenerationCode to Canvas

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.

ℹ️
**Key capabilities of Figma MCP integration:** - Retrieve design context from Figma to generate code (Design to Code) - Push UIs built in Claude Code back to Figma (Code to Canvas) - AI-generated FigJam diagrams - Design system / component understanding for consistent code output - Component mapping via Code Connect

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)
⚠️
**Plan considerations:** The free plan allows you to try Code to Canvas via the remote MCP server, but with a limit of 6 tool calls per month. For practical usage, a Professional plan or above with a Dev/Full seat is recommended.

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
⚠️
Community tools are unofficial and may break with Figma updates. For production workflows, the official MCP server is recommended.

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.

Share

Thank You for Reading

Claude Lab is ad-free, supported entirely by members like you. We publish practical guides daily with implementation code, benchmarks, and production-ready patterns. If you've found it useful, we'd love to have you on board.

  • ✦Copy-paste ready implementation code
  • ✦New advanced guides published daily
  • ✦$5/mo or $10 for lifetime access
View Membership →

If you found this article helpful, a small tip ($1.50) would mean a lot to us. Your support helps keep this site ad-free and covers server and hosting costs.

Related Articles

⟐ Claude Code2026-07-29
The MCP Server Connects Fine and Still Hands Back Zero Tools — Catching Silent Capability Drift with a Tool Manifest Diff
A missing credential does not break the MCP handshake. initialize succeeds, tools/list succeeds, and the array comes back empty. Here is the measured behaviour, and a preflight that locks the expected tool surface and fails closed before the agent ever starts.
⟐ Claude Code2026-07-27
Whose Environment Expands That Variable? Fingerprinting Your Effective Managed MCP Policy
Variable references in the Managed MCP allowlist and denylist now resolve from the startup environment and the managed-settings env block. I rebuilt both resolution orders locally to see where verdicts diverge, then wrote a preflight check that reduces the effective policy to a comparable fingerprint.
⟐ Claude Code2026-07-18
The MCP Server I Declared Vanished from the List — Designing Config for a Namespace You Share with the Vendor
When a vendor reserves an MCP server name, your .mcp.json declaration goes quiet instead of failing. Here is the preflight check and prefix convention I use to turn that silent gap into a loud stop before an unattended run.
📚RECOMMENDED BOOKS
Build a Large Language Model (From Scratch)
Sebastian Raschka
LLM Dev
Prompt Engineering for LLMs
Berryman & Ziegler
Prompting
AI Engineering
Chip Huyen
AI Eng
* Contains affiliate links
See all →