Agent Switchboard

Figma MCP Server

by Figma

VerifiedOfficial

Official listing: built and published by Figma. More from Figma

Gives coding agents Figma design context, variables, screenshots, and generated code from frames, and lets them write frames and components back to the canvas via remote or desktop MCP.

Use it now

Keep it with up to 9 other tools you're setting up, then share them all as one link.

Try this first

Ask your assistant, with Figma MCP Server connected:

  • Extract Design Variables

    Use Figma MCP Server to pull the color, spacing, and typography variables: ‹what you need›

  • Frame Screenshots

    Use Figma MCP Server to capture a screenshot of the selected node: ‹what you need›

Connect it over MCP

Cursor and other MCP clients
{
  "mcpServers": {
    "figma-mcp-server": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
Add to CursorAdd to Claude
Claude Code
claude mcp add --transport http figma-mcp-server https://mcp.figma.com/mcp

In Grok, ChatGPT and other assistants, add a custom connector with the address https://mcp.figma.com/mcp (how, step by step).

It may ask you to sign in to Figma or for a key when you add it; the setup guide says which.

Setup guide: developers.figma.com/docs/figma-mcp-server/remote-server-in…

Compare

Press Compare to add it to the tray at the bottom of the window, then pick up to 2 others anywhere on the site.

Access
MCP
Auth
OAuth 2.0
Skills
4

Skills

  • Get Design Context

    Returns a structured React and Tailwind representation of a Figma frame or layer that agents adapt to any framework.

  • Extract Design Variables

    Pulls the color, spacing, and typography variables and styles used in a selection so generated code references tokens.

  • Frame Screenshots

    Captures a screenshot of the selected node so agents can compare their implementation against the original design.

  • Write to Canvas

    Creates and edits native Figma frames, components, variables, and auto layout from an MCP client (remote server only).

Code & DevToolsContent & Mediafigmaofficial-mcpremote-mcpdesign-to-codedesign-systemscode-connectdev-mode
Visit Agent

Related Agents

Figma Context MCP

MCP

MCP server exposing Figma designs to AI coding agents — read layout, styles, and component structure for one-shot…

Verifiedby Framelink (GLips) · Code & DevTools, Content & Media · 3 skills · API Key

Talk to Figma MCP

MCP

Lets Cursor, Claude Code, and other MCP agents read Figma designs and create, edit, annotate, and export nodes through…

Verifiedby Grab · Code & DevTools, Content & Media · 5 skills · No auth

Open Design

CLI · MCP · API

Turns a local coding agent into a design engine that produces prototypes, decks, dashboards, and images, with a desktop…

Verifiedby Nexu · Content & Media, Code & DevTools · 4 skills · No auth

TerraVision

MCP · CLI

Generates official-style AWS, Azure, and Google Cloud architecture diagrams from plain-language descriptions or…

Verifiedby Patrick Chugh · Infrastructure & Ops, Code & DevTools · 4 skills · No auth
See 5 alternatives
figma-mcp-server
Gives coding agents Figma design context, variables, screenshots, and generated code from frames, and lets them write frames and components back to the canvas via remote or desktop MCP.
try this first
Ask your assistant, with Figma MCP Server connected:
Use Figma MCP Server to pull the color, spacing, and typography variables: ‹what you need›get-variable-defs
Use Figma MCP Server to capture a screenshot of the selected node: ‹what you need›get-screenshot
use it now
https://mcp.figma.com/mcpmcp.endpoint
{"mcpServers":{"figma-mcp-server":{"url":"https://mcp.figma.com/mcp"}}}mcp.config
claude mcp add --transport http figma-mcp-server https://mcp.figma.com/mcpmcp.claude-code
https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/mcp.docs
fields
nameFigma MCP Server
providerFigma
urlhttps://developers.figma.com/docs/figma-mcp-server/
categoriescode-devtools · content-media
accessmcp
authoauth2
streamingfalse
pushfalse
verifiedtrue
officialtrue · Figma
sponsoredfalse
tagsfigma, official-mcp, remote-mcp, design-to-code, design-systems, code-connect, dev-mode
skills
get-design-contextGet Design ContextReturns a structured React and Tailwind representation …
get-variable-defsExtract Design VariablesPulls the color, spacing, and typography variables and …
get-screenshotFrame ScreenshotsCaptures a screenshot of the selected node so agents ca…
use-figmaWrite to CanvasCreates and edits native Figma frames, components, vari…
alternatives
/agents/figma-mcp-server/alternatives5 listedfigma-context-mcp, talk-to-figma-mcp, open-design
compare
/compare?a=figma-mcp-server&b=figma-context-mcp&c=talk-to-figma-mcpwith figma-context-mcp, talk-to-figma-mcp/compare/figma-mcp-server-vs-figma-context-mcp-vs-talk-to-figma-mcpcurated comparison
→ https://developers.figma.com/docs/figma-mcp-server/