Skip to main content
Glama
Sign In
deenesjakoruzh

Figma MCP Server

by sanjeev23oct
npmGitHub
TypeScript
1,284
1
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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

  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]

This server cannot be installed

-
security - not tested
F
license - not found
-
quality - not tested

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.

  1. 🚀 Funktionen
    1. 🛠️ Mitgelieferte Tools
      1. 📦 Installation
        1. Installation über Smithery
        2. Manuelle Installation
      2. 🎯 Cursor-IDE-Setup
        1. 🧩 Beispielprojekt
          1. 🔄 Verarbeitungspipeline
            1. 📝 Lizenz
              1. 🤝 Beitragen
                1. 🙏 Danksagungen

                  Related MCP Servers

                  • mcp-figma

                    thirdstrandstudio
                    -
                    security
                    A
                    license
                    -
                    quality
                    Figma MCP with full API functionality
                    Last updated -
                    54
                    16
                    TypeScript
                    MIT License
                    • Apple

                  • Figma to React Native MCP

                    kailashAppDev
                    -
                    security
                    F
                    license
                    -
                    quality
                    Converts 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 -
                    111
                    1
                    TypeScript

                  • FigmaMind MCP Server

                    joao-loker
                    -
                    security
                    F
                    license
                    -
                    quality
                    Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
                    Last updated -
                    TypeScript

                  • MCP Figma to React Converter

                    StudentOfJS
                    -
                    security
                    A
                    license
                    -
                    quality
                    Converts 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 -
                    14
                    TypeScript
                    MIT License

                  View all related MCP servers

                  Appeared in Searches

                  New MCP Servers

                  MCP directory API

                  We provide all the information about MCP servers via our MCP API.

                  curl -X GET 'https://glama.ai/api/mcp/v1/servers/sanjeev23oct/figma-mcp'

                  If you have feedback or need assistance with the MCP directory API, please join our Discord server