Gravity Global Figma MCP

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

主要特点

• Figma 数据检索：使用 URL 或文件 ID 从 Figma 文件获取设计信息

• 数据优化：通过删除不必要的属性来减少 JSON 大小

• CSS 转换：自动将样式划分并组织成组（排版、颜色、布局……）

• CSS 类名生成：根据属性自动创建有意义的类名

• 设计令牌提取：从 Figma 设计中提取字体和颜色令牌

Related MCP server: Talk to Figma MCP

安装

1. 克隆存储库：

2. 安装依赖项：

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

4. 运行 MCP 服务器：

用法

在光标聊天中

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

1.从 Figma 检索数据

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

2. 提取设计令牌

结果：MCP 将返回一个 JSON 对象，其中包含从 Figma 设计中提取的字体和颜色标记。

响应示例：

3. 选项

• figma设计工具：

  • fullJson=true ：返回完整的未压缩的 JSON 数据

  • cleanData=true ：删除 HTML/CSS 渲染中不必要的属性

• figmaTokens 工具：

  • tokenTypes=["typography"] ：仅提取排版标记

  • tokenTypes=["colors"] ：仅提取颜色标记

  • tokenTypes=["typography", "colors"] ：提取两者（默认）

例子：

数据结构

转换后的 Figma 数据结构如下：

技术细节

Figma 数据检索

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

数据优化

优化过程包括以下步骤：

1. 删除不必要的属性

2. 将样式分成几组（排版、颜色、布局……）

3. 合并相似的样式以减少重复

4. 自动生成 CSS 类名

令牌提取

令牌提取过程：

1. 识别设计中使用的字体和颜色样式

2. 为每个令牌创建标准化的命名约定

3. 按类型（字体或颜色）对标记进行分组

4. 删除重复项并组织它们以便于与设计系统轻松集成

限制

• MCP 对返回数据的大小有限制；大文件将保存到figma_data目录

• 复数向量属性未完全保留

• 复杂的渐变和效果可能需要额外的处理

执照

MIT 许可证