Gravity Global Figma MCP

Gravity Global Figma MCP 是一个通过 Model Context Protocol (MCP) 将 Figma 与 Cursor 集成的工具，允许您从 Figma 中检索并优化设计数据以进行代码转换。

主要功能

• Figma 数据检索：使用 URL 或文件 ID 从 Figma 文件中获取设计信息
• 数据优化：通过移除不必要的属性来减少 JSON 大小
• CSS 转换：自动将样式分组（排版、颜色、布局等）
• CSS 类名生成：根据属性自动生成有意义的类名
• 设计令牌提取：从 Figma 设计中提取排版和颜色令牌

安装

1. 克隆仓库：

git clone <repository-url>

1. 安装依赖项：

npm install

1. 创建一个 .env 文件并添加您的 Figma API 令牌：

FIGMA_API_KEY=your_figma_api_token_here

1. 运行 MCP 服务器：

node index.js

使用方法

在 Cursor Chat 中

您可以通过 Cursor Chat 使用以下工具：

1. 从 Figma 检索数据

Get data from Figma URL https://www.figma.com/file/abc123/my-design?node-id=123-456

结果：MCP 将返回优化后的 Figma 数据。

2. 提取设计令牌

Extract typography and color tokens from Figma URL https://www.figma.com/file/abc123/my-design

结果：MCP 将返回一个包含从 Figma 设计中提取的排版和颜色令牌的 JSON 对象。

示例响应：

{
  "typography": {
    "opensans-600-32": {
      "fontFamily": "Open Sans",
      "fontSize": "32px",
      "fontWeight": 600,
      "lineHeight": "48px"
    },
    "avenirnext-400-16": {
      "fontFamily": "Avenir Next",
      "fontSize": "16px",
      "fontWeight": 400,
      "lineHeight": "24px"
    }
  },
  "colors": {
    "bg-ffffff": "#ffffff",
    "text-030e12": "#030e12"
  }
}

3. 选项

• figmaDesign 工具：

  • fullJson=true：返回完整的未压缩 JSON 数据
  • cleanData=true：移除用于 HTML/CSS 渲染的不必要的属性

• figmaTokens 工具：

  • tokenTypes=["typography"]：仅提取排版令牌
  • tokenTypes=["colors"]：仅提取颜色令牌
  • tokenTypes=["typography", "colors"]：同时提取两者（默认）

示例：

Extract only color tokens from Figma URL https://www.figma.com/file/abc123/my-design

数据结构

转换后的 Figma 数据具有以下结构：

{
  "nodes": {
    "nodeId": {
      "id": "nodeId",
      "name": "Node Name",
      "type": "FRAME",
      "fillStyleId": "style123",
      "layoutStyleId": "style456",
      "children": [...]
    }
  },
  "styles": {
    "style123": {
      "backgroundColor": "#ffffff",
      "opacity": 1,
      "categories": { "colors": "color1" }
    }
  },
  "optimizedStyles": {
    "typography": {...},
    "colors": {...},
    "layout": {...},
    "spacing": {...},
    "sizing": {...}
  },
  "classNames": {
    "style123": "bg-1",
    "style456": "flex-row-1"
  }
}

技术细节

Figma 数据检索

该工具使用 Figma REST API 来获取设计数据。它支持常规文件和新设计 URL 的链接。您可以使用 node-id 指定特定节点。

数据优化

优化过程包括以下步骤：

1. 移除不必要的属性
2. 将样式分组（排版、颜色、布局等）
3. 合并相似的样式以减少重复
4. 自动生成 CSS 类名

令牌提取

令牌提取过程：

1. 识别设计中使用的排版和颜色样式
2. 为每个令牌创建标准化的命名约定
3. 按类型（排版或颜色）对令牌进行分组
4. 删除重复项并组织它们以便轻松集成到设计系统中

限制

• MCP 对返回的数据大小有限制；大型文件将保存到 figma_data 目录中
• 复杂的矢量属性无法完全保留
• 复杂的渐变和效果可能需要额外处理

许可证

MIT 许可证