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
get_file_content :- Holt und verarbeitet Figma-Dateiinhalte
- Konvertiert Layout, Stile und Komponenten
- Gibt die React-fähige Komponentenstruktur GXP1 zurück
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 :
npx -y @smithery/cli install @sanjeev23oct/figma-mcp --client claude
Manuelle Installation
- Klonen Sie das Repository:
git clone https://github.com/yourusername/figma-mcp.git
cd figma-mcp
- Installieren Sie Abhängigkeiten:
- Konfigurieren Sie Ihr Figma-Zugriffstoken:
cp .env.example .env
# Add your Figma access token to .env
🎯 Cursor-IDE-Setup
- Erstellen Sie die Datei
.cursor/mcp.json in Ihrem Projektstamm:mkdir -p .cursor
touch .cursor/mcp.json
- 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"
}
}
}
## 💻 Usage
1. Build the server:
```bash
npm run build
```
2. Configure MCP settings based on your IDE:
- For VS Code (global settings):
```json
// In settings.json
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["path/to/figma-mcp/build/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "your-token-here"
}
}
}
}
```
- For Cursor IDE:
Use the `.cursor/mcp.json` configuration as described in the "Cursor IDE Setup" section above.
This configuration will take precedence over VS Code settings when using Cursor IDE.
3. Use the MCP tools in your application:
```typescript
// Example: Fetch processed Figma content
const result = await useMcpTool("figma", "get_file_content", {
fileKey: "your-figma-file-key"
});
🧩 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
- Eingabe : Figma-Dateidaten über die offizielle API
- Verarbeitung :
- Stilkonvertierung (Farben, Typografie, Effekte)
- Layouttransformation (absolut zu Flexbox)
- Zuordnung der Komponentenhierarchie
- Anlagenoptimierung
- 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]