当前位置：首页 > news >正文

Figma API 密钥获取及MCP配置

news 2026/5/12 19:03:09

🚀简介

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

🚨Figma API密钥获取

🛴准备工作

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

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

🚈详细获取步骤

登录Figma账户
打开Figma网站并登录账户。点击右上角的个人资料图标，从下拉菜单中选择"Settings"（设置）。
进入API令牌管理
在设置页面中，找到左侧导航栏的"Personal Access Tokens"（个人访问令牌）选项卡并点击进入。
创建新令牌
点击"Create a new personal access token"（创建新的个人访问令牌）按钮。系统会提示你输入令牌的名称/描述，建议使用描述性名称（如"Cursor AI集成"或"设计系统同步"），以便后续管理。
设置权限范围
根据使用场景，选择适当的权限范围。Figma API支持多种权限，包括：
- file:read - 读取文件内容
- file:write - 写入文件更改
- team:read - 读取团队信息
- plugin:read - 读取插件数据
生成并安全存储令牌
点击"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设计数据，实现设计到代码的无缝转换。

以下是配置步骤：

打开Cursor设置
在Cursor中，打开设置界面（快捷键Ctrl+,或Cmd+,）。
定位MCP配置
在设置中搜索"MCP"或手动定位到MCP配置部分。

添加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"]}}
}