Leitfaden zum Figma MCP-Server

Der Figma-MCP-Server hilft Entwickler*innen, Designs schnell und präzise zu erkunden und umzusetzen:

• Hole dir den Designkontext und Code aus deinen Figma-Designs, FigJam- und Make-Dateien
• Erfasse die Live-UI als Designebenen und bringe die vom Code gerenderten Schnittstellen in Figma Design-Dateien
• Verbessere deine Arbeitsweise mit Designkomponenten und Code Connect

Die Tools des MCP-Servers von Figma bringen zusätzlichen Kontext von Figma in deinen Workflow, sodass dein Code nicht nur zu deinen bestehenden Systemen, sondern auch zu deinem Design passt.

MCP-Server sind Teil einer standardisierten Benutzeroberfläche, über die KI-Agenten mithilfe des Model Context Protocol mit Datenquellen interagieren können.

Sieh dir unsere Figma MCP-Collection an, um mehr über den MCP-Server zu erfahren und Figma deinen Workflow zu integrieren →

Bei aktiviertem Server kannst du:

• Erzeuge Designs aus der Live-UI der Web-Apps und Webseiten

  Verwandel die Live-UI aus dem Browser (Production, Staging oder localhost) in zu bearbeitende Designebenen in Figma. Sende Seiten, Elemente oder ganze Flows zur Erkundung, Ausrichtung und Verfeinerung an Figma Design.

  Hinweis: Diese Funktion erfordert den Remote-Figma-MCP-Server und wird derzeit nur für Claude Code, Codex von OpenAI und VS-Code unterstützt.

  Dieses Feature wird kontinuierlich verbessert. Solltest du auf Probleme stoßen, kannst du diese mit Fig, unserem Support-Chatbot melden oder den Support per E-Mail kontaktieren (kostenpflichtige Abos).

  Erfahre mehr über die Generierung von Designs aus den Benutzeroberflächen

• Code aus ausgewählten Frames generieren

  Wähle einen Figma Frame und wandle ihn in Code um. Ideal für Teams, die neue Flüsse erstellen oder App-Funktionen weiterentwickeln.

• Designkontext extrahieren

  Ziehe Variablen, Komponenten und Layoutdaten direkt in deine IDE. Diese Option ist vor allem für Designsysteme und komponentenbasierte Workflows nützlich.

• FigJam-Ressourcen abrufen

  Greife auf Inhalte aus deinen FigJam-Diagrammen zu und verwenden sie in deinem Workflow zur Code-Generierung. Integriere frühzeitige Ideen, Flows oder Architekturkarten direkt in die Entwicklung.

• Make-Ressourcen abrufen

  Erfasse Code-Ressourcen aus Make-Dateien und stelle sie dem LLM als Kontext zur Verfügung. Dies kann beim Übergang vom Prototyp zu einer Produktionsanwendung hilfreich sein.

• Halte deine Designsystem-Komponenten mit Code Connect konsistent

  Steigere die Ausgabequalität durch die Wiederverwendung deiner tatsächlichen Komponenten. Code Connect gewährleistet die Einheitlichkeit des generierten Codes mit deiner Codebasis.

  Erfahre mehr über Code Connect

MCP-Server einrichten

Du kannst eine Verbindung mit dem Figma MCP-Server auf zwei Arten herstellen:

• Remote-MCP-Server: Verbindet sich direkt mit dem von Figma gehosteten Endpunkt auf https://mcp.figma.com/mcp. Erfahre, wie du den Remote-MCP-Server installierst.
• Desktop-MCP-Server: Wird lokal über die Figma Desktop-App. ausgeführt. Erfahre, wie du den Desktop-MCP-Server installierst.

MCP-Server mit deinem Editor verbinden

Befolge die Anweisungen für deinen spezifischen Editor, um eine Verbindung zum Figma MCP-Server herzustellen, entweder lokal oder remote. Einige Clients unterstützen auch Skills, die agentenbezogene Anweisungen hinzufügen, um KI-Tools effektiver mit Figma-Designs arbeiten zu lassen:

Über Skills

Skills bieten Orientierung, wie ein Agent spezifische Aufgaben ausführen sollte, indem eine Kombination aus MCP-Toolaufrufen und detaillierten Anweisungen genutzt wird.

Während der Figma MCP-Server einzelne Tools zur Verfügung stellt, helfen Skills Agenten zu verstehen, welche Tools zu verwenden sind, wie sie in Reihenfolge gebracht werden und wie die Ergebnisse bei der Arbeit mit Figma-Designs anzuwenden sind.

Skills können Agenten durch Workflows wie die folgenden leiten:

• Figma-Designkomponenten mithilfe von Code Connect mit Codekomponenten verbinden
• Designsystemregeln generieren, die auf deine Codebasis ausgerichtet sind 
• Designs in produktionsbereiten Code übersetzen 

Fähigkeiten ersetzen keine MCP-Verbindungen und fügen keine neuen MCP-Funktionen hinzu. Sie reduzieren die Einrichtung und Vermutungen, indem sie empfohlene Workflows in wiederverwendbare Anweisungen verpacken.

Prompte deinen MCP-Client

Der Figma MCP-Server stellt eine Reihe von Tools bereit, die LLMs dabei unterstützen, Designs in Figma zu übersetzen. Sobald die Verbindung hergestellt ist, kannst du deinen MCP-Client dazu auffordern, auf einen bestimmten Designknoten zuzugreifen.

Für eine vollständige Liste der Tools und Beispiele, siehe Tools und Prompts.

Zuerst folge den Anweisungen, um den Figma MCP-Server für deinen bevorzugten MCP-Client zu installieren. Wir geben Anweisungen für Folgendes:

• Claude Code
• Codex von OpenAI
• Cursor
• VS-Code

Für andere MCP-Clients befolge die Anweisungen in der Dokumentation des Clients zum Hinzufügen von MCP-Servern. Siehe die Tabelle unter Verbinde den MCP-Server mit deinem Editor für Links.

Beispiel: Hol dir den Design-Kontext

Die Bereitstellung von Designkontext und Code aus Dateien erfolgt über Links. Designkontext abrufen:

1. Wähle in Figma Design die Ebene aus, für die du den Designkontext erhalten möchtest.
2. Kopiere in der Adressleiste des Browsers den Link zu einem Frame oder einer Ebene in Figma.

3. Füge im MCP-Client die URL ein und fordere den Client auf, dir bei der Implementierung des Designs zu helfen.

   

Beispiel: Sende die UI an Figma

Das Senden der Live-UI deiner Web-App oder Website an Figma erfolgt durch das Gespräch mit dem MCP-Client:

1. Fordere den MCP-Client auf: „Start a local server for my app and capture the UI in a new Figma file.“
2. Folge den Schritten, die der Client bereitstellt. Der Client öffnet für dich ein Browserfenster oder gibt dir einen Link, dem du folgen kannst.
3. Verwende die Erfassungssymbolleiste, um Seiten, Elemente und Zustände deiner Web-App oder Website zu erfassen.
4. Lasse den Client wissen, wenn du fertig bist. Der Client wird dir einen Link geben, um die erstellte Figma-Datei zu öffnen.

Verbesserung der MCP-Serverausgabe

Für die beste Ausgabe empfehlen wir, Regeln einzurichten, um den Agenten zu leiten. Um dir den Einstieg zu erleichtern, haben wir einige hilfreiche Beispielregeln.