# figma-developer-mcp（Framelink）配置说明

使用 [figma-developer-mcp](https://www.npmjs.com/package/figma-developer-mcp) 通过 **Figma REST API** 读取设计稿，不占用官方 Figma MCP 的月度调用额度。

## 1. 获取 Figma Token

1. 打开 Figma → Settings → Security → **Personal access tokens**
2. 创建 token（需有设计文件访问权限）
3. 复制 token（形如 `figd_...`）

## 2. 配置密钥（二选一）

**方式 A（推荐）**：用户目录 env 文件

```powershell
copy %USERPROFILE%\.cursor\figma-mcp.env.example %USERPROFILE%\.cursor\figma-mcp.env
# 编辑 figma-mcp.env，填入 FIGMA_API_KEY=figd_xxx
```

**方式 B**：在 Cursor MCP 配置的 `env.FIGMA_API_KEY` 中直接填写（勿提交到 Git）

## 3. 应用 MCP 配置

将 `devops/cursor-mcp.figma-developer.json` 中的 `figma-developer-mcp` 段合并进：

- 全局：`%USERPROFILE%\.cursor\mcp.json`（已自动合并时可跳过）
- 或项目：`txw/.cursor/mcp.json`（本地生效，目录已在 .gitignore）

## 4. 启用

1. **Ctrl+Shift+P** → **Reload Window**
2. **Cursor Settings → MCP**，确认 `figma-developer-mcp` 为绿色已连接
3. 在对话中粘贴 Figma 链接，例如：
   `https://www.figma.com/design/QVKV61TRu0gMc0waIo6o58/...?node-id=150479-2522`

## 工具说明

| 工具 | 用途 |
|------|------|
| `get_figma_data` | 获取节点布局、样式、文案等结构化数据 |
| `download_figma_images` | 下载设计稿中的图片资源 |

## 与官方 Figma MCP 的关系

| 服务 | 说明 |
|------|------|
| `figma`（https://mcp.figma.com/mcp） | 官方远程 MCP，View 席位约 6 次/月 |
| `figma-developer-mcp` | 本配置，走 API Token，适合高频 design-to-code |

两者可同时启用，按场景选用。