figma-developer-mcp

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

{"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

1. 安装 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 切换（可选）：

nvm install 20.17.0
nvm use 20.17.0

2. 验证版本

node -v
npm -v
npx -v

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

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

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

New-Item -ItemType Directory -Force "$env:APPDATA\npm" | Out-Null
New-Item -ItemType Directory -Force "$env:LOCALAPPDATA\npm-cache" | Out-Nullnpm 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（推荐，稳定）：全局安装

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

方式B：npx 临时运行

npx -y figma-developer-mcp --help

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

---

四、获取 Figma Personal Access Token（PAT）

1. 登录 Figma 网页端
2. 右上角头像 → Settings → 左侧 Developer
3. 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

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

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

保存后重启 Claude Desktop。

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

---

六、常见问题与解决

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

New-Item -ItemType Directory -Force "$env:APPDATA\npm" | Out-Null
New-Item -ItemType Directory -Force "$env:LOCALAPPDATA\npm-cache" | Out-Nullnpm 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"

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

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

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

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

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：

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

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

3. PowerShell 执行策略拦截 npm.ps1

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

4. 代理/镜像

• 可配置 npm 源：

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

---

七、使用与验证

1. 本地验证服务器可运行

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

2. 在 Claude 中测试：

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

---

八、安全建议

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

---

九、将本教程导出为 PDF

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

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

方案B：使用 Typora

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

方案C：浏览器打印

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

---

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