Figma

Figma MCP Server Leitfaden

Der Figma MCP Server bringt Figma direkt in deinen Workflow, indem er wichtigen 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, wobei dein Designsystem als Quelle der Wahrheit dient.

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

• Platzhalterbilder generieren: Wenn Quell-, erfasste oder Bibliotheksbilder nicht verfügbar sind, können Agenten generate_image verwenden, nachdem sie um Erlaubnis gefragt und die Nutzung von Figma-AI-Guthaben offengelegt haben. Generierte Bilder werden mit upload_assets hochgeladen und auf das Design angewendet.

• 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 codieren 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 ausgerollt)

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

Installation & Einrichtung

Verbinde dich mit dem Figma MCP Server

Verschiedene MCP-Clients erfordern leicht unterschiedliche Einrichtungen. Befolge die 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 aus.
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 sind, starte VS Code neu.

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

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

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 in Cursors Agent-Chat 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-Verwaltung 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 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, überprüfe dessen Dokumentation, um zu bestätigen, dass es die Kommunikation auf Basis von Streamable HTTP unterstützt. Wenn dies der Fall ist, 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. Sobald du verbunden bist, 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 zu helfen, das Design unter der ausgewählten URL zu implementieren.

[!NOTE] Dein Client kann nicht zur ausgewählten URL navigieren, aber er extrahiert die Knoten-ID, die der MCP Server benötigt, um zu identifizieren, über welches 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 von 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-Anbindung) in ein FigJam-Projektplanungsboard

MCP-Best Practices

Die Qualität des generierten Codes hängt von mehreren Faktoren ab. Einige werden von dir kontrolliert, andere von 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.
• Verwende Variablen für Abstände, Farben, Radius 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 Eindrücken 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 anpassen
• Dateistruktur- und Benennungskonventionen 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-Layoutkomponente“

Betrachte Prompts wie ein Briefing an einen Teamkollegen. 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, Abstände, 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 – genau wie Onboarding-Notizen für einen neuen Entwickler. Dies sind Dinge wie:

• Bevorzugte Layout-Primitive
• Dateiorganisation
• Benennungsmuster
• 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 sich wiederholenden Prompts drastisch reduzieren und stellt sicher, dass Teamkollegen 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 und 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 zu halten und die Ergebnisse sowohl für dich als auch für das Modell vorhersehbarer zu machen.

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 obigen 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 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)
• Auffordern, vorhandene Codekomponenten zu verwenden, anstatt bei Null zu beginnen
• 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 Design und Verhalten entspricht, das in Make definiert ist.

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 dabei, Ihre vorhandene Popup-Komponente mit der Funktionalität und den Stilen des Prototyps zu erweitern.

Symbolrichtlinien

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