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 许可证

Install Server

HTTP connection URL

security – no known vulnerabilities

license - not found

quality - confirmed to work

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

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

Related MCP Servers

Figma MCP Server
GLips
-
security
A
license
-
quality
Enables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
Last updated -
5
60,738
8,062
TypeScript
MIT License
Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
Last updated -
19
2,514
3,528
JavaScript
MIT License
Figma MCP Server
1yhy
-
security
A
license
-
quality
A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
Last updated -
124
6
TypeScript
MIT License
Cursor Talk to Figma MCP
paragdesai1
-
security
-
license
-
quality
Implements a Model Context Protocol integration between Cursor AI and Figma, allowing Cursor to programmatically read and modify Figma designs.
Last updated -
JavaScript
MIT License

View all related MCP servers

Gravity Global Figma MCP