AI导哈

Figma设计协议服务器

一个连接Figma API的模型上下文协议服务器，允许AI工具和LLMs访问和处理Figma设计。

  • by mohammeduvaiz
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 mohammeduvaiz/figma-mcp-server

使用说明

Figma MCP服务器

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

特性

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

入门指南

先决条件

  • 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

连接到客户

Claude桌面版

  1. 打开或创建Claude for Desktop配置文件：

    • macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
    • 窗户： %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
  • 窗户： %APPDATA%\Cursor\mcp.json
{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "your_secure_api_key"
      }
    }
  }
}

项目特定配置

  1. 创建一个 .cursor 项目根目录中的目录：

    mkdir -p .cursor

  2. 创建一个 mcp.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 -根据设计生成开发交接文档

使用示例

与克劳德一起使用：

Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.

使用光标：

Generate React components for the buttons from my Figma file with key abc123, using 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传输（远程连接）

贡献

欢迎投稿！请随时提交拉取请求。

相关 MCP