freemcplab / Directory / Playground / Figma MCP Server Guide

● Official figma ⚡ Instant

Figma MCP Server Guide

Name: Figma MCP Server Guide MCP Server
Author: figma

Official Figma guide and reference for using the Figma Dev Mode MCP server with AI clients.

Figma MCP Server Guide is an MCP server maintained by figma. Official Figma guide and reference for using the Figma Dev Mode MCP server with AI clients. See the repo README for installation, auth, and configuration: https://github.com/figma/mcp-server-guide

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Official Figma guide and reference for using the Figma Dev Mode MCP server with AI clients.
Language: JavaScript
1412+ GitHub stars at verification time
Official project

Live Demo

What it looks like in practice

figma-mcp-server-guide.replay ▶ ready

0/0

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma-mcp-server-guide": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-server-guide"
      ],
      "_inferred": true
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "figma-mcp-server-guide": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-server-guide"
      ],
      "_inferred": true
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "figma-mcp-server-guide": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-server-guide"
      ],
      "_inferred": true
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma-mcp-server-guide": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-server-guide"
      ],
      "_inferred": true
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "figma-mcp-server-guide",
      "command": "npx",
      "args": [
        "-y",
        "mcp-server-guide"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "figma-mcp-server-guide": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-server-guide"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add figma-mcp-server-guide -- npx -y mcp-server-guide

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Figma MCP Server Guide

Use Figma MCP Server Guide for its primary workflow

👤 Claude Code users / MCP clients ⏱ ~20 min intermediate

When to use: See repo README for canonical use cases.

Prerequisites

Server installed / connection details ready — See https://github.com/figma/mcp-server-guide

Flow

Install

Install Figma MCP Server Guide per its README.✓ Copied

→ Server registered with the client
Configure

Provide credentials/config as instructed.✓ Copied

→ Successful auth/init
Use

Run a sample task with Figma MCP Server Guide.✓ Copied

→ Expected output

Outcome: You can drive the documented workflow end-to-end.

Pitfalls

Skipping README — Read the repo README and CHANGELOG before shipping to prod.

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
primary	see README	Primary action	free

Cost & Limits

What this costs to run

API quota: Bounded by upstream provider quotas (if any)
Tokens per call: Depends on usage
Monetary: Open source — check repo LICENSE
Tip: Review upstream API costs (if any) before automating.

Security

Permissions, secrets, blast radius

Minimum scopes: Whatever the upstream provider requires

Credential storage: Env vars or local config — never commit secrets

Data egress: Forwards data per its README

Never grant: Full admin to untrusted prompts

Project moves fast — pin a version in production.

Troubleshooting

Common errors and fixes

Auth fails

Verify credentials and required scopes match README.

Verify: Re-read repo README auth section.

Tool not found by client

Ensure MCP client config points to correct command/path.

Verify: Restart the client after editing config.

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills