How to Connect Claude to Figma

Connect Figma to Claude to turn frames into code and draw FigJam diagrams. Figma limits how many reads you get on free plans.

Picks: 5; ranked

To connect Claude to Figma, go to Customize > Connectors, select Figma, choose Connect to Claude and sign in with your Figma account. Claude can then read the frame or layer you link, pull its variables and components, and draw diagrams in FigJam.

Figma caps how often Claude can read. As of November 2026, Starter plans and View or Collab seats get up to 20 reads a month, and Full or Dev seats on paid plans get 200 to 600 a day.

Good for

Developers who turn Figma frames into code in Claude or Claude Code
Design system teams who want Claude to follow their components and variables
Anyone who wants flow charts and diagrams drawn in FigJam from a prompt
Designers on Starter plans who need to know the call limit

Install Claude

Claude app

1
Open it in the marketplace

Requires A Claude account, A Figma account, On Team or Enterprise, an Owner adds Figma first.

Read-only mode: There is no read-only mode. Under Customize > Connectors > Figma > Tool permissions, set the tools that create or edit content, starting with the one that draws diagrams, to Needs approval or Blocked.

Pick the built-in connector in Claude. Figma publishes it in Anthropic's directory. Figma's docs say only clients in its MCP catalog can connect to its server, and name VS Code, Cursor and Claude Code as examples. In Claude Code, Figma recommends its plugin, which adds the connection and Figma's skills. After installing it, restart Claude Code, type /plugin and finish the sign-in. Paste a link to a frame into your prompt so Claude knows which design to read.

From its listing on claude.com. Source.

Connect Figma and build a frame as code

Claude

1
Open your connectors
Go to Customize > Connectors in claude.ai. In the desktop app, select Customize in the sidebar, then Connectors.
2
Connect Figma
Select Discover, search for Figma, open it and select Connect to Claude. Sign in with your Figma account and allow access. On Team and Enterprise, Figma appears only after an Owner adds it.
3
Turn it on in a chat
In a conversation, select + in the message box, select Connectors and turn on Figma. The toggle applies to that conversation.
4
Turn a frame into code
Copy the link to a frame or layer in Figma and paste it into the prompt. Claude reads the design, its variables and the components linked through Code Connect.
Prompt
```
Build this frame as a React component using our existing components: <paste the Figma frame link>
```

Draw a diagram

Claude turns the prompt into a flow chart or other diagram in FigJam.

Prompt

Draw a flow chart of our signup flow in FigJam: sign up, verify email, choose a plan, first project.

6
Watch the call limit
Each read counts toward Figma's limit for your seat. If Claude reports an error, check the limits in the FAQ below.
Tip: Ask Claude to run whoami to see which Figma account, plan and seat it is using.

Permissions

Medium risk

Most of what the connector does is read designs. The tool Claude's listing names for writing draws diagrams in FigJam, and Figma's server documents further tools that create files and edit content.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It can create diagrams, and Figma's server has more write tools
Claude's listing (as of November 2026) names one writing tool, generate_diagram, which makes a FigJam diagram in a new or existing FigJam file. Figma's tools page also lists remote-server tools that create files and edit content, such as create_new_file and use_figma, which the Claude listing does not name. Set the writing tools to Needs approval or Blocked, and check Tool permissions for what your connection shows. developers.figma.com
Design details go into the chat
Layers, variables and component names Claude reads are sent to Anthropic as part of the conversation. Connect only an account whose files you can share that way. claude.com
It only reaches files your account can open
Plan, seat and file permissions apply. Ask Claude to run whoami if it cannot reach a file. developers.figma.com
Owners control it on Team and Enterprise
An Owner adds Figma for the organization, and members connect with their own account. Enterprise customers on Okta can use Figma's Okta Cross App Access option. developers.figma.com

Security advisories

No published security advisories as of Nov 3, 2026.

Technical details

Turning on read-only	There is no read-only switch. Under Customize > Connectors > Figma > Tool permissions, set every tool that creates or edits content, starting with generate_diagram, to Needs approval or Blocked.
Talks to	Figma's hosted service. Anthropic, which receives the design details Claude reads
Sign-in and keys	You sign in with your Figma account; Claude keeps the connection until you select Disconnect.

Where it works

Where	Status	Note
Claude on the web	Native connector	Customize > Connectors > Figma. Owners add it first on Team and Enterprise.
Claude desktop app	Native connector	Same connector; select Customize in the sidebar, then Connectors.
Claude mobile app	Native connector	Available in chats once connected on web or desktop.
Claude Code	Native connector	Figma's plugin adds the server and skills, or add the server by URL.
Figma MCP server	Official server	Figma's own remote server, the one behind the Claude connector.

Top picks

Claude's built-in Figma connector is the default and sits in the install box. Listed here: Figma's own server first, then community servers with a reviewed PlugWiki page ordered by GitHub stars.

Verdict

Our advice: use the built-in Figma connector for design to code and FigJam diagrams. Pick a community server only if you hit the free-plan call limit or its tool list lacks the edits you need.

Our advice: the built-in connector fits most people because sign-in is all it needs. Check your seat first, since the call limit is what free users hit.

Best for

Turning a linked frame into code that reuses your components
Drawing flow charts and diagrams in FigJam
Developers using Claude or Claude Code

Skip it if

You are on a Starter plan and expect more than 20 reads a month
You need Claude to see screenshots as images
You want Claude to edit frames and your Tool permissions list shows no editing tool

Questions

How many Figma calls does Claude get on a free plan?

As of November 2026, Figma says Starter plans and View or Collab seats get up to 20 read calls a month. Full and Dev seats get up to 200 a day on Professional and Organization plans, and up to 600 a day on Enterprise, with per-minute limits too. Figma may change these limits at any time.

Does the Claude Figma connector cost extra?

Not on the Claude side. The limits above come from your Figma plan and seat. Figma says most MCP tools do not use Figma AI credits, but generate_image and send_prompt (Figma Make) do. Claude's listing names neither tool as of November 2026.

Can Claude edit my Figma designs?

Claude's listing as of November 2026 names tools that read designs plus generate_diagram, which draws diagrams in FigJam. Figma's own tools page lists more remote-server write tools, such as use_figma, which edits content in Figma files. Check Customize > Connectors > Figma > Tool permissions for what your connection exposes.

Can Claude see screenshots from Figma?

Not as images. Figma says its screenshot tool returns only a description of the screenshot when it is called from Claude and Claude Code.

Why is Figma not in my connectors list?

On Team and Enterprise plans an Owner has to add Figma for the organization first. Until then, select Request on its page in the directory.

What is the Figma MCP server URL?

https://mcp.figma.com/mcp. Claude's directory connector already uses it. Figma's docs say only clients in its MCP catalog can connect to it, so a client outside the catalog may not be able to.

How do I connect Figma to Claude Code?

Run the plugin command in the install box, restart Claude Code and sign in. Figma recommends the plugin because it adds Figma's skills as well as the connection.

How do I give Claude the right frame?

Copy a link to the frame or layer in Figma and paste it into your prompt. Claude uses the link to find the design.

How do I disconnect Figma from Claude?

Go to Customize > Connectors, select Figma and choose Disconnect.

Information

updated Nov 3, 2026

Made by: Anthropic
Connector directory: claude.ai/directory

In the Claude directory

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

Figma connector listing · claude.com
Remote server installation · developers.figma.com
Get started with connectors · claude.com
Rate limits and access · developers.figma.com
Tools and prompts · developers.figma.com