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: MCP Figma to React Converter

🛠️ 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 :

npx -y @smithery/cli install @sanjeev23oct/figma-mcp --client claude

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"
      }
    }

}

## 💻 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

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]