51 lines
1.7 KiB
Markdown
51 lines
1.7 KiB
Markdown
# 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 |
|
||
|
||
两者可同时启用，按场景选用。
|