Figmavf.sr

listing.by · home.legend.verified

Bring Figma design context, variables and components into your assistant to generate code from frames or write back to the canvas.

state.auth.long (state.auth.title)Streamable HTTP

listing.connect

listing.explain.oauth

https://mcp.figma.com/mcp

listing.note.oauth

listing.share.h

listing.share.p

mcp.tc/i/figma

listing.about

Connects an AI assistant to Figma design files. It can read design context such as variables, components and layout data from a selected frame or layer link, and use it to generate code. It also supports Code Connect to reuse your real components, and writing native content (frames, components, variables, auto layout) back to the canvas, which is in beta.

Runs as a hosted Streamable HTTP endpoint at https://mcp.figma.com/mcp. Users sign in with Figma through OAuth. Rate limits apply to read tools and depend on the Figma plan and seat type, with a small monthly cap on Starter plans and View or Collab seats.

listing.can

  • Generate code from a selected Figma frame or layer link
  • Extract variables, components and layout data from designs
  • Reuse your own components through Code Connect
  • Write frames, components, variables and auto layout to the canvas (beta)
  • Convert web pages into Figma designs (rolling out)

listing.tools

listing.notools.oauth

listing.prompts

  • Implement the design at this Figma frame link in React.

  • Pull the color and spacing variables from this Figma file.

  • Build a card component in my Figma file using our design system.

  • Which of my codebase components map to this Figma frame?

listing.setup.h

listing.setup.oauth

Claude Code

  1. Run this in a terminal, in your project folder:
claude mcp add --transport http figma https://mcp.figma.com/mcp
  1. Start Claude Code, type /mcp, pick figma and choose Authenticate. A browser window opens for the Figma sign-in.

Add --scope user to make it available in every project, not just this one.

Claude Desktop

  1. Open Settings → Connectors and click Add custom connector.
  2. Name it Figma and paste this URL:
https://mcp.figma.com/mcp
  1. Click Add, then Connect, and sign in when Figma asks.

Claude Desktop's JSON config file only starts local servers. Remote servers go through Connectors, and connectors you add on claude.ai show up here too.

claude.ai

  1. Open the connector form on claude.ai. This button fills in the name and URL for you:
  1. Check that the URL reads https://mcp.figma.com/mcp and click Add.
  2. Click Connect and sign in when Figma asks.

Free plans allow one custom connector. On Team and Enterprise plans an owner adds it under Organization settings → Connectors.

ChatGPT

  1. On chatgpt.com, open Settings → Security and login and turn on Developer mode.
  2. Go to chatgpt.com/plugins and click + to create an app for a remote MCP server.
  3. Paste https://mcp.figma.com/mcp as the server URL and choose OAuth. ChatGPT sends you to Figma to sign in.

Developer mode is available on the web for Plus, Pro, Business, Enterprise and Education accounts.

Cursor

Or add it by hand to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project):

mcp.json
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Cursor shows Needs login next to the server. Click it to sign in.

VS Code

Or from a terminal:

code --add-mcp '{"name":"figma","type":"http","url":"https://mcp.figma.com/mcp"}'

Or commit it to the repo in .vscode/mcp.json:

.vscode/mcp.json
{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

VS Code asks you to sign in the first time the server starts.

Devin Desktop

  1. Add it to ~/.config/devin/mcp_config.json (macOS and Linux) or %APPDATA%\devin\mcp_config.json (Windows):
mcp_config.json
{
  "mcpServers": {
    "figma": {
      "serverUrl": "https://mcp.figma.com/mcp"
    }
  }
}
  1. Refresh the MCP server list in Cascade and sign in when asked.

Devin Desktop is the new name for Windsurf. It reads serverUrl (or url) for remote servers.

Codex

codex mcp add figma --url https://mcp.figma.com/mcp
codex mcp login figma

Or edit ~/.codex/config.toml directly:

config.toml
[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"

Gemini CLI

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

Then, inside Gemini CLI, run /mcp auth figma to sign in.

This adds it to the current project. Add -s user to use it everywhere.

Any client

Most clients accept this shape. Some name the URL field differently: serverUrl in Devin Desktop, httpUrl in Gemini CLI's settings file.

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Zed puts servers under context_servers in its settings. Cline needs "type": "streamableHttp", or it assumes SSE.

Client only starts local servers? Bridge it with npx -y mcp-remote https://mcp.figma.com/mcp.

listing.faq

Can I paste mcp.tc/i/figma into my MCP client?

No. mcp.tc links are pages, not server addresses. Connect with https://mcp.figma.com/mcp, so your client talks to Figma directly. The sign-in token only works there anyway. The quick link is for sharing: it opens this page, with setup steps for every client.

Does Figma need an API key or a sign-in?

Yes, you need a Figma account. The first time your client connects, it opens Figma's sign-in page. The token goes straight to the server's own URL, never through mcp.tc.

Is Figma a remote or a local server?

Remote. Figma hosts it at https://mcp.figma.com/mcp, and it speaks Streamable HTTP. There's nothing to install.

What can Figma do?

You can generate code from a selected Figma frame or layer link, extract variables, components and layout data from designs and reuse your own components through Code Connect.

Which clients can use it?

Any client that supports remote MCP servers: Claude Code, Claude Desktop, claude.ai, ChatGPT in developer mode, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed and others. The setup steps cover each one.

Who wrote this page?

mcp.tc's robot read Figma's own metadata (its MCP handshake, tool list and public pages), and an AI model drafted the text from it. A person reviews anything the checks can't confirm. The text can still be wrong, so if you spot a mistake, use Report this listing on this page.

listing.em.h

listing.em.lead listing.em.how

listing.em.badge

em.prev_lightem.prev_dark
Markdown
[![Figma on mcp.tc](https://mcp.tc/i/figma/badge.svg)](https://mcp.tc/i/figma)
HTML
<a href="https://mcp.tc/i/figma"><img src="https://mcp.tc/i/figma/badge.svg" alt="Figma on mcp.tc" height="20"></a>

listing.em.badge_note

listing.em.widget

HTML
<script src="https://mcp.tc/w/figma.js" async></script>

listing.em.widget_note

iframe

HTML
<iframe src="https://mcp.tc/embed/figma" title="Figma on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

listing.em.iframe_note

JSON

listing.em.json

https://mcp.tc/i/figma.json

listing.em.fields

listing.disclaimer_checked