Figma Claude connector

Generate diagrams and better code from Figma context

by Figma
Anthropic verified Anthropic verified
9 tools
Remote MCP
Interactive views
Creative

Add to Claude

URL https://mcp.figma.com/mcp

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

Needs a Figma account All setup steps

Figma in Claude at a glance

Reads: 7 tools; Code connect maps, design contexts, figjams and 4 more
Creates & edits: 1 tool; Design system rules
Deletes: Nothing; No tool name suggests deleting
Acts as: Your account; Claude works through your own Figma sign-in

Counts come from the tool names in the official listing. See every tool

How a request travels Illustration, not a screenshot

1 · You ask

“Create a Figma design system rule for [what it is about].”
→
2 · Claude calls
create_design_system_rules
Adds one or more new design system rules
→
3 · Server runs it

mcp.figma.com

As your Figma account
→
4 · Answer

Reply in the chat

Write tools can be set to ask you first

The prompt is our example and the tool is one from Figma’s list. Claude chooses tools itself, so real calls can differ.

Works in Claude on the web Claude Desktop Claude mobile apps Claude Code Other remote MCP clients

How to add Figma to Claude

Figma docs

Claude app web · desktop · mobile

1 Click Add to Claude or open Settings → Connectors and search for Figma.
2 Click Connect. Sign in to Figma and approve access.
3 In a chat, check Figma is on in the tools menu under the message box. Then ask.

On Team and Enterprise plans an owner may need to allow it first.

Claude Code terminal

Add the server:

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

Add --scope user to use it in every project.

2 Run /mcp, pick figma and sign in.
3 Check with claude mcp list.

Custom connector or any MCP client

In Claude: Settings → Connectors → Add custom connector. Other clients that support remote (streamable HTTP) servers take the same URL.

Figma MCP server URL

https://mcp.figma.com/mcp

Figma MCP tools

7 read, 1 write, 1 unclear. The official listing gives tool names only, so the text beside each name is our summary of it, not the developer’s wording.

Acts on Reads · 7 Changes data · 2

Workspace 1 tool
- whoami Whoamis items (our summary)
- None
Design system rules 1 tool
- No read tools
- create_design_system_rules Writes Adds one or more new design system rules (our summary)
Generate diagrams 1 tool
- No read tools
- generate_diagram Unclear
Code connect maps 1 tool
- get_code_connect_map Opens one code connect map with its details (our summary)
- None
Design contexts 1 tool
- get_design_context Opens one design context with its details (our summary)
- None
Figjams 1 tool
- get_figjam Opens one figjam with its details (our summary)
- None
Metadatas 1 tool
- get_metadata Opens one metadata with its details (our summary)
- None
Screenshots 1 tool
- get_screenshot Opens one screenshot with its details (our summary)
- None
Variable defs 1 tool
- get_variable_defs Pulls up a list of variable defs (our summary)
- None

Read or write is our reading of each name. List checked 2026-10-20; developers can change tools at any time.

Things to ask Claude with Figma

Our suggestions, one for each kind of tool Figma offers. Not from Figma or Anthropic. Fill in the [brackets].

Create a Figma design system rule for [what it is about].

uses create_design_system_rules
Turn these notes into Figma design system rules, one per action item: [paste notes].

uses create_design_system_rules
Open the Figma code connect map [name or link] and give me the key points.

uses get_code_connect_map

Security and access

Where requests go, whose account Claude uses, and what you control.

Server

mcp.figma.com

On the developer’s own domain (figma.com), not a third-party host. Claude sends requests here when it uses a tool.

Account

Your own Figma account

You sign in when you connect. Claude works through that account, so it reaches what the account can reach.

Control

You approve write tools

In Claude’s connector settings you can choose, tool by tool, whether Claude must ask before using it. Write tools are marked in the list above. See write tools

Policy

Published by Figma and linked from the official listing. Read it ↗

Anthropic’s directory notes that it does not control which tools a developer exposes and cannot guarantee they work as intended or stay the same. Connect connectors you trust.

Reviews

No reviews yet. Used Figma with Claude? Tell others how it went.

Honest reviews only. We never pay for or edit ratings.

Questions people ask

What does the Figma connector do in Claude?

The Figma MCP server helps you pull in Figma context and generate high-quality code that aligns with your codebase and design intent. Use the MCP server to retrieve code resources from Figma Design or Make files, and turn your ideas into production apps. **Key features:** • **Generate code from selected frames or nodes** - Select a frame in Figma or provide a node URL to have an AI agent turn your design into code. • **Extract design context from layers** - Pull out variables, components, and layouts from a design to ensure builds adhere to design patterns. • **Code smarter with Code Connect** - Boost output quality by reusing your actual components, the MCP server informs AI agents about existing components derived from Code Connect information. • **Map your flows with diagrams** - The Figma MCP server can turn your Claude prompts into flow charts, Gantt charts, or other diagrams in FigJam. **Note:** The get_screenshot tool is currently limited to returning a descripton of screenshots in Figma when called in Claude and Claude Code. See developer term [here](https://www.figma.com/legal/developer-terms/)

Is the Figma connector official?

It is made by Figma and carries the Anthropic verified mark in Anthropic’s directory. This site is independent and lists it from the official directory.

What is the Figma MCP server URL?

https://mcp.figma.com/mcp. It is a remote MCP server hosted at mcp.figma.com. Paste it into Claude as a custom connector, or add it to Claude Code with: claude mcp add --transport http figma https://mcp.figma.com/mcp

How do I add Figma to Claude Code?

Run "claude mcp add --transport http figma https://mcp.figma.com/mcp" in your terminal, then start Claude Code, type /mcp, choose figma and sign in to Figma. Add "--scope user" to make it available in every project.

Do I need a Figma account?

Yes. You sign in to Figma when you connect it, and Claude works through that account.

Can Claude change or delete my Figma data?

Judging by tool names, 1 of its 9 tools can change data. The other 7 only read. In Claude you can choose, per tool, whether Claude must ask before using it.