Figma MCP-Server

Ein Model Context Protocol (MCP)-Server, der eine Brücke zwischen Figma-Designs und React-Implementierungen schlägt. Dieser Server ermöglicht die pixelgenaue Konvertierung von Figma-Designs in React-Anwendungen, indem er Figma-Dateidaten verarbeitet und in einem React-freundlichen Format bereitstellt.

🚀 Funktionen

• Figma-API-Integration : Direkte Verbindung zur API von Figma für den Zugriff auf Designdateien

• React-Ready-Ausgabe : Verarbeitet Figma-Daten in ein React-kompatibles Format

• Stilverarbeitung : Konvertiert Figma-Stile in CSS/Styled-Components

• Asset Management : Verwaltet Bild-Assets und SVG-Komponenten

• Layoutverarbeitung : Konvertiert das automatische Figma-Layout in Flexbox

• Typsicherheit : Erstellt mit TypeScript für eine zuverlässige Typprüfung

Related MCP server: FigmaMind MCP Server

🛠️ Mitgelieferte Tools

1. get_file_content :

   • Holt und verarbeitet Figma-Dateiinhalte

   • Konvertiert Layout, Stile und Komponenten

   • Gibt die React-fähige Komponentenstruktur GXP1 zurück

2. get_node_images :

   • Ruft Bildressourcen von Figma ab

   • Unterstützt mehrere Formate (PNG, JPG, SVG)

   • Konfigurierbare Skalierungsoptionen GXP2

📦 Installation

Installation über Smithery

So installieren Sie Figma Design to React Converter für Claude Desktop automatisch über Smithery :

Manuelle Installation

1. Klonen Sie das Repository:

   git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp

2. Installieren Sie Abhängigkeiten:

   npm install

3. Konfigurieren Sie Ihr Figma-Zugriffstoken:

   cp .env.example .env # Add your Figma access token to .env

🎯 Cursor-IDE-Setup

1. Erstellen Sie die Datei .cursor/mcp.json in Ihrem Projektstamm:

   mkdir -p .cursor touch .cursor/mcp.json

2. Für Stdio-basierte Serverkonfiguration:

   { "mcpServers": { "figma": { "command": "node", "args": ["d:/<folder>>/figma-mcp/build/index.js"], "env": { "FIGMA_ACCESS_TOKEN": "your figma token" }, "disabled": false, "alwaysAllow": [], "protocol": "stdio" } }

}

🧩 Beispielprojekt

Im Verzeichnis raccoon-game finden Sie ein vollständiges Beispiel für die Verwendung dieses MCP-Servers zum Erstellen einer pixelgenauen React-Implementierung eines Figma-Designs.

🔄 Verarbeitungspipeline

1. Eingabe : Figma-Dateidaten über die offizielle API

2. Verarbeitung :

   • Stilkonvertierung (Farben, Typografie, Effekte)

   • Layouttransformation (absolut zu Flexbox)

   • Zuordnung der Komponentenhierarchie

   • Anlagenoptimierung

3. Ausgabe : React-fähige Komponentendaten

📝 Lizenz

MIT-Lizenz

🤝 Beitragen

Beiträge sind willkommen! Bitte lesen Sie unsere Richtlinien für Beiträge.

🙏 Danksagungen

• Figma API-Team für die umfassende API

• Model Context Protocol für die MCP-Spezifikation

Mit ❤️ erstellt von [Ihr Name]