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)