图层上下文-MCP

Name: 图层上下文-MCP
Author: 1yhy

作者：1yhy15 星标更新：2025-03-28

安装使用来源：spider==github.com

项目介绍

Figma MCP 服务器

该项目基于开源项目 Figma-Context-MCP，改进并优化了数据结构和转换逻辑。

英文版本 | 中文版本

该服务器基于模型上下文协议 (MCP)，允许您将 Figma 设计文件与Cursor、Windsurf 和Cline无缝集成到 AI 编码工具中。

当 AI 工具能够访问 Figma 设计数据时，它们可以更准确地生成符合设计要求的代码，这比传统的截图方法更为有效。

功能

将 Figma 设计数据转换成易于 AI 模型理解的格式
支持获取 Figma 文件、画板或组件的布局和样式信息
支持从 Figma 下载图像和图标资源
减少提供给模型的上下文量，提高 AI 回应的准确性和相关性

与原始版本的主要区别

设计草稿返回数据格式

{
  // 设计文件基本信息
  "name": "设计文件名称",
  "lastModified": "最后修改时间",
  "thumbnailUrl": "缩略图URL",

  // 节点数组，包含所有页面元素
  "nodes": [
    {
      // 节点基本信息
      "id": "节点ID，例如 1:156",
      "name": "节点名称",
      "type": "节点类型，如 FRAME, TEXT, RECTANGLE, GROUP 等",

      // 文本内容（仅文本节点有此属性）
      "text": "文本节点的内容",

      // CSS样式对象，包含节点的所有样式属性
      "cssStyles": {
        // 尺寸和位置
        "width": "100px",
        "height": "50px",
        "position": "absolute",
        "left": "10px",
        "top": "20px",

        // 文本样式（主要用于TEXT节点）
        "fontFamily": "Inter",
        "fontSize": "16px",
        "fontWeight": 500,
        "textAlign": "center",
        "lineHeight": "24px",
        "color": "#333333",

        // 背景和边框
        "backgroundColor": "#ffffff",
        "borderRadius": "8px",
        "border": "1px solid #eeeeee",

        // 特效
        "boxShadow": "0px 4px 8px rgba(0, 0, 0, 0.1)",

        // 其他CSS属性...
      },

      // 填充信息（渐变、图片等）
      "fills": [
        {
          "type": "SOLID",
          "color": "#ff0000",
          "opacity": 0.5
        }
      ],

      // 导出信息（用于图片和SVG节点）
      "exportInfo": {
        "type": "IMAGE",
        "format": "PNG",
        "nodeId": "节点ID",
        "fileName": "suggested-file-name.png"
      },

      // 子节点
      "children": [
        // 递归的节点对象...
      ]
    }
  ]
}

数据结构描述

SimplifiedDesign

设计文件的顶级结构，包括基本信息和所有可见节点。

SimplifiedNode

代表设计中的一个元素，它可以是画板、框架、文本或形状。主要字段包括：

id: 节点唯一标识符
name: 节点在 Figma 中的名称
type: 节点类型（FRAME, TEXT, RECTANGLE 等）
text: 文本内容（仅文本节点可用）
cssStyles: CSS 样式对象，包含所有样式属性
fills: 填充信息数组
exportInfo: 图像和 SVG 节点的导出信息
children: 子节点数组

CSSStyle

包含转换为 Web 标准的 CSS 样式属性，如字体、颜色、边框、阴影等。

ExportInfo

图像和 SVG 节点的导出信息，包括：

type: 导出类型（IMAGE 或 IMAGE GROUP）
format: 推荐的导出格式（PNG, JPG, SVG）
nodeId: 用于 API 调用的节点 ID
fileName: 建议的文件名

安装和使用

通过 Smithery 安装

要通过 Smithery 自动安装 Figma MCP 服务器到 Claude Desktop：

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

本地开发和打包

克隆此仓库
安装依赖：pnpm install
复制 .env.example 为 .env 并填写您的 Figma API 访问令牌
本地开发：pnpm run dev
构建项目：pnpm run build
本地打包：pnpm run publish:local

打包后，将在项目的根目录生成一个 .tgz 文件，例如 figma-mcp-server-1.0.0.tgz

本地安装以供使用

有两种方式使用此服务：

方法 1：从 NPM 安装（推荐）

# 全局安装
npm install -g @yhy2001/figma-mcp-server

# 启动服务
figma-mcp --figma-api-key=<your-figma-api-key>

方法 2：从本地包安装

# 全局安装本地包
npm install -g ./figma-mcp-server-1.0.0.tgz

# 启动服务
figma-mcp --figma-api-key=<your-figma-api-key>

方法 3：在项目中使用

# 在项目中安装
npm install @yhy2001/figma-mcp-server --save

# 在 package.json 的 scripts 中添加
# "start-figma-mcp": "figma-mcp --figma-api-key=<your-figma-api-key>"

# 或者直接运行
npx figma-mcp --figma-api-key=<your-figma-api-key>

参数

--version: 显示版本号
--figma-api-key: 您的 Figma API 访问令牌（必需）
--port: 服务器运行的端口（默认：3333）
--stdio: 以命令模式运行服务器而不是默认的 HTTP/SSE 模式
--help: 显示帮助菜单

连接到 AI 工具

在配置文件中使用

许多工具如 cursor、Windsurf 和 Claude Desktop 使用配置文件启动 MCP 服务器。您可以在配置文件中添加以下内容：

# MCP Client 使用
{
  "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

启动服务器：figma-mcp --figma-api-key=<your-figma-api-key>
在 cursor 的设置 → 功能标签页中连接到 MCP 服务器：http://localhost:3333
确认成功连接后，在代理模式下使用 Composer
粘贴 Figma 文件链接，并请求 Cursor 实现设计

可用工具

服务器提供了以下 MCP 工具：

get_figma_data

从 Figma 文件或特定节点检索信息。

参数

fileKey: Figma 文件键
nodeId: 节点 ID（强烈建议）
depth: 节点树遍历深度

download_figma_images

从 Figma 文件下载图像和图标资源。

参数

fileKey: 包含节点的 Figma 文件键
nodes: 要获取的图像节点数组
localPath: 项目中存储图像的目录路径