figma-developer-mcp

我在安装 mcp 链接figma，使用的是Framelink Figma MCP，引导我一步一步配置

powershell 复制代码

{
  "mcpServers": {
    "figma": {
      "command": "figma-developer-mcp",
      "args": ["--stdio"],
      "env": {
        "FIGMA_API_KEY": "keykeykeyukeykeyfigd_pP0OdHNPCBsCM_oBP_fltyhfBolDdc0fSjvmK1sO"
      }
    }
  }
}

Framelink Figma MCP 安装与环境配置教程（Windows）

本文档手把手教你在 Windows 上安装与配置 Framelink Figma MCP（使用 figma-developer-mcp），并接入支持 MCP 的客户端（如 Claude Desktop）。包含环境准备、安装命令、配置文件、常见错误（ENOENT、sharp）与加速镜像。

一、前置条件

已有管理员权限的 Windows 10/11
可用网络（建议能访问 npmjs 或配置国内镜像）

可选：安装 nvm-windows 方便多 Node 版本切换（推荐）。

下载 nvm-windows：https://github.com/coreybutler/nvm-windows/releases

二、安装/校验 Node.js 与 npm/npx

安装 Node 20 LTS（推荐）

直接安装：
- Windows x64 MSI（20.x 最新）：https://nodejs.org/dist/latest-v20.x/node-v20.17.0-x64.msi
- 国内镜像（20.17.0 目录）：https://npmmirror.com/mirrors/node/v20.17.0/
使用 nvm 切换（可选）：

powershell 复制代码

nvm install 20.17.0
nvm use 20.17.0

验证版本

powershell 复制代码

node -v
npm -v
npx -v

若 PowerShell 阻止 npm.ps1（执行策略）

powershell 复制代码

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
npm -v
npx -v

若报 ENOENT 缺少全局目录，修复 npm 前缀/缓存

powershell 复制代码

New-Item -ItemType Directory -Force "$env:APPDATA\npm" | Out-Null
New-Item -ItemType Directory -Force "$env:LOCALAPPDATA\npm-cache" | Out-Null

npm config set prefix "$env:APPDATA\npm" --location=user
npm config set cache  "$env:LOCALAPPDATA\npm-cache" --location=user

$env:Path = "$env:APPDATA\npm;$env:Path"

三、安装 Framelink Figma MCP（figma-developer-mcp）

方式A（推荐，稳定）：全局安装

powershell 复制代码

npm install -g figma-developer-mcp
figma-developer-mcp --help

方式B：npx 临时运行

powershell 复制代码

npx -y figma-developer-mcp --help

如遇 sharp 二进制相关错误，参考"六、常见问题"。

四、获取 Figma Personal Access Token（PAT）

登录 Figma 网页端
右上角头像 → Settings → 左侧 Developer
Personal access tokens → Create new token → 复制保存（仅显示一次）

可选：记下常用文件的 File Key（Figma 文件 URL 中 /file/<FileKey>/...）。

五、在 MCP 客户端中注册服务器

以 Claude Desktop（Windows）为例：

配置文件路径：
C:\Users\<你的用户名>\AppData\Roaming\Claude\claude_desktop_config.json

推荐配置（用环境变量传密钥）：

json 复制代码

{
  "mcpServers": {
    "figma": {
      "command": "figma-developer-mcp",
      "args": ["--stdio"],
      "env": {
        "FIGMA_API_KEY": "<你的Figma_PAT>"
      }
    }
  }
}

保存后重启 Claude Desktop。

如需在 Cursor/其他 MCP 客户端配置，思路一致：注册一个服务器条目，指定 command/args，并通过 env 注入 FIGMA_API_KEY。

六、常见问题与解决

ENOENT：...\AppData\Roaming\npm 不存在或 npx 找不到目录

powershell 复制代码

New-Item -ItemType Directory -Force "$env:APPDATA\npm" | Out-Null
New-Item -ItemType Directory -Force "$env:LOCALAPPDATA\npm-cache" | Out-Null

npm config set prefix "$env:APPDATA\npm" --location=user
npm config set cache  "$env:LOCALAPPDATA\npm-cache" --location=user

$env:Path = "$env:APPDATA\npm;$env:Path"

sharp 无法加载/预编译包缺失（Windows 常见）

首选方案：使用 Node 20 LTS（成功率高），清理 npx 缓存后重试：

powershell 复制代码

Remove-Item "$env:LOCALAPPDATA\npm-cache\_npx" -Recurse -Force -ErrorAction SilentlyContinue
npx -y figma-developer-mcp --help

本地落地安装并指定镜像：

powershell 复制代码

mkdir D:\mcp-figma; cd D:\mcp-figma
npm init -y
npm config set sharp_binary_host https://npmmirror.com/mirrors/sharp
npm config set sharp_libvips_binary_host https://npmmirror.com/mirrors/sharp-libvips
npm install figma-developer-mcp --include=optional

若仍失败，强制装当前平台 sharp：

powershell 复制代码

npm install --os=win32 --cpu=x64 sharp

若触发源码构建，需安装：
- Visual Studio Build Tools（含"使用 C++ 的桌面开发"）
- Python 3.10+

PowerShell 执行策略拦截 npm.ps1

powershell 复制代码

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

代理/镜像

可配置 npm 源：

powershell 复制代码

npm config set registry https://registry.npmmirror.com

七、使用与验证

本地验证服务器可运行

powershell 复制代码

figma-developer-mcp --help
# 或
npx -y figma-developer-mcp --help

在 Claude 中测试：

"使用 figma 工具列出我可访问的 Figma 文件"
"读取 FileKey 为 <你的文件ID> 的页面列表"
"导出某个画板为 PNG/SVG"

八、安全建议

不要把 FIGMA_API_KEY 提交到代码仓库。
优先通过环境变量向 MCP 服务器传递令牌。
定期在 Figma 控制台轮换/撤销不再使用的 Token。

九、将本教程导出为 PDF

方案A：使用 VS Code 插件"Markdown PDF"

在 VS Code 打开本文件
右键 → Markdown PDF: Export (pdf)

方案B：使用 Typora

打开本文件 → 文件 → 导出 → PDF

方案C：浏览器打印

在线 Markdown 渲染后（例如 GitHub/Gitee 或本地预览）
Ctrl+P 打印 → 选"另存为 PDF"

如需我根据你的实际环境替你生成 Claude 的完整配置文件或帮你诊断错误日志，请把报错粘贴给我（敏感令牌打码）。