🚀 重力全球 Figma MCP

重力全球 Figma MCP 是一款强大的工具，它将 Figma 与 Cursor 集成在一起。借助模型上下文协议（MCP），该工具能够实现数据检索和优化，还支持将设计文件转换为代码，极大地提升了设计到开发的工作效率。

✨ 主要特性

• Figma 数据获取：可以通过 URL 或文件 ID 轻松获取 Figma 文件中的设计信息。
• 数据优化：有效减少 JSON 大小，去除不必要的属性，让数据更加简洁。
• CSS 转换：自动对样式进行划分和整理，涵盖排版、颜色、布局等方面。
• CSS 类名生成：依据属性自动生成有意义的类名，方便开发使用。
• 设计令牌提取：能够从 Figma 设计中精准提取排版和颜色令牌。

📦 安装指南

1. 克隆仓库：

git clone <repository-url>

2. 安装依赖：

npm install

3. 创建 .env 文件并添加 Figma API 令牌：

FIGMA_API_KEY=your_figma_api_token_here

4. 启动 MCP 服务器：

node index.js

💻 使用示例

基础用法

在 Cursor 聊天中使用

您可以通过以下命令在 Cursor Chat 中使用工具：

• 从 Figma 获取数据

Get data from Figma URL https://www.figma.com/file/abc123/my-design?node-id=123-456

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

• 提取设计令牌

Extract typography and color tokens from Figma URL https://www.figma.com/file/abc123/my-design

结果：MCP 返回包含排版和颜色令牌的 JSON 对象。 示例响应：

{
  "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"
  }
}

高级用法

选项

• figmaDesign 工具：
  • 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": "节点名称",
      "type": "FRAME",
      "fillStyleId": "style123",
      "layoutStyleId": "style456",
      "children": [...]
    }
  },
  "styles": {
    "style123": {
      "backgroundColor": "#ffffff",
      "opacity": 1,
      "categories": { "colors": "color1" }
    }
  },
  "optimizedStyles": {
    "typography": {...},
    "colors": {...},
    "layout": {...},
    "spacing": {...},
    "sizing": {...}
  },
  "classNames": {
    "style123": "类名",
    "style456": "另一个类名"
  }
}

📄 许可证

MIT License