Figma (official)

Figma (official)

Official

Figma's own MCP server — read design context, generate code, and write back to the canvas.

Quick answer

What it does

Exposes 29 tools in five groups: Design to code, Code to design, Design systems and Code Connect, Generative plugins and shaders, and Account. Reads a selection's design context, variables, metadata and screenshots; writes native Figma content — new files, uploaded images, generated designs and diagrams — through the remote server.

Best for

  • Writing native content back into Figma files
  • Generating code from a selected frame
  • Code Connect component mapping
  • Extracting variables and design tokens

Not for

  • Starter plans and View/Collab seats (6 calls per month)
  • Read-only workflows where a community server suffices

Source: top-mcps.com/mcp/figma-mcp-server — verified Sep 2026

Setup recipe

Pick your client, then follow the three steps.

  1. 1

    Install

    claude_desktop_config.json
    {
      "mcpServers": {
        "figma-mcp-server": {
          "command": "Add",
          "args": [
            "https://mcp.figma.com/mcp",
            "as",
            "an",
            "HTTP",
            "MCP",
            "server",
            "in",
            "your",
            "client",
            "(no",
            "install)"
          ]
        }
      }
    }

    Paste under mcpServers. Fully quit and reopen Claude after editing.

    CLI or .mcp.json
    claude mcp add figma-mcp-server -- Add https://mcp.figma.com/mcp as an HTTP MCP server in your client (no install)

    Run from your repo. Commit .mcp.json to share with your team.

    .cursor/mcp.json
    {
      "mcpServers": {
        "figma-mcp-server": {
          "command": "Add",
          "args": [
            "https://mcp.figma.com/mcp",
            "as",
            "an",
            "HTTP",
            "MCP",
            "server",
            "in",
            "your",
            "client",
            "(no",
            "install)"
          ]
        }
      }
    }

    Global path: ~/.cursor/mcp.json. Reload window after editing.

    .vscode/mcp.json
    {
      "servers": {
        "figma-mcp-server": {
          "command": "Add",
          "args": [
            "https://mcp.figma.com/mcp",
            "as",
            "an",
            "HTTP",
            "MCP",
            "server",
            "in",
            "your",
            "client",
            "(no",
            "install)"
          ]
        }
      }
    }

    VS Code uses the "servers" key (not "mcpServers").

    ~/.codeium/windsurf/mcp_config.json
    {
      "mcpServers": {
        "figma-mcp-server": {
          "command": "Add",
          "args": [
            "https://mcp.figma.com/mcp",
            "as",
            "an",
            "HTTP",
            "MCP",
            "server",
            "in",
            "your",
            "client",
            "(no",
            "install)"
          ]
        }
      }
    }

    Open via Cascade → hammer icon → Configure.

    cline_mcp_settings.json
    {
      "mcpServers": {
        "figma-mcp-server": {
          "command": "Add",
          "args": [
            "https://mcp.figma.com/mcp",
            "as",
            "an",
            "HTTP",
            "MCP",
            "server",
            "in",
            "your",
            "client",
            "(no",
            "install)"
          ]
        }
      }
    }

    Open via the Cline sidebar → MCP Servers → Edit.

    ~/.continue/config.json
    {
      "experimental": {
        "modelContextProtocolServers": [
          {
            "transport": {
              "type": "stdio",
              "command": "Add",
              "args": [
                "https://mcp.figma.com/mcp",
                "as",
                "an",
                "HTTP",
                "MCP",
                "server",
                "in",
                "your",
                "client",
                "(no",
                "install)"
              ]
            }
          }
        ]
      }
    }

    Continue uses modelContextProtocolServers with a transport block.

    ~/.codex/config.toml
    # ~/.codex/config.toml
    [mcp_servers.figma-mcp-server]
    command = "Add"
    args = [
      "https://mcp.figma.com/mcp",
      "as",
      "an",
      "HTTP",
      "MCP",
      "server",
      "in",
      "your",
      "client",
      "(no",
      "install)",
    ]

    Codex uses TOML. Each server is a [mcp_servers.<name>] subtable.

    ~/.config/zed/settings.json
    {
      "context_servers": {
        "figma-mcp-server": {
          "command": {
            "path": "Add",
            "args": [
              "https://mcp.figma.com/mcp",
              "as",
              "an",
              "HTTP",
              "MCP",
              "server",
              "in",
              "your",
              "client",
              "(no",
              "install)"
            ]
          }
        }
      }
    }

    Zed calls them "context_servers". Settings live-reload on save.

    ChatGPT → Settings → Connectors (remote URL)
    {
      "name": "Figma (official)",
      "transport": "http",
      "url": "https://mcp.figma.com/mcp"
    }

    Paste this into Settings → Connectors → Add custom connector. Requires ChatGPT Pro / Team / Enterprise / Edu with Developer mode enabled. ChatGPT supports remote HTTPS MCP servers only — stdio servers must be hosted on a public HTTPS endpoint first.

  2. 2

    Set required secrets

    No credentials required — this MCP runs over stdio without authentication.

  3. 3

    Try a minimum working prompt

    Minimum working prompt pending verification. Try any prompt from the MCP’s README once installed.

Tools & permissions

ToolDescriptionArgsSide effects
download_assetsDownloads exports and original source images (remote server only).Read
get_code_connect_mapRetrieves node ID to code component mappings.Read
get_code_connect_suggestionsSuggests mappings (Figma-prompted).Read
get_context_for_code_connectComponent metadata for templates (Figma-prompted) (remote server only).Read
get_design_contextDesign context for a layer or selection.Read
get_figjamConverts FigJam diagrams to XML.Read
get_generative_pluginReads a generative plugin's source manifest (remote server only).Read
get_librariesLists subscribed and available libraries (remote server only).Read
get_metadataSparse XML outline of a selection.Read
get_motion_contextKeyframe animation data and code snippets.Read
get_screenshotScreenshot of a selection.Read
get_shaderReads a shader effect or fill's source manifest.Read
get_variable_defsVariables and styles used in a selection.Read
list_file_shadersLists shaders used in a specific file (remote server only).Read
list_generative_pluginsLists generative plugins in your library (remote server only).Read
list_shadersLists shader effects and fills in your library.Read
search_design_systemSearches libraries for components, variables, styles (remote server only).Read
whoamiIdentity and plans of the authenticated user (remote server only).Read
add_code_connect_mapMaps a Figma node ID to a code component.Write
create_generative_pluginCreates a generative plugin scaffold (remote server only).Write
create_new_fileCreates a blank Design, FigJam, or Slides file (remote server only).Write
create_shaderCreates a shader fill or effect scaffold (remote server only).Write
generate_diagramGenerates a FigJam diagram from Mermaid (remote server only).Write
generate_figma_designGenerates design layers from interfaces (remote server only).Write
send_code_connect_mappingsConfirms suggested mappings (Figma-prompted).Write
update_generative_pluginReplaces a generative plugin's code.ts or ui.html (remote server only).Write
update_shaderReplaces a shader's main.ts (remote server only).Write
upload_assetsUploads images into a Figma file (remote server only).Write
use_figmaGeneral-purpose create, edit, and inspect (remote server only).Write

Security & scope

Access scope
Network
Sandbox
Hosted endpoint at mcp.figma.com/mcp over Streamable HTTP, authorised against your Figma account and seat. No local process runs for the remote server; the trust boundary is the Figma account you authorise and the files it can reach.
Gotchas
  • Eleven of the 29 tools write: they create files, upload images and generate native Figma content. An agent with the full tool set can modify real design files, so scope it to a project you are willing to let it edit.
  • Starter plans and View/Collab seats are limited to six tool calls per month — enough to test, not to work. Confirm the seat before adopting.
  • Write-to-canvas is free only during the beta and is stated to become usage-based paid later.
  • The server is a Beta feature governed by the Figma Developer Terms, so the tool surface can change between releases.
  • The linked repository is Figma's guide and skills for the server, not its source — the server itself is closed and hosted, so you cannot audit or self-host it.

Agent prompt pack

— copy into Claude, Cursor, or ChatGPT.
Paste into Claude, Cursor, or ChatGPT. Edit the [brackets] before sending.
Recommend the best MCP servers for [task: e.g. design & creative work] in [client: Claude].

Constraints:
- Prefer tools that are [official | open-source | read-only] — pick what matters for my use case.
- Exclude MCPs that require [e.g. a paid plan, OAuth-only flows, remote-only transport].
- Return at most 3 picks, ranked.

For each pick include:
1. One-sentence rationale.
2. The ready-to-paste install snippet for my client.
3. Any required secrets I need to create before installing.

Cross-check the top-mcps.com listing: https://top-mcps.com/top-mcps-for-design-creative
Compare Figma (official) against a real alternative. Swap the second MCP in [brackets] if you want a different match.
Compare Figma (official) MCP vs [Figma (Framelink) MCP] for the following job: [describe the job, e.g. "let an agent create GitHub issues on bug triage"].

Judge them on:
- Setup time and complexity (what a new user hits first).
- Auth model (none / API key / OAuth 2.1) and credential risk.
- Transport (stdio / Streamable HTTP / SSE) and where the server runs.
- Required secrets and the blast radius if they leak.
- Operational risk in an unattended agent loop.
- Which one is "good enough" for a weekend prototype vs. production.

End with one sentence: which should I pick for my scenario, which is: [my scenario].

References:
- https://top-mcps.com/mcp/figma-mcp-server
- top-mcps.com listing for Figma (Framelink)
Asks the agent to install and verify. Works inside Claude Code, Cursor Agent, Codex CLI.
Install the Figma (official) MCP server for my [client: Claude] at the default config path for that client.

Use the exact install snippet published at https://top-mcps.com/mcp/figma-mcp-server (fetch https://top-mcps.com/mcp/figma-mcp-server.json for the canonical server.json if you can read URLs).

Before finishing:
1. Create the required secrets () and put them in the appropriate env block — do not hard-code them.
2. Restart or reload the client so it picks up the new server.
3. Verify the server is connected (green / running state) and at least one tool is listed.
4. If anything fails, read the client's MCP logs and report the exact error — do not silently retry.

Confirm when done and list the tools the server now exposes.

Frequently asked questions

What changed

2 updates tracked.
  1. Refreshed install snippets and fact sheet; verified for 2026.

  2. Initial directory listing.

More Design & Creative MCPs

Other tools in the same category worth evaluating.

Inspect Figma designs, components, and variables from an agent — the widely adopted community server.

figma, design, design-to-code, components
5 minMedium
Blender

Drive a live Blender session from an agent — create objects, set materials, run Python, render.

blender, 3d, modeling, rendering
10 minMedium

Compared with Figma (official)

Side-by-side breakdowns for the choices people most often weigh against this MCP.

Exploring Top MCPs for Design & Creative? See all Design & Creative MCPs →