Figma MCP

🚀 Figma 圖文內容提取服務

本服務可高效提取和處理 Figma 文件中的文字與圖片內容，滿足多種開發場景需求。

🚀 快速開始

📦 安裝指南

通過 Smithery 安裝

npx -y @smithery/cli install @1yhy/Figma-Context-MCP --client claude

本地開發和打包

1. 克隆倉庫：git clone <倉庫地址>
2. 安裝依賴：pnpm install
3. 複製 .env.example 並重命名為 .env，填寫 Figma API 訪問令牌
4. 開發模式啟動：pnpm run dev
5. 構建項目：pnpm run build
6. 打包服務：pnpm run publish:local

打包後會在根目錄生成 .tgz 文件，例如 figma-mcp-server-1.0.0.tgz

本地安裝使用

方式一：從 NPM 安裝（推薦）

npm install -g @yhy2001/figma-mcp-server
figma-mcp --figma-api-key=<your-figma-api-key>

方式二：使用本地包安裝

npm install -g ./figma-mcp-server-1.0.0.tgz
figma-mcp --figma-api-key=<your-figma-api-key>

方式三：項目中使用

npm install @yhy2001/figma-mcp-server --save
# 在 package.json 中添加啟動腳本：
"start-figma-mcp": "figma-mcp --figma-api-key=<your-figma-api-key>"

命令行參數

• --version：顯示版本號
• --figma-api-key：必需的 Figma API 訪問令牌
• --port：服務運行端口（默認：3333）
• --stdio：以命令模式運行而非默認的 HTTP/SSE 模式
• --help：顯示幫助信息

📚 詳細文檔

與 AI 工具連接

配置文件使用示例

# MCP 客戶端配置：
{
  "mcpServers": {
    "Figma MCP": {
      "command": "npx",
      "args": ["figma-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}

# 本地運行時參考：
{
  "mcpServers": {
    "Figma MCP": {
      "url": "http://localhost:3333/sse",
      "env": {
        "API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

與 Cursor 連接步驟

1. 啟動服務：figma-mcp --figma-api-key=<your-figma-api-key>
2. 在 Cursor 設置 → 功能選項卡中添加 MCP 服務器地址 http://localhost:3333
3. 驗證連接成功後，在 Agent 模式下使用 Composer
4. 粘貼 Figma 文件鏈接並要求 Cursor 實現設計

提供的工具

get_figma_data

獲取 Figma 圖文內容：

• 輸入：Figma 文件 URL 或 ID
• 輸出：提取的文字和圖片列表
• 示例響應：

  {
    "text": ["歡迎使用 Figma 文本提取服務", ...],
    "images": ["https://storage.googleapis.com/...", ...]
  }
  

extract_figma_images

提取圖片：

figma-mcp extract-images --url <figma-file-url> --output ./images/

figma-to-markdown

轉換為 Markdown 格式：

figma-mcp convert-to-md --url <figma-file-url> --output README.md

示例輸出

假設處理文件 Figma 示例鏈接，提取結果可能如下：

# Figma 示例文檔

歡迎使用我們的服務！

## 重要信息
- **支持的格式**：文本、圖片、表格等
- **使用限制**：請遵守相關法律法規

![示例圖片](images/example.png)