Figma

Figma MCP Server Leitfaden

Der Figma MCP Server bringt Figma direkt in deinen Workflow, indem er wichtige Designinformationen und Kontext für KI-Agenten bereitstellt, die Code aus Figma-Designdateien generieren.

[!NOTE] Für Figma MCP Server-Tools, die Daten aus Figma lesen, gelten Ratenbegrenzungen. Einige Tools, wie solche, die in Figma-Dateien schreiben, sind von den Ratenbegrenzungen ausgenommen.

Benutzer mit dem Starter-Plan oder mit View- oder Collab-Sitzen in kostenpflichtigen Plänen sind auf bis zu 6 Tool-Aufrufe pro Monat beschränkt.

Benutzer mit einem Dev- oder Full-Sitz in den Professional-, Organization- oder Enterprise-Plänen haben Ratenbegrenzungen pro Minute, die denselben Grenzwerten wie die Tier-1-Figma-REST-API folgen. Wie bei der Figma-REST-API behält sich Figma das Recht vor, Ratenbegrenzungen zu ändern.

Die vollständige Dokumentation zum Figma MCP Server findest du in unserer Entwicklerdokumentation. Durch die Nutzung des Figma MCP Servers und der zugehörigen Ressourcen (einschließlich dieser Skills) stimmst du den Figma-Entwicklerbedingungen zu. Diese Skills sind derzeit als Beta-Funktion verfügbar.

Funktionen

• Auf die Canvas schreiben (nur Remote-Server): Erstelle und modifiziere native Figma-Inhalte direkt von deinem MCP-Client. Mit den richtigen Skills können Agenten Frames, Komponenten, Variablen und Auto-Layout in deinen Figma-Dateien aufbauen und aktualisieren – mit deinem Designsystem als Quelle der Wahrheit.

  Hinweis: Wir verbessern schnell, wie Figma KI-Agenten unterstützt. Die Funktion „Auf die Canvas schreiben" wird letztendlich eine nutzungsbasierte kostenpflichtige Funktion sein, ist aber derzeit während der Beta-Phase kostenlos verfügbar.

• Code aus ausgewählten Frames generieren

  Wähle einen Figma-Frame aus und verwandle ihn in Code. Ideal für Produktteams, die neue Abläufe entwickeln oder App-Funktionen iterieren.

• Designkontext extrahieren

  Ziehe Variablen, Komponenten und Layoutdaten direkt in deine IDE. Dies ist besonders nützlich für Designsysteme und komponentenbasierte Workflows.

• Smarter coden mit Code Connect

  Steigere die Ausgabequalität, indem du deine tatsächlichen Komponenten wiederverwendest. Code Connect hält deinen generierten Code konsistent mit deiner Codebasis.

  Mehr über Code Connect erfahren →

• Figma-Designs aus Webseiten generieren (wird eingeführt)

  Erfasse, importiere oder konvertiere eine Webseite direkt von deinem KI-Coding-Agenten in ein Figma-Design.

Installation & Einrichtung

Verbinde dich mit dem Figma MCP Server

Verschiedene MCP-Clients erfordern leicht unterschiedliche Einrichtungen. Folge den Anweisungen unten für deinen spezifischen Client, um dich mit dem Figma MCP Server zu verbinden.

VS Code

1. Verwende die Tastenkombination ⌘ Shift P, um nach MCP:Add Server zu suchen.
2. Wähle HTTP.
3. Füge die Server-URL https://mcp.figma.com/mcp in die Suchleiste ein. Drücke dann Enter.
4. Wenn du nach einer Server-ID gefragt wirst, gib figma ein.
5. Wähle, ob du diesen Server global oder nur für den aktuellen Workspace hinzufügen möchtest. Nach der Bestätigung siehst du eine Konfiguration wie diese in deiner mcp.json-Datei:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

6. Öffne die Chat-Symbolleiste mit ⌥⌘B oder ⌃⌘I und wechsle in den Agent-Modus.
7. Gib bei geöffnetem Chat #get_design_context ein, um zu bestätigen, dass die Figma MCP Server-Tools verfügbar sind. Wenn keine Tools aufgelistet werden, starte VS Code neu.

[!NOTE] Du musst GitHub Copilot auf deinem Konto aktiviert haben, um MCP in VS Code zu verwenden.

Weitere Informationen findest du in der offiziellen VS Code-Dokumentation.

Cursor

Die empfohlene Methode, den Figma MCP Server in Cursor einzurichten, ist die Installation des Figma-Plugins, das MCP-Server-Einstellungen sowie Agent Skills für gängige Workflows enthält.

Installiere das Plugin, indem du den folgenden Befehl im Agent-Chat von Cursor eingibst:

/add-plugin figma

Das Plugin enthält:

• MCP-Server-Konfiguration für den Figma MCP Server
• Skills zum Implementieren von Designs, Verbinden von Komponenten über Code Connect und Erstellen von Designsystem-Regeln
• Regeln für die ordnungsgemäße Asset-Behandlung vom Figma MCP Server

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code

Die empfohlene Methode, den Figma MCP Server in Claude Code einzurichten, ist die Installation des Figma-Plugins, das MCP-Server-Einstellungen sowie Agent Skills für gängige Workflows enthält.

Führe den folgenden Befehl aus, um das Plugin aus dem offiziellen Plugin-Marktplatz von Anthropic zu installieren.

claude plugin install figma@claude-plugins-official

Erfahre mehr über die Claude Code Plugins und Agent Skills von Anthropic.

claude mcp add --transport http figma https://mcp.figma.com/mcp

Gemini CLI

Installiere die Figma-Erweiterung für Gemini CLI, indem du den folgenden Befehl ausführst:

gemini extensions install https://github.com/figma/mcp-server-guide

Nach der Installation authentifiziere dich mit Figma, indem du gemini ausführst und dann den folgenden Befehl innerhalb der CLI ausführst:

/mcp auth figma

So deinstallierst du die Erweiterung:

gemini extensions uninstall figma

Andere Editoren

Andere Code-Editoren und Tools, die Streamable HTTP unterstützen, können sich ebenfalls mit dem Figma MCP Server verbinden.

Wenn du einen anderen Editor oder ein anderes Tool verwendest, prüfe dessen Dokumentation, um zu bestätigen, dass es die Kommunikation auf Basis von Streamable HTTP unterstützt. Wenn ja, kannst du den Figma MCP Server manuell mit dieser Konfiguration hinzufügen:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Deinen MCP-Client auffordern

Der Figma MCP Server führt eine Reihe von Tools ein, die LLMs dabei helfen, Designs in Figma zu übersetzen. Nach der Verbindung kannst du deinen MCP-Client auffordern, auf einen bestimmten Designknoten zuzugreifen.

Um deinem KI-Client Figma-Designkontext bereitzustellen:

1. Kopiere den Link zu einem Frame oder einer Ebene in Figma.
2. Fordere deinen Client auf, dir bei der Implementierung des Designs unter der ausgewählten URL zu helfen.

[!NOTE] Dein Client kann nicht zur ausgewählten URL navigieren, aber er extrahiert die Knoten-ID, die erforderlich ist, damit der MCP Server identifizieren kann, zu welchem Objekt Informationen zurückgegeben werden sollen.

Tools und Skills

Figma pflegt eine Liste der Tools, die vom Figma MCP Server bereitgestellt werden, in der Entwicklerdokumentation.

Du kannst auch mehr über die Skills erfahren, die im Figma-Plugin für unterstützte Agenten im Figma Help Center enthalten sind. Je nach Agenten siehst du möglicherweise auch die Begriffe connector, extension oder power; diese enthalten denselben Satz an Skills.

Dieses Repository enthält auch eigenständige Workflow-Skills, die nicht im Figma-Plugin gebündelt sind:

• workflow-skills/video-interaction-mapper: Verwandelt UI-Aufnahmen in kommentierte Figma-Storyboards
• workflow-skills/generate-project-plan: Verwandelt ein PRD (plus optionaler Codebasis-Grundlage) in ein FigJam-Projektplanungsboard

MCP-Best Practices

Die Qualität des generierten Codes hängt von mehreren Faktoren ab. Einige liegen in deiner Kontrolle, andere in den Tools, die du verwendest. Hier sind einige Vorschläge für saubere, konsistente Ausgaben.

Strukturiere deine Figma-Datei für besseren Code

Biete den besten Kontext für deine Designabsicht, damit der MCP und dein KI-Assistent Code generieren können, der klar, konsistent und mit deinem System ausgerichtet ist.

• Verwende Komponenten für alles Wiederverwendete (Buttons, Karten, Eingabefelder usw.)
• Verknüpfe Komponenten mit deiner Codebasis über Code Connect. Dies ist der beste Weg, um eine konsistente Komponentenwiederverwendung im Code zu erreichen. Ohne dies rät das Modell nur.
• Verwende Variablen für Abstände, Farben, Radien und Typografie.
• Benenne Ebenen semantisch (z. B. CardContainer, nicht Group 5)
• Verwende Auto-Layout, um responsive Absichten zu kommunizieren.

[!TIP] Ändere die Größe des Frames in Figma, um zu überprüfen, ob er sich wie erwartet verhält, bevor du Code generierst.

• Verwende Anmerkungen und Entwicklerressourcen, um Designabsichten zu vermitteln, die allein aus visuellen Darstellungen schwer zu erfassen sind, wie z. B. wie sich etwas verhalten, ausrichten oder reagieren soll.

Schreibe effektive Prompts, um die KI zu führen

MCP gibt deinem KI-Assistenten strukturierte Figma-Daten, aber dein Prompt steuert das Ergebnis. Gute Prompts können:

• Das Ergebnis an dein Framework oder Styling-System ausrichten
• Dateistruktur- und Namenskonventionen befolgen
• Code zu bestimmten Pfaden hinzufügen (z. B. src/components/ui)
• Code in vorhandenen Dateien hinzufügen oder ändern, anstatt neue zu erstellen
• Bestimmte Layout-Systeme befolgen (z. B. Grid, Flexbox, absolut)

Beispiele:

• „Generiere iOS SwiftUI-Code aus diesem Frame"
• „Verwende Chakra UI für dieses Layout"
• „Verwende src/components/ui-Komponenten"
• „Füge dies zu src/components/marketing/PricingCard.tsx hinzu"
• „Verwende unsere Stack-Layout-Komponente"

Denke an Prompts wie an ein Briefing für einen Teammitarbeiter. Klare Absichten führen zu besseren Ergebnissen.

Löse bei Bedarf bestimmte Tools aus

Der MCP unterstützt verschiedene Tools, und jedes bietet deinem KI-Assistenten eine andere Art von strukturiertem Kontext. Manchmal wählt der Assistent nicht automatisch das richtige aus, insbesondere wenn mehr Tools verfügbar werden. Wenn die Ergebnisse nicht stimmen, versuche, in deinem Prompt expliziter zu sein.

• get_design_context bietet eine strukturierte React + Tailwind-Darstellung deiner Figma-Auswahl. Dies ist ein Ausgangspunkt, den dein KI-Assistent je nach deinem Prompt in jedes Framework oder jeden Codestil übersetzen kann.
• get_variable_defs extrahiert die Variablen und Stile, die in deiner Auswahl verwendet werden (Farbe, Abstand, Typografie usw.). Dies hilft dem Modell, deine Tokens direkt im generierten Code zu referenzieren.

Wenn du beispielsweise rohen Code anstelle von Tokens erhältst, versuche Folgendes:

• „Hole die Variablennamen und -werte, die in diesem Frame verwendet werden."

Füge benutzerdefinierte Regeln hinzu

Lege projektweite Richtlinien fest, um die Ausgabe konsistent zu halten – wie Onboarding-Notizen für einen neuen Entwickler. Dazu gehören Dinge wie:

• Bevorzugte Layout-Primitive
• Dateiorganisation
• Namensmuster
• Was nicht hartcodiert werden soll

Du kannst dies in dem Format bereitstellen, das dein MCP-Client für Anweisungsdateien verwendet.

Beispiele:

Konsistent gute Ausgabe sicherstellen

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Allgemeine Qualitätsregeln

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

Diese einmal hinzuzufügen kann den Bedarf an wiederholtem Prompting erheblich reduzieren und stellt sicher, dass Teammitglieder oder Agenten konsistent dieselben Erwartungen befolgen.

Überprüfe unbedingt die Dokumentation deiner IDE oder deines MCP-Clients, um zu erfahren, wie Regeln strukturiert werden, und experimentiere, um herauszufinden, was für dein Team am besten funktioniert. Klare, konsistente Anleitungen führen oft zu besserem, wiederverwendbarem Code mit weniger Hin und Her.

Große Auswahlen aufteilen

Teile Bildschirme in kleinere Teile (wie Komponenten oder logische Blöcke) auf, um schnellere, zuverlässigere Ergebnisse zu erzielen.

Große Auswahlen können die Tools verlangsamen, Fehler verursachen oder zu unvollständigen Antworten führen, insbesondere wenn zu viel Kontext für das Modell zu verarbeiten ist. Stattdessen:

1. Generiere Code für kleinere Abschnitte oder einzelne Komponenten (z. B. Karte, Kopfzeile, Seitenleiste)
2. Wenn es sich langsam anfühlt oder hängen bleibt, reduziere die Größe deiner Auswahl

Dies hilft, den Kontext überschaubar und die Ergebnisse vorhersehbarer zu halten – sowohl für dich als auch für das Modell.

Wenn etwas in der Ausgabe nicht ganz richtig aussieht, hilft es normalerweise, zu den Grundlagen zurückzukehren: wie die Figma-Datei strukturiert ist, wie der Prompt geschrieben ist und welcher Kontext gesendet wird. Die Befolgung der oben genannten Best Practices kann einen großen Unterschied machen und führt oft zu konsistenterem, wiederverwendbarem Code.

Kontext zu deinem Agenten bringen

Die Make + MCP-Integration erleichtert es, Prototypen von Design in die Produktion zu überführen. Indem Sie Make-Projekte direkt über MCP mit Ihrem Agenten verbinden, können Sie Ressourcen extrahieren und in Ihrer Codebasis wiederverwenden. Dies reduziert Reibungsverluste bei der Erweiterung von Prototypen zu echten Anwendungen und stellt sicher, dass die Designabsicht getreu in die Implementierung übernommen wird.

Mit dieser Integration können Sie:

• Projektkontext direkt aus Make abrufen (einzelne Dateien oder das gesamte Projekt)
• Aufforderung zur Verwendung vorhandener Codekomponenten anstelle eines Neuanfangs
• Prototypen mit echten Daten erweitern, um Designs schneller zu validieren und produktionsreif zu machen

So funktioniert es

[!NOTE] Diese Integration nutzt die MCP-Ressourcenfunktion, die es Ihrem Agenten ermöglicht, Kontext direkt aus Make-Projekten abzurufen. Sie ist nur auf Clients verfügbar, die MCP-Ressourcen unterstützen.

Schritte zum Abrufen von Ressourcen aus Make

1. Fordern Sie Ihren Agenten auf, Kontext abzurufen, indem Sie einen gültigen Make-Link bereitstellen
2. Erhalten Sie eine Liste der verfügbaren Dateien aus Ihrem Make-Projekt
3. Laden Sie die Dateien herunter, die Sie abrufen möchten, wenn Sie dazu aufgefordert werden

Beispiel-Workflow

Ziel: Implementieren Sie eine Popup-Komponente in Ihrer Produktionscodebasis, die dem in Make definierten Design und Verhalten entspricht.

1. Teilen Sie Ihren Make-Projektlink mit Ihrem Agenten.
2. Fordern Sie den Agenten auf: „Ich möchte das Verhalten und die Stile der Popup-Komponente aus dieser Make-Datei übernehmen und sie mit meiner Popup-Komponente implementieren."

Ihr Agent ruft den relevanten Kontext aus Make ab und führt Sie bei der Erweiterung Ihrer vorhandenen Popup-Komponente um die Funktionalität und Stile des Prototyps an.

Symbolrichtlinien

Siehe die Figma-Richtlinien zur Markennutzung für die Anzeige aller in diesem Repository enthaltenen Symbole.