txw/devops/figma-developer-mcp.md

1.7 KiB
Raw Blame History

figma-developer-mcpFramelink配置说明

使用 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 文件

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+PReload 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 的关系

服务 说明
figmahttps://mcp.figma.com/mcp 官方远程 MCPView 席位约 6 次/月
figma-developer-mcp 本配置,走 API Token适合高频 design-to-code

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