MCP 服务器

Gravity Global Figma MCP

一个通过模型上下文协议（Model Context Protocol）将 Figma 与 Cursor 集成的工具，允许用户从 Figma 文件中检索、优化和转换设计数据为结构化的 CSS 和设计令牌。

README

Gravity Global Figma MCP

Gravity Global Figma MCP 是一个将 Figma 与 Cursor 通过模型上下文协议 (MCP) 集成的工具，允许您从 Figma 检索和优化设计数据以进行代码转换。

主要特性

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

安装

克隆仓库:

git clone <repository-url>

安装依赖:

npm install

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

FIGMA_API_KEY=your_figma_api_token_here

运行 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 将返回一个 JSON 对象，其中包含从 Figma 设计中提取的排版和颜色令牌。

示例响应：

{
  "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 tool:
- fullJson=true: 返回完整的未压缩 JSON 数据
- cleanData=true: 删除 HTML/CSS 渲染不需要的属性
figmaTokens tool:
- 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"
  }
}