Guide, checked by hand on
How to connect Figma to Claude
Give Claude your Figma designs as context: frames, components, variables, and code from them.
The address
https://mcp.figma.com/mcp- Made by
- Figma
- Sign-in
- OAuth (sign in with Figma)
- Transport
- Streamable HTTP
What it can do
- Read a frame or selection from a Figma link
- Turn designs into code with your components
- Read variables and styles
- Make diagrams in FigJam
How to add Figma to Claude
Figma is in Claude's connector directory, so you do not need the address. The same steps work on the web and in the desktop app.
- In Claude, open Customize, then Connectors (Settings > Connectors in some versions).
- Browse the connectors and search for Figma.
- Press Connect, sign in and allow access.
- In a chat, press +, then Connectors, to switch it on or off.
On your phone: connectors belong to your Claude account. Add it once on claude.ai or in the desktop app, and it is in the Claude app for iPhone and Android too: in a chat, press +, then Connectors, and switch it on.
Not in your list? Add it as a custom connector with the address above: the steps for a custom connector.
How to add it to ChatGPT
- On chatgpt.com, on a Plus, Pro, Business, Enterprise or Edu plan, turn on Developer mode (Settings > Security and login, or Settings > Apps > Advanced settings in some versions).
- Open Settings > Apps and create an app (the + or Create button).
- Name it Figma, paste the address, choose OAuth (or No authentication if the server is open) and press Create.
- Sign in when it asks.
- In a new chat, press + and pick Figma.
ChatGPT's menus move now and then; the idea stays the same: a new app, this address, OAuth. On business plans an admin may have to allow custom apps first.
Claude Code
claude mcp add --transport http figma https://mcp.figma.com/mcpThen run /mcp in Claude Code to sign in.
Try asking
- "Build this Figma frame as a React component: <link>"
- "List the colour variables in our design system file."
Good to know
- Some tools need a paid Figma seat; Figma's docs list which.
Official docs
In design and portfolios and websites.