# How to Connect Claude Code to the Figma MCP Server: Complete Setup Guide > Connect Claude Code to the Figma MCP server easily. Install the official plugin to unlock auto-registration and powerful design-to-code tools like get_design_context and use_figma. - Repository: [Figma/mcp-server-guide](https://github.com/figma/mcp-server-guide) - Tags: how-to-guide - Published: 2026-03-30 --- **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`](https://github.com/figma/mcp-server-guide/blob/main/.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`](https://github.com/figma/mcp-server-guide/blob/main/.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: ```bash claude plugin install figma@claude-plugins-official ``` This command pulls the manifest from [`.claude-plugin/plugin.json`](https://github.com/figma/mcp-server-guide/blob/main/.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: ```bash claude mcp list ``` You should see output similar to: ```text 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: ```bash claude mcp add --transport http figma https://mcp.figma.com/mcp ``` This mirrors the configuration found in [`.mcp.json`](https://github.com/figma/mcp-server-guide/blob/main/.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: ```tsx export function Header() { return (

My App

) } ``` ### 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`](https://github.com/figma/mcp-server-guide/blob/main/.claude-plugin/plugin.json)** – The plugin manifest that registers the Figma MCP server for Claude Code specifically. - **[`.mcp.json`](https://github.com/figma/mcp-server-guide/blob/main/.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`](https://github.com/figma/mcp-server-guide/blob/main/.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`](https://github.com/figma/mcp-server-guide/blob/main/.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`](https://github.com/figma/mcp-server-guide/blob/main/.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`](https://github.com/figma/mcp-server-guide/blob/main/.claude-plugin/plugin.json) for enhanced integration, the [`.mcp.json`](https://github.com/figma/mcp-server-guide/blob/main/.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.