How to connect to the Figma MCP with Claude Code (5 steps)

With Merge Agent Handler's Figma MCP server connected to Claude Code, your agents can read design files, pull component specs, retrieve styles, and post comments directly from the terminal.

This guide walks through connecting Claude Code to Figma via Merge Agent Handler in five steps.

Prerequisites

Before getting started, you’ll need the following:

• Merge Agent Handler account
• Claude Code installed and configured 
• Figma account with appropriate file permissions                                                                                                                                                                      

Related: How to connect to Slack MCP through Claude Code

How it works

Merge Agent Handler acts as a secure bridge between your agent and Figma's API. 

You'll configure a Tool Pack (a scoped collection of connectors) and a Registered User (your agent's identity), which together generate a unique MCP URL that Claude Code uses over HTTP.

Using the MCP URL and an API key you’d generate in Merge Agent Handler, you can configure the server by running this command in your terminal:

 {
 "mcpServers": {
   "agent-handler": {
     "command": "npx",
     "args": [
       "-y",
       "mcp-remote@latest",
       "https://ah-api-develop.merge.dev/api/v1/tool-packs/{TOOL_PACK_ID}/registered-users/{REGISTERED_USER_ID}/mcp",
       "--header",
       "Authorization: Bearer ${AUTH_TOKEN}"
     ],
     "env": {
       "AUTH_TOKEN": "yMt*****"
     }
   }
 }
}

Steps for connecting to the Figma MCP via Claude Code

Here are the steps for generating the two unique items in the command above (your API key and MCP URL).

1. Create a Tool Pack

Log into the Merge Agent Handler dashboard, navigate to Tool Packs, and click Create Tool Pack. Give it a name like "Design Agent," add a description, and select Figma as your connector.       

It’s worth noting that you can select the specific Figma tools you want to make available in your Tool Pack during this step. And you can toggle between individual auth (the default) and shared auth.

2. Add a Registered User  

Go to Registered Users and click Add Registered User. 

This creates the identity context for your agent's operations and generates the unique MCP URL Claude Code will use.

3. Authenticate Figma

From the Registered User detail page, click Add Connector and complete the Figma OAuth flow. 

This grants your agent access to the files and teams you specify. 

4. Gather your credentials

You'll need two things from Merge Agent Handler:

• MCP URL (from the Tool Pack detail page): 

https://ah-api.merge.dev/api/v1/tool-packs/{TOOL_PACK_ID}/registered-users/{REGISTERED_USER_ID}/mcp

• API key (from Settings > API Keys > Create new key)

Related: A guide to connecting to the HubSpot MCP via Claude Code

5. Add Figma MCP to Claude Code 

You can now run the following command in your terminal, replacing the placeholders with your actual values:

 {
 "mcpServers": {
   "agent-handler": {
     "command": "npx",
     "args": [
       "-y",
       "mcp-remote@latest",
       "https://ah-api-develop.merge.dev/api/v1/tool-packs/{TOOL_PACK_ID}/registered-users/{REGISTERED_USER_ID}/mcp",
       "--header",
       "Authorization: Bearer ${AUTH_TOKEN}"
     ],
     "env": {
       "AUTH_TOKEN": "yMt*****"
     }
   }
 }
}

You can then verify the connection by running: <code class="blog_inline-code">claude mcp list</code>

You should see Agent Handler listed with a connected status.

Once connected, you can prompt Claude Code to pull from Figma directly. For example: "Get all the components from the design file and list their names, descriptions, and any associated styles so I can start building them out" 

Or you can take actions in Figma. For instance: "Post a comment on the checkout flow file flagging that the button spacing doesn't match what's in the component library."

{{this-blog-only-cta}}

Figma MCP FAQ 

In case you have any more questions on setting up and using the Figma MCP in Claude Code, here are a few commonly-asked questions answered.

What can agents do with a Figma MCP server?

• Product & UX research ops: Link new research insights to impacted frames/components and maintain traceability from “user problem → PRD → Figma → shipped release”

• Structured variant generation: Duplicate frames and generate controlled layout/copy variants (e.g., density levels, CTA placements) for exploration and experiments

• A/B asset sets: Produce standardized A/B/C creative packs with consistent naming, sizing, and export presets

• Localization at the design layer: Insert approved translations into text nodes, flag overflow/truncation, and run pseudo-localization to stress-test layouts

• Marketing asset pipelines: Generate multi-channel size variants (LinkedIn/X/blog/email/ads) from a master frame and export to the correct folders automatically

Why use Merge Agent Handler's Figma MCP server?

Merge Agent Handler's Figma connector includes enterprise-grade security controls, data loss prevention, and real-time observability over every tool call. You can scope exactly which files and teams your agent can access, and set custom guardrails so agents only interact with the assets they need.

Why connect Figma MCP to Claude Code?

Developers spend time switching between Figma and their editor to check specs, extract styles, and track design feedback. Connecting Figma to Claude Code brings that context directly into the terminal, so your agent can reference the latest designs while writing and reviewing code without context switching.