Figma MCP Server

Figma MCP Server

site icon
2025.03.18 1
TypeScript设计工具AI 集成开发效率
Figma MCP Server 是一个模型上下文协议(MCP)服务器,用于连接 Figma 的 API,使 AI 工具和大型语言模型(LLMs)能够访问和操作 Figma 设计。该服务器提供了设计数据提取、设计系统分析、UI 内容管理、开发交接文档生成等功能,并支持与 Claude、Cursor 等 MCP 兼容客户端的无缝集成。
View on GitHub

Overview

基本能力

产品定位

Figma MCP Server 是一个连接 Figma API 的中间件,旨在为 AI 工具和 LLMs 提供对 Figma 设计的访问和操作能力。

核心功能

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

适用场景

  • 设计系统一致性分析
  • UI 文本提取和管理
  • 开发交接文档生成
  • AI 辅助设计工具集成

工具列表

工具 描述
get-file-info 获取 Figma 文件的基本信息
get-nodes 从 Figma 文件中获取特定节点
get-components 从 Figma 文件中获取组件信息
get-styles 从 Figma 文件中获取样式信息
get-comments 从 Figma 文件中获取评论
search-file 按类型、名称等在 Figma 文件中搜索元素
extract-text 从 Figma 文件中提取所有文本元素

常见问题解答

  • 如何获取 Figma 个人访问令牌? 从 Figma 账户设置中获取。
  • 支持哪些传输类型? 支持 stdiosse 两种传输类型。

使用教程

使用依赖

  • Node.js 16 或更高版本
  • 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

调试方式

  • 检查 .env 文件中的 FIGMA_API_TOKENAPI_KEY 是否已正确设置
  • 确保 Node.js 版本符合要求
  • 检查服务器是否成功启动并监听指定端口

许可证

None