How to Connect Claude Code to the Figma MCP Server: Complete Setup Guide

To connect Claude Code to the Figma MCP server, install the official plugin via claude plugin install figma@claude-plugins-official, which auto-registers the HTTP endpoint at https://mcp.figma.com/mcp and enables design-to-code tools like get_design_context and use_figma.

Connecting Claude Code to the Figma MCP server creates a bidirectional bridge between design files and code generation, allowing the AI to read node structures and write components directly back to Figma. According to the figma/mcp-server-guide repository, this integration leverages the Model Context Protocol (MCP) to expose design data as structured tools that Claude Code can invoke through simple commands. This guide explains the architecture, installation steps, and exact file paths you need to enable this workflow.

Architecture of the Claude Code Figma Integration

The integration relies on four core components working together:

• Figma MCP Server – A remote HTTP endpoint (https://mcp.figma.com/mcp) that serves design data and accepts write-back commands. This acts as the central data hub.
• Claude Code Client – The LLM-driven environment that consumes MCP tools, executes prompts, and processes structured design context.
• Plugin Manifest – The .claude-plugin/plugin.json file auto-configures Claude Code by registering the MCP server URL and available Agent Skills without manual JSON editing.
• Skill Definitions – Markdown files in the skills/ directory (such as figma-use) define prompt templates and tool usage patterns for advanced workflows.

When Claude Code executes a tool like get_design_context, it sends an HTTP POST request to the server defined in .mcp.json. The server returns a structured JSON representation of the selected Figma node—by default formatted as React with Tailwind CSS—which Claude Code then uses to generate or modify code.

Step-by-Step Setup Guide

Follow these exact commands to establish the connection between Claude Code and the Figma MCP server.

1. Install the Official Figma Plugin

Run the following command in your terminal to install the plugin and auto-register the MCP server:

claude plugin install figma@claude-plugins-official

This command pulls the manifest from .claude-plugin/plugin.json and configures Claude Code to communicate with https://mcp.figma.com/mcp.

2. Verify the MCP Server Registration

Confirm the server is active by listing configured endpoints:

claude mcp list

You should see output similar to:

figma   http   https://mcp.figma.com/mcp

If the entry appears, Claude Code is successfully connected to the Figma MCP server.

3. Add the Server Manually (Optional)

If the auto-install fails or you need to debug, manually register the endpoint:

claude mcp add --transport http figma https://mcp.figma.com/mcp

This mirrors the configuration found in .mcp.json, which contains {"type":"http","url":"https://mcp.figma.com/mcp"}.

4. Test the Connection

In Claude Code chat, run:

#get_design_context

Claude Code will invoke the get_design_context tool, fetch the currently selected Figma node, and return a React + Tailwind code snippet.

Working with Figma Design Data

Once connected, you can use specific tools to read designs and write back to Figma.

Fetching Design Context

Prompt Claude Code with:

#get_design_context

The tool returns structured code based on the selected frame. For example, selecting a header component in Figma might yield:

export function Header() {
  return (
    <header className="flex items-center justify-between p-4 bg-white shadow">
      <h1 className="text-2xl font-bold">My App</h1>
      <button className="px-4 py-2 bg-blue-600 text-white rounded">Login</button>
    </header>
  )
}

Writing Back to Figma with use_figma

To create or modify components directly from Claude Code, use the use_figma tool (defined in skills/figma-use/):

use_figma create a new component named "PrimaryButton" with a blue fill and rounded corners

This sends a create-component request to the MCP server and returns a confirmation with the new node ID.

Configuration Files and Source Locations

Understanding these key files helps with troubleshooting and custom setups:

• .claude-plugin/plugin.json – The plugin manifest that registers the Figma MCP server for Claude Code specifically.
• .mcp.json – Universal MCP configuration used by VS Code, Cursor, and other editors to connect to https://mcp.figma.com/mcp.
• skills/ – Directory containing Agent Skill definitions like figma-use and figma-generate-library that expose MCP tools through natural language prompts.
• .cursor-plugin/plugin.json – Equivalent manifest for Cursor users, showing the same server configuration pattern.

Summary

• Install via plugin: Use claude plugin install figma@claude-plugins-official for automatic configuration.
• Server endpoint: The Figma MCP server runs at https://mcp.figma.com/mcp as defined in .mcp.json.
• Read designs: The get_design_context tool returns React + Tailwind code from selected Figma nodes.
• Write designs: The use_figma tool enables component creation and modification directly from Claude Code.
• Manual fallback: Use claude mcp add --transport http figma https://mcp.figma.com/mcp if auto-registration fails.

Frequently Asked Questions

Do I need to manually edit configuration files to connect Claude Code to the Figma MCP server?

No. Installing the official plugin via claude plugin install figma@claude-plugins-official automatically reads .claude-plugin/plugin.json and registers the server. You only need to manually add the server using claude mcp add if the automatic installation fails or if you are debugging the connection.

What data format does the Figma MCP server return to Claude Code?

By default, the server returns structured design data formatted as React components with Tailwind CSS classes. When you invoke get_design_context, the MCP server at https://mcp.figma.com/mcp analyzes the selected Figma node and generates code that Claude Code can immediately use or modify.

How do I enable write-back functionality to create Figma components from code?

Use the use_figma tool, which is available through the figma-use skill located in the skills/ directory. Prompt Claude Code with commands like use_figma create a new component named "Card", and the tool will send the appropriate creation command to the MCP server, returning confirmation and the new component ID.

Can I use the Figma MCP server with editors other than Claude Code?

Yes. While Claude Code uses .claude-plugin/plugin.json for enhanced integration, the .mcp.json file provides a standard configuration that works with any MCP-compatible client, including VS Code and Cursor. Both configurations point to the same endpoint (https://mcp.figma.com/mcp) and expose identical tools.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}