freemcplab / 目錄 / 演練場 / Figma MCP Server Guide

● 官方 figma ⚡ 即開即用

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

▶ 觀看演示 📦 安裝 💡 使用場景

為什麼要用

核心特性

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

即時演示

實際使用效果

figma-mcp-server-guide.replay ▶ 就緒

0/0

安裝

選擇你的客戶端

~/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
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

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

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

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit

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

點擊 Cline 側欄中的 MCP Servers 圖示，然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json

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

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json

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

Continue 使用伺服器物件陣列，而非映射。

~/.config/zed/settings.json

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

加入 context_servers。Zed 儲存後熱重載。

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

一行命令搞定。用 claude mcp list 驗證，claude mcp remove 移除。

使用場景

實戰用法： Figma MCP Server Guide

Use Figma MCP Server Guide for its primary workflow

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

何時使用： See repo README for canonical use cases.

前置條件

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

步驟

Install

Install Figma MCP Server Guide per its README.✓ 已複製

→ Server registered with the client
Configure

Provide credentials/config as instructed.✓ 已複製

→ Successful auth/init
Use

Run a sample task with Figma MCP Server Guide.✓ 已複製

→ Expected output

結果： You can drive the documented workflow end-to-end.

注意事項

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

工具

此 MCP 暴露的能力

工具	輸入參數	何時呼叫	成本
primary	see README	Primary action	free

成本與限制

運行它的成本

API 配額: Bounded by upstream provider quotas (if any)
每次呼叫 Token 數: Depends on usage
費用: Open source — check repo LICENSE
提示: Review upstream API costs (if any) before automating.

安全

權限、密鑰、影響範圍

最小權限： Whatever the upstream provider requires

憑證儲存： Env vars or local config — never commit secrets

資料出站： Forwards data per its README

切勿授予： Full admin to untrusted prompts

Project moves fast — pin a version in production.

故障排查

常見錯誤與修復

Auth fails

Verify credentials and required scopes match README.

驗證： Re-read repo README auth section.

Tool not found by client

Ensure MCP client config points to correct command/path.

驗證： Restart the client after editing config.

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills