Figma Claude MCP

Figma控制台MCP服务器

 ](https://www.npmjs.com/package/figma-console-mcp)  

连接 克劳德桌面版 到 Figma桌面 通过自然语言设计、检查和管理您的文件。

______________________________________________________________________

这是什么？

这将Claude连接到您的Figma文件，以便您可以使用提示进行设计。只要描述一下你想要什么——克劳德会直接在Figma中创建它。

• 通过键入所需内容创建UI组件和全屏
• 集成和管理您的设计系统（标记、变量、样式）
• 通过对话检查、审核和调试您的Figma文件

______________________________________________________________________

克劳德可以用你的Figma文件做什么

创建和设计

Create a login card with email and password fields and a Sign In button
Design a navbar with logo, links, and a user avatar on the right
Build a settings page with a sidebar and form fields in the main area
Create a modal dialog with a header, content area, and Save/Cancel buttons

管理设计令牌

Create a "Brand Colors" token collection with Light and Dark modes
Add a primary color variable — #3B82F6 for Light, #60A5FA for Dark
Rename the "Default" mode to "Light Theme"
Add a "High Contrast" mode to my existing token collection

分析和审计

Audit my design system and show me a health score
Compare the Button component in Figma against our React implementation
Run an accessibility lint on this frame and flag WCAG issues
Browse the design tokens interactively

______________________________________________________________________

安装指南--Claude桌面+Figma桌面

本指南连接 克劳德桌面版 到 Figma桌面 使用 Figma克劳德连接 插件。

连接架构：

Claude Desktop
      ↓
Local MCP Server (Node)
      ↓ WebSocket
Figma Claude Connect Plugin
      ↓
Figma API

______________________________________________________________________

先决条件

______________________________________________________________________

步骤0——安装Node.js（如果需要）

打开终端，检查是否安装了Node.js：

node -v

如果你看到 v18.x.x 或更高，跳到步骤1。

如果没有：

1. 首选
2. 下载并安装 Node.js LTS
3. 验证 node -v

______________________________________________________________________

步骤1--克隆存储库

打开终端并运行：

git clone https://github.com/AbhinavAgr/figma-claude-MCP.git

然后

cd figma-claude-mcp

______________________________________________________________________

步骤2--安装依赖项

在同一个终端中，运行：

npm install

______________________________________________________________________

步骤3——构建本地MCP服务器

然后运行：

npm run build:local

这会产生 dist/local.js --文件Claude Desktop将运行。

______________________________________________________________________

步骤4-获取您的Figma API代币

1. 首选 管理个人访问令牌 在Figma中：

- 在Figma桌面：点击您的个人资料图标→ 设置 → 安全 → 个人访问令牌 - 或访问 Figma帮助：个人访问令牌 并按照以下步骤操作

1. 点击 添加新令牌
2. 输入名称： Figma Claude MCP
3. 复制令牌——你不会再看到它了！（开始于 figd_)

______________________________________________________________________

步骤5--配置Claude桌面

在终端中打开Claude Desktop配置文件夹：

macOS：

open ~/Library/Application\ Support/Claude/

视窗 --报刊 Win + R 并输入：

%APPDATA%\Claude\

创建（或编辑） claude_desktop_config.json 在该文件夹中：

{
  "mcpServers": {
    "figma-console": {
      "command": "node",
      "args": [
        "/Users/YOUR_USERNAME/figma-claude-mcp/dist/local.js"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN"
      }
    }
  }
}

替换 YOUR_USERNAME 使用您的实际系统用户名和 YOUR_FIGMA_TOKEN 使用步骤4中的令牌。

提示： 路径在 args 必须是到的完整绝对路径 dist/local.js.快跑 pwd 里面 figma-console-mcp 文件夹来获取它。

最终代码应该看起来像这样（确保｛｝放置正确）

{
  "preferences": {
    "coworkScheduledTasksEnabled": true,
    "ccdScheduledTasksEnabled": true,
    "coworkWebSearchEnabled": true,
    "sidebarMode": "chat"
  },
  "mcpServers": {
    "figma-console": {
      "command": "node",
      "args": [
        "/Users/abhinav/figma-claude-mcp/dist/local.js"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN"
      }
    }
  }
}

______________________________________________________________________

步骤6--重新启动克劳德桌面

完全退出Claude Desktop并重新打开。Claude将在启动时自动启动MCP服务器。

______________________________________________________________________

步骤7——安装Figma-Claude Connect插件

打开 Figma桌面那么：

Plugins → Development → Import plugin from manifest...

选择 figma-claude-connect/manifest.json 从 figma-console-mcp 目录。

插件将显示为 Figma克劳德连接 在您的开发插件中。这是一次性导入——它在Figma重新启动时持续存在。

______________________________________________________________________

步骤8——运行插件

打开Figma文件并运行：

Plugins → Development → Figma Claude Connect

插件窗口将会出现。预期状态：

● MCP ready

这确认了插件通过WebSocket连接到MCP服务器。

______________________________________________________________________

步骤9——测试连接

在 克劳德桌面版，从以下内容开始：

Check Figma status

List variables in my Figma file

Take a screenshot of the current Figma canvas

______________________________________________________________________

重要提示：保持这些打开状态

为了使集成工作，所有三个必须同时运行：

1. 克劳德桌面版
2. Figma桌面
3. Figma克劳德连接插件窗口

关闭插件窗口会停止连接。

______________________________________________________________________

故障排除

插件显示“正在连接”，但从未达到MCP就绪状态 → 重新启动Claude Desktop，然后在Figma中重新运行插件。

Claude找不到Figma工具 → Check claude_desktop_config.json。确保路径 dist/local.js 是完整的绝对路径。重新启动克劳德桌面。

插件未出现在Figma中 → Go to Plugins → Development → Refresh plugins.

______________________________________________________________________

示例提示

连接后，在Claude Desktop中尝试这些操作，直接在Figma中创建屏幕：

登录界面

Create a mobile login screen with an app logo at the top, email and password fields, a Sign In button, and a "Forgot password?" link below

仪表盘

Design a web dashboard with a sidebar navigation, a header with a search bar and user avatar, and a main area showing 4 stat cards and a recent activity table

入职流程

Build a 3-step onboarding screen with a progress indicator at the top, an illustration area, a title, a short description, and Next/Back buttons at the bottom

______________________________________________________________________

许可证

麻省理工学院——见 许可证 了解详情。

更多访问 abhinavagr.com

______________________________________________________________________

注： 这是对初学者友好的改编 原始Figma控制台MCP存储库。我简化了设置指南，并将其集中在Claude Desktop上，这样更容易上手。如果你想要完整的文档——包括NPX设置、云模式、远程SSE和高级选项——请访问原始仓库。