Gravity Global Figma MCP

Gravity Global Figma MCP ist ein Tool, das Figma über das Model Context Protocol (MCP) mit Cursor integriert und es Ihnen ermöglicht, Designdaten aus Figma für die Codekonvertierung abzurufen und zu optimieren.

Hauptmerkmale

• Figma-Datenabruf : Holen Sie Designinformationen aus Figma-Dateien mithilfe von URLs oder Datei-IDs

• Datenoptimierung : Reduzieren Sie die JSON-Größe, indem Sie unnötige Eigenschaften entfernen

• CSS-Konvertierung : Stile automatisch in Gruppen unterteilen und organisieren (Typografie, Farben, Layouts usw.)

• Generierung von CSS-Klassennamen : Automatisches Erstellen aussagekräftiger Klassennamen basierend auf Eigenschaften

• Extraktion von Design-Tokens : Extrahieren Sie Typografie- und Farb-Token aus Figma-Designs

Related MCP server: Talk to Figma MCP

Installation

1. Klonen Sie das Repository:

git clone <repository-url>

2. Installieren Sie Abhängigkeiten:

npm install

3. Erstellen Sie eine .env Datei und fügen Sie Ihr Figma-API-Token hinzu:

FIGMA_API_KEY=your_figma_api_token_here

4. Führen Sie den MCP-Server aus:

node index.js

Verwendung

Im Cursor-Chat

Sie können die folgenden Tools über den Cursor-Chat verwenden:

1. Daten aus Figma abrufen

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

Ergebnis: Das MCP gibt optimierte Figma-Daten zurück.

2. Design-Token extrahieren

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

Ergebnis: Das MCP gibt ein JSON-Objekt zurück, das Typografie- und Farbtoken enthält, die aus dem Figma-Design extrahiert wurden.

Beispielantwort:

{
  "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. Optionen

• figmaDesign-Tool :

  • fullJson=true : Gibt vollständige unkomprimierte JSON-Daten zurück

  • cleanData=true : Entfernt unnötige Eigenschaften für die HTML/CSS-Wiedergabe

• figmaTokens-Tool :

  • tokenTypes=["typography"] : Nur Typografie-Token extrahieren

  • tokenTypes=["colors"] : Nur Farbtoken extrahieren

  • tokenTypes=["typography", "colors"] : Beide extrahieren (Standard)

Beispiel:

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

Datenstruktur

Die konvertierten Figma-Daten haben die folgende Struktur:

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

Technische Details

Figma-Datenabruf

Das Tool nutzt die Figma REST API zum Abrufen von Designdaten. Es unterstützt sowohl URLs aus regulären Dateien als auch aus neuen Design-URLs. Sie können einen bestimmten Knoten mit node-id angeben.

Datenoptimierung

Der Optimierungsprozess umfasst die folgenden Schritte:

1. Entfernen unnötiger Eigenschaften

2. Unterteilung der Stile in Gruppen (Typografie, Farben, Layout...)

3. Zusammenführen ähnlicher Stile zur Reduzierung von Duplikaten

4. Automatisches Generieren von CSS-Klassennamen

Token-Extraktion

Der Token-Extraktionsprozess:

1. Identifiziert die im Design verwendeten Typografie- und Farbstile

2. Erstellt standardisierte Namenskonventionen für jedes Token

3. Gruppiert Token nach Typ (Typografie oder Farben)

4. Entfernt Duplikate und organisiert sie für eine einfache Integration in Designsysteme

Einschränkungen

• MCP unterliegt Einschränkungen hinsichtlich der Größe der zurückgegebenen Daten. Große Dateien werden im Verzeichnis figma_data gespeichert.

• Komplexe Vektoreigenschaften bleiben nicht vollständig erhalten

• Komplexe Farbverläufe und Effekte können zusätzliche Verarbeitung erfordern

Lizenz

MIT-Lizenz