-
security-
license-
qualityConverts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
Last updated -
19
5
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
🛠️ Mitgelieferte Tools
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-mcpInstallieren Sie Abhängigkeiten:
npm installKonfigurieren Sie Ihr Figma-Zugriffstoken:
cp .env.example .env # Add your Figma access token to .env
🎯 Cursor-IDE-Setup
Erstellen Sie die Datei
.cursor/mcp.jsonin Ihrem Projektstamm:mkdir -p .cursor touch .cursor/mcp.jsonFü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]
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.
Eine Brücke zwischen Figma-Designs und React-Implementierungen, die eine pixelgenaue Konvertierung von Figma-Designs in React-Anwendungen ermöglicht, indem Figma-Dateidaten in ein React-freundliches Format verarbeitet werden.
Related MCP Servers
- -security-license-qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
- -security-license-qualityConverts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.Last updated -52MIT License
- -security-license-qualityEnables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.Last updated -