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

Klonen Sie das Repository:

git clone <repository-url>

Installieren Sie Abhängigkeiten:

npm install

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

FIGMA_API_KEY=your_figma_api_token_here

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:

Entfernen unnötiger Eigenschaften
Unterteilung der Stile in Gruppen (Typografie, Farben, Layout...)
Zusammenführen ähnlicher Stile zur Reduzierung von Duplikaten
Automatisches Generieren von CSS-Klassennamen

Token-Extraktion

Der Token-Extraktionsprozess:

Identifiziert die im Design verwendeten Typografie- und Farbstile
Erstellt standardisierte Namenskonventionen für jedes Token
Gruppiert Token nach Typ (Typografie oder Farben)
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