🚓Figma API 密钥获取及MCP配置

🚀简介

Figma API密钥获取并配置MCP（Model Context Protocol）。

🚨Figma API密钥获取

🛴准备工作

在开始获取Figma API密钥之前，请确保拥有：

• 一个有效的Figma账户（注册于https://www.figma.com/）
• 管理员权限（如果需要访问团队或企业资源）

🚈详细获取步骤

1. 登录Figma账户
   打开Figma网站并登录账户。点击右上角的个人资料图标，从下拉菜单中选择"Settings"（设置）。

2. 进入API令牌管理
   在设置页面中，找到左侧导航栏的"Personal Access Tokens"（个人访问令牌）选项卡并点击进入。

3. 创建新令牌
   点击"Create a new personal access token"（创建新的个人访问令牌）按钮。系统会提示你输入令牌的名称/描述，建议使用描述性名称（如"Cursor AI集成"或"设计系统同步"），以便后续管理。

4. 设置权限范围
   根据使用场景，选择适当的权限范围。Figma API支持多种权限，包括：

   • file:read - 读取文件内容
   • file:write - 写入文件更改
   • team:read - 读取团队信息
   • plugin:read - 读取插件数据

5. 生成并安全存储令牌
   点击"Create token"（创建令牌）按钮，系统将生成一个唯一的API密钥。

重要提示：此密钥只显示一次，请立即将其复制并安全存储。

🚁Figma MCP服务器配置

🚦MCP服务器选择

目前有多个Figma MCP服务器实现可供选择，以下是两个主流选项：

🚢选项一：Framelink（Figma MCP Server）

Framelink是一个开源项目，专门为Figma设计的MCP服务器。其主要特点包括：

• 通过Figma API获取设计数据，简化并翻译响应
• 减少提供给模型的信息量，提高AI的准确性和响应的相关性
• 支持批量下载Figma文件中使用的SVG和PNG图像

🚤选项二：Spider Design MCP

Spider Design MCP是一个智能路由器，可以根据URL自动选择使用MasterGo MCP或Figma MCP。它的优势在于：

• 自动检测设计文件来源（Figma或MasterGo）
• 提供统一接口，简化多平台管理
• 支持调试模式，便于排查问题

🚗安装与配置方法

🚲使用NPM直接安装运行

# 安装Framelink MCP服务器
npx figma-developer-mcp --figma-api-key=<你的Figma API密钥>

# 或者安装Spider Design MCP
npm install -g spider-design-mcp

🚌环境变量配置

创建.env文件并添加你的Figma API密钥：

FIGMA_API_KEY=你的Figma_API_密钥
PORT=3333  # 可选，默认端口3333

🛫Cursor配置

Cursor配置Figma MCP后，可以直接在Cursor中查询Figma设计数据，实现设计到代码的无缝转换。

以下是配置步骤：

1. 打开Cursor设置
   在Cursor中，打开设置界面（快捷键Ctrl+,或Cmd+,）。

2. 定位MCP配置
   在设置中搜索"MCP"或手动定位到MCP配置部分。

3. 添加Figma MCP服务器
   根据选择的MCP服务器，添加相应的配置：

   对于Framelink MCP：

   {
     "mcpServers": {
       "Framelink Figma MCP": {
         "command": "npx",
         "args": [
           "-y",
           "figma-developer-mcp",
           "--figma-api-key=YOUR-KEY",
           "--stdio"
         ]
       }
     }
   }
   

   对于Spider Design MCP：

   {
     "mcpServers": {
       "Spider Design MCP": {
         "command": "npx",
         "args": [
           "-y",
           "spider-design-mcp",
           "--figma-api-key=YOUR_FIGMA_KEY",
           "--token=YOUR_MASTERGO_TOKEN"
         ]
       }
     }
   }
   

4. 验证连接
   保存配置并重启Cursor。然后，可以尝试通过Composer面板拖放Figma文件链接，并询问Cursor关于该设计的问题，以验证连接是否成功。

🏢其他AI工具配置

除了Cursor，Figma MCP服务器也支持其他AI编码工具：

🚐配置Windsurf

Windsurf的配置与Cursor类似，在设置文件中添加MCP服务器配置即可。

⛵配置Cline

Cline同样基于MCP协议，可以在其配置文件中添加Figma MCP服务器。

Figma MCP相当于在设计与开发之间架起了一座高效的桥梁。这不仅提升了个人工作效率，更促进了跨职能团队的协作质量。在AI技术快速发展的今天，这类技能将变得越来越重要。

---

结束