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
Installation
Klonen Sie das Repository:
Installieren Sie Abhängigkeiten:
Erstellen Sie eine
.env
Datei und fügen Sie Ihr Figma-API-Token hinzu:
Führen Sie den MCP-Server aus:
Verwendung
Im Cursor-Chat
Sie können die folgenden Tools über den Cursor-Chat verwenden:
1. Daten aus Figma abrufen
Ergebnis: Das MCP gibt optimierte Figma-Daten zurück.
2. Design-Token extrahieren
Ergebnis: Das MCP gibt ein JSON-Objekt zurück, das Typografie- und Farbtoken enthält, die aus dem Figma-Design extrahiert wurden.
Beispielantwort:
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:
Datenstruktur
Die konvertierten Figma-Daten haben die folgende Struktur:
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
Lizenz
MIT-Lizenz
remote-capable server
The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.
Ein Tool, das Figma über das Model Context Protocol mit Cursor integriert und es Benutzern ermöglicht, Designdaten aus Figma-Dateien abzurufen, zu optimieren und in strukturiertes CSS und Design-Token zu konvertieren.
Related MCP Servers
- -securityAlicense-qualityEnables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.Last updated -63,83911,245MIT License
- AsecurityAlicenseAqualityAn MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.Last updated -191,5425,467MIT License
- -securityAlicense-qualityA Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.Last updated -1015MIT License
- AsecurityAlicenseAqualityImplements a Model Context Protocol integration between Cursor AI and Figma, allowing Cursor to programmatically read and modify Figma designs.Last updated -331,542MIT License