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 请求。