内容
# Figma MCP Server
一个连接到 Figma API 的模型上下文协议 (MCP) 服务器，允许 AI 工具和 LLM（大语言模型）访问和处理您的 Figma 设计。
## 特性
- **设计数据提取**：从您的 Figma 设计中提取组件、样式和文本
- **设计系统分析**：分析设计系统的一致性和模式
- **UI 内容管理**：提取并组织设计中的所有 UI 文本
- **开发交接**：为开发人员生成全面的文档
- **无缝 AI 集成**：将您的设计连接到像 Claude、Cursor 和其他兼容 MCP 的客户端
## 开始使用
### 先决条件
- Node.js 16 或更高版本
- Figma 个人访问令牌（从您的 Figma 账户设置中获取）
### 安装
1. 克隆代码库：
```bash
git clone https://github.com/yourusername/figma-mcp-server.git
cd figma-mcp-server
```
2. 安装依赖：
```bash
npm install
```
3. 在项目根目录创建一个 `.env` 文件：
```
FIGMA_API_TOKEN=your_figma_personal_access_token
API_KEY=your_secure_api_key
TRANSPORT_TYPE=stdio
```
4. 构建服务器：
```bash
npm run build
```
5. 启动服务器：
```bash
npm start
```
## 连接到客户端
### Claude for Desktop
1. 打开或创建 Claude for Desktop 配置文件：
- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
- Windows: `%APPDATA%\Claude\claude_desktop_config.json`
2. 添加以下配置：
```json
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["/absolute/path/to/figma-mcp-server/build/index.js"],
"env": {
"FIGMA_API_TOKEN": "your_figma_personal_access_token",
"TRANSPORT_TYPE": "stdio"
}
}
}
}
```
3. 重启 Claude for Desktop
### Cursor
#### 全局配置
创建或编辑 Cursor 的 MCP 配置文件：
- macOS: `~/Library/Application Support/Cursor/mcp.json`
- Windows: `%APPDATA%\Cursor\mcp.json`
```json
{
"mcpServers": {
"figma-mcp": {
"url": "http://localhost:3000/sse",
"env": {
"API_KEY": "your_secure_api_key"
}
}
}
}
```
#### 项目特定配置
1. 在项目根目录创建一个 `.cursor` 目录：
```bash
mkdir -p .cursor
```
2. 在该目录中创建一个 `mcp.json` 文件：
```json
{
"mcpServers": {
"figma-mcp": {
"url": "http://localhost:3000/sse",
"env": {
"API_KEY": "your_secure_api_key"
}
}
}
}
```
## 可用工具
| 工具 | 描述 |
|------|-------------|
| `get-file-info` | 获取 Figma 文件的基本信息 |
| `get-nodes` | 从 Figma 文件中获取特定节点 |
| `get-components` | 从 Figma 文件中获取组件信息 |
| `get-styles` | 从 Figma 文件中获取样式信息 |
| `get-comments` | 从 Figma 文件中获取评论 |
| `search-file` | 按类型、名称等在 Figma 文件中搜索元素 |
| `extract-text` | 从 Figma 文件中提取所有文本元素 |
## 可用提示
- `analyze-design-system` - 分析设计系统组件和样式的一致性
- `extract-ui-copy` - 提取并组织设计中的所有 UI 文本
- `generate-dev-handoff` - 根据设计生成开发交接文档
## 使用示例
与 Claude 一起使用：
```
你能分析我 Figma 文件中关键为 abc123 的设计系统吗？查看颜色使用和排版的一致性。
```
与 Cursor 一起使用：
```
为我 Figma 文件中关键为 abc123 的按钮生成 React 组件，使用 tailwind CSS。
```
## 环境变量
| 变量 | 描述 | 默认值 |
|----------|-------------|---------|
| `FIGMA_API_TOKEN` | 您的 Figma 个人访问令牌 | （必填） |
| `API_KEY` | API 认证的安全密钥 | （必填） |
| `TRANSPORT_TYPE` | 传输方式（`stdio` 或 `sse`） | `stdio` |
| `PORT` | SSE 传输的端口 | `3000` |
## 架构
该 MCP 服务器：
1. 使用您的个人访问令牌连接到 Figma API
2. 提供遵循模型上下文协议的标准化接口
3. 提供工具、资源和提示，LLM 可以用来与您的 Figma 设计进行交互
4. 支持 stdio 传输（本地连接）和 SSE 传输（远程连接）
## 贡献
欢迎贡献！请随时提交 Pull Request。
MCP 市场