Figma MCP Server

Geben Sie Cursor und anderen KI-gestützten Codierungstools mit diesem Model Context Protocol- Server Zugriff auf Ihre Figma-Dateien.

Wenn Cursor Zugriff auf die Figma-Designdaten hat, ist er bei der präzisen Erstellung von One-Shot-Designs weitaus besser als bei alternativen Ansätzen wie dem Einfügen von Screenshots.

Demo

Sehen Sie sich eine Demo zum Erstellen einer Benutzeroberfläche in Cursor mit Figma-Designdaten an

Related MCP server: Figma MCP Server

So funktioniert es

1. Öffnen Sie den Chat Ihrer IDE (z. B. Agentenmodus im Cursor).

2. Fügen Sie einen Link zu einer Figma-Datei, einem Figma-Frame oder einer Figma-Gruppe ein.

3. Bitten Sie Cursor, etwas mit der Figma-Datei zu tun, z. B. das Design zu implementieren.

4. Cursor ruft die relevanten Metadaten von Figma ab und verwendet sie zum Schreiben Ihres Codes.

Dieser MCP-Server ist speziell für die Verwendung mit Cursor konzipiert. Bevor er mit Kontext aus der Figma-API antwortet, vereinfacht und übersetzt er die Antwort, sodass dem Modell nur die relevantesten Layout- und Stilinformationen bereitgestellt werden.

Durch die Reduzierung der dem Modell bereitgestellten Kontextmenge wird die KI präziser und die Antworten relevanter.

Erste Schritte

Viele Code-Editoren und andere KI-Clients verwenden eine Konfigurationsdatei zur Verwaltung von MCP-Servern.

Der figma-developer-mcp Server kann konfiguriert werden, indem Sie Ihrer Konfigurationsdatei Folgendes hinzufügen.

HINWEIS: Sie müssen ein Figma-Zugriffstoken erstellen, um diesen Server nutzen zu können. Anweisungen zum Erstellen eines Figma-API-Zugriffstokens finden Sie hier .

MacOS / Linux

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Oder Sie können FIGMA_API_KEY und PORT im env festlegen.

Wenn Sie weitere Informationen zum Konfigurieren des Framelink Figma MCP-Servers benötigen, lesen Sie die Framelink-Dokumente .

Sternengeschichte

Mehr erfahren

Der Framelink Figma MCP-Server ist einfach, aber leistungsstark. Holen Sie das Beste aus ihm heraus und erfahren Sie mehr auf der Framelink- Website.

Sponsoren

🥇 Gold-Sponsoren

🥈 Silber-Sponsoren

🥉 Bronze-Sponsoren

😻 Kleinere Unterstützer