Figma MCP Server

Figma MCP 服务器

连接到 Figma 的 API 的模型上下文协议 (MCP) 服务器，允许 AI 工具和 LLM 访问和使用您的 Figma 设计。

特征

• 设计数据提取：从 Figma 设计中提取组件、样式和文本
• 设计系统分析：分析设计系统的一致性和模式
• UI 内容管理：从设计中提取并组织所有 UI 副本
• 开发交接：为开发人员生成全面的文档
• 无缝 AI 集成：将您的设计连接到 Claude、Cursor 和其他兼容 MCP 的客户端等 AI 工具

入门

先决条件

• Node.js 16 或更高版本
• Figma 个人访问令牌（从您的 Figma 帐户设置中获取）

安装

1. 克隆存储库：
   git clone https://github.com/yourusername/figma-mcp-server.git cd figma-mcp-server
2. 安装依赖项：
   npm install
3. 在项目根目录中创建一个.env文件：
   FIGMA_API_TOKEN=your_figma_personal_access_token API_KEY=your_secure_api_key TRANSPORT_TYPE=stdio
4. 构建服务器：
   npm run build
5. 启动服务器：
   npm start

连接到客户端

克劳德桌面版

1. 打开或创建 Claude for Desktop 配置文件：
   • macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
   • Windows： %APPDATA%\Claude\claude_desktop_config.json
2. 添加以下配置：
   { "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 桌面版

光标

全局配置

创建或编辑 Cursor 的 MCP 配置文件：

• macOS： ~/Library/Application Support/Cursor/mcp.json
• Windows： %APPDATA%\Cursor\mcp.json

项目特定配置

1. 在项目根目录中创建一个.cursor目录：
   mkdir -p .cursor
2. 在该目录中创建一个mcp.json文件：
   { "mcpServers": { "figma-mcp": { "url": "http://localhost:3000/sse", "env": { "API_KEY": "your_secure_api_key" } } } }

可用工具

可用提示

• analyze-design-system - 分析设计系统组件和样式的一致性
• extract-ui-copy - 从设计中提取并组织所有 UI 副本
• generate-dev-handoff - 根据设计生成开发交接文档

使用示例

与 Claude 一起使用：

与游标一起使用：

环境变量

建筑学

此 MCP 服务器：

1. 使用您的个人访问令牌连接到 Figma API
2. 遵循模型上下文协议公开标准化接口
3. 提供 LLM 可以用来与 Figma 设计进行交互的工具、资源和提示
4. 支持 stdio 传输（本地连接）和 SSE 传输（远程连接）

贡献

欢迎贡献代码！欢迎提交 Pull 请求。