Post

How to Integrate Figma MCP in Claude and OpenCode

Set up Figma MCP in Claude Code and OpenCode, avoid 403 OAuth errors, and use a working local community server config.

How to Integrate Figma MCP in Claude and OpenCode

If Figma MCP works in Claude but fails in OpenCode, you are usually mixing three different server models.

Pick the Right Figma MCP Mode

1) Figma Remote MCP (official, OAuth)

Use this endpoint:

1
https://mcp.figma.com/mcp

In Claude Code:

1
claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp

Then run /mcp, select the server, and complete Figma login.

2) Figma Desktop MCP (official, local)

Enable Desktop MCP server in the Figma desktop app (Dev Mode), then point tools to:

1
http://127.0.0.1:3845/mcp

No Figma PAT is needed in this mode.

3) Community MCP Server (PAT required)

For packages like figma-developer-mcp, you must pass a Figma Personal Access Token (FIGMA_API_KEY) to the local process.

Why OpenCode Shows OAuth 403 but Claude Works

Figma remote MCP OAuth can reject unapproved clients with:

1
HTTP 403 Forbidden

That is why Claude may work while OpenCode fails against the remote endpoint. In OpenCode, prefer:

  • Figma Desktop MCP (local URL), or
  • A community MCP server with PAT.

Working OpenCode Config (Community MCP)

Use ~/.config/opencode/opencode.json (or project opencode.json):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "figma": {
      "type": "local",
      "command": ["npx", "-y", "figma-developer-mcp", "--stdio"],
      "environment": {
        "FIGMA_API_KEY": "YOUR_FIGMA_PERSONAL_ACCESS_TOKEN"
      },
      "enabled": true,
      "timeout": 15000
    }
  }
}

Critical details:

  • type must be local for stdio servers.
  • --stdio is required, or OpenCode cannot speak MCP to the process.
  • environment values are passed literally; hardcoded value works.
  • {env:FIGMA_API_KEY} is optional substitution, not mandatory.

Verify in 30 Seconds

1
2
3
4
5
# 1) Confirm the MCP package runs
npx -y figma-developer-mcp --help

# 2) Test OpenCode MCP startup and tool discovery
opencode mcp debug figma

If debug fails, check these first:

  • Wrong config file (global vs project)
  • Missing --stdio
  • Invalid/expired Figma PAT
  • npx not available in PATH

Claude vs OpenCode Quick Decision

  • Want easiest official flow: Claude + Figma remote MCP.
  • Need OpenCode now without OAuth 403: Figma Desktop MCP.
  • Need CLI-only and portable setup: community MCP + PAT + –stdio.

For more MCP config migration patterns across tools, see How to Migrate MCP Servers from Cursor to Codex.

☕ Support My Work

If you found this post helpful and want to support more content like this, you can buy me a coffee!

Your support helps me continue creating useful articles and tips for fellow developers. Thank you! 🙏

This post is licensed under CC BY 4.0 by the author.