Skip to content
Agentmart
Submit a tool

How to connect Figma to Claude Code

Figma MCP Server comes straight from the vendor: the listing shows mcp.figma.com as publisher and marks it as the vendor's own server. It is hosted, and no API key is listed. This guide registers it in Claude Code by command or by a project .mcp.json, then checks the connection, using the listing's install data and Claude Code's documentation.

Updated Oct 26, 2026 · Built from catalog data; how we rank and grade

Checked against Claude Code's documentation on Oct 26, 2026. Commands and config blocks are generated from the same install data as each listing page.

Before you start

  • Claude Code installed and able to start.
  • Network access to mcp.figma.com.
  • No API key is listed for Figma MCP Server.

  1. 1. Check what you need

    With a hosted server there is no runtime to prepare. Claude Code needs only to reach Figma MCP Server over the network.

    • The listing names no required key.

  2. 2. Add Figma MCP Server to Claude Code

    Use the command for a personal setup and the .mcp.json entry when the project should carry it.

    Add it for you in every project
    claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp
    Or share it with the project: put this in .mcp.json at the project root.mcp.json
    {
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

  3. 3. Sign in

    If Figma MCP Server asks for a sign-in, take care of it inside Claude Code. The listing names no key to gather first.

  4. 4. Restart or reload if it does not appear

    When Figma MCP Server does not show up, how you added it decides what to try. The notes below list the options the docs give.

    • The docs do not say a restart is needed after claude mcp add. Servers connect at startup and can be reconnected from the /mcp menu.
    • In an interactive session Claude Code asks you to approve servers from a project .mcp.json before it uses them; claude mcp reset-project-choices resets those answers.

Check that it works

Run the check below and look for Figma MCP Server in the output. The listing records no tool count, so judge it by its status.

claude mcp list
  • Run claude mcp list from the shell, or /mcp inside a session. The list shows each server as Connected, Needs authentication, Failed to connect, or Pending approval.

Troubleshooting

Error: MCP server has a "url" but no "type"
Add "type": "http" (or sse) to the entry in the JSON file. Source
MCP server already exists in local config
Remove it from the other scope first with claude mcp remove <name> --scope <scope>, then add it again. Source
A ${VAR} in the config stays literal
The variable is unset. Export it before starting Claude Code or give it a default with ${VAR:-default}; claude mcp list shows a warning. Source
Server shows disconnected in a session
Open /mcp and reconnect it. Source

Security notes

  • Publisher: mcp.figma.com, listed as the vendor's own server; license unknown.
  • Your requests go to mcp.figma.com. Check who runs it and what it does with your data before you connect.
  • The listing declares no required keys; use a token with the narrowest scope if the service asks for one.
  • This listing has no security grade: Agent Market has not published security grades yet, so the choice is yours to make from the source and the permissions.

How we grade security · Trust policy

Servers and skills in this guide

Other Figma servers, comparisons and the general Claude Code guide are linked below.

  1. 1
    Figma MCP Server

    mcp.figma.comOfficial

    The Figma MCP server brings Figma design context directly into your AI workflow.

    ★ 2.1KLast active Oct 20, 2026Remote (HTTP)Claude Code, VS Code, Cursor, Windsurf

Related

Sources

Cite this page

How to connect Figma to Claude Code. Agent Mart. https://agentmart.dev/guides/connect-figma-to-claude-code (last updated 2026-10-26)