local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

Enables configuration of the MCP server using environment variables stored in a .env file, particularly for storing the Figma API token.
Converts Figma design elements into organized CSS styles, automatically divides styles into logical groups (typography, colors, layouts), and generates meaningful class names based on properties.
Retrieves and optimizes design data from Figma files, extracts design tokens (typography and colors), converts design elements to CSS, and generates CSS class names based on design properties.

Gravity Global Figma MCP

Gravity Global Figma MCP 是一个通过模型上下文协议 (MCP) 将 Figma 与 Cursor 集成的工具，可让您从 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 使用以下工具：

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. 选项

figma设计工具：
- 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 的 URL。您可以使用node-id指定特定节点。

数据优化

优化过程包括以下步骤：

删除不必要的属性
将样式分成几组（排版、颜色、布局……）
合并相似的样式以减少重复
自动生成 CSS 类名

令牌提取

令牌提取过程：

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

限制

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

执照

MIT 许可证

You must be authenticated.

A

security – no known vulnerabilities

F

license - not found

A

quality - confirmed to work

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