AI导哈

Figma设计数据转换工具

Gravity Global Figma MCP是一款将Figma设计数据通过模型上下文协议(MCP)转换为优化代码的工具，支持设计数据检索、优化、CSS转换和设计令牌提取。

  • by nguyenlegravityglobal
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 nguyenlegravityglobal/figma-mcp

使用说明

重力全球图MCP

Gravity Global Figma MCP是一个通过模型上下文协议（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使用以下工具：

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=真：返回完整的未压缩JSON数据
    • cleanData=true：删除HTML/CSS渲染中不必要的属性

  • figmaTokens工具:

    • tokenTypes=[“排版”]：仅提取排版标记
    • tokenTypes=[“colors”]：仅提取颜色标记
    • tokenTypes=[“排版”，“颜色”]：提取两者（默认）

例子：

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.

数据优化

优化过程包括以下步骤：

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

令牌提取

令牌提取过程：

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

局限性

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

许可证

MIT许可证

相关 MCP