Figma MCP Server

Der Figma MCP Server bringt Figma-Design-Kontext direkt in KI-Coding-Workflows: Variablen, Komponenten und Layout-Daten aus Figma-Dateien auslesen, ausgewählte Frames in Code umwandeln, mit Code Connect generierten Code an die eigene Codebasis angleichen sowie Ressourcen aus Figma-Make-Dateien abrufen. Mit passenden Skills kann der Agent zusätzlich direkt auf die Zeichenfläche schreiben – Frames, Komponenten, Variablen und Auto-Layout in Figma-Design-Dateien anlegen oder ändern, FigJam-Boards mit Sticky-Notes, Sektionen, Konnektoren und Formen bearbeiten sowie aus Prompts, Code oder strukturierten Eingaben Architekturdiagramme und ER-Diagramme in FigJam erzeugen. Bei unterstützten Clients lässt sich zusätzlich die live gerenderte Oberfläche einer Web-App als neue Figma-Datei erfassen.

Zugriff hängt vom Figma-Plan ab

Figma betreibt den Server ausschließlich gehostet unter https://mcp.figma.com/mcp. Zugriff und Nutzungslimits hängen vom Figma-Plan und Sitztyp ab: Auf dem Starter-Plan sind es bis zu 20 Aufrufe pro Monat, mit einem View- oder Collab-Sitz auf einem bezahlten Plan nur bis zu 6 pro Monat. Erst ein Dev- oder Full-Sitz auf einem bezahlten Plan (Professional, Organization oder Enterprise) schaltet ein praktikables Kontingent frei – bis zu 200 Aufrufe pro Tag auf Professional, bis zu 600 pro Tag auf Enterprise, jeweils mit zusätzlichem Minutenlimit. Eine Desktop-Variante des Servers steht für Organisationen mit besonderen Anforderungen zur Verfügung, für die meisten Nutzenden empfiehlt Figma jedoch die Remote-Variante. Verbinden können sich nur MCP-Clients aus dem Figma-MCP-Katalog, darunter Claude Code, Cursor, VS Code und Xcode.

Warum ein eigener MCP-Server statt generischer Screenshot-Analyse

Bevor es einen offiziellen Figma-MCP-Server gab, mussten KI-Coding-Agenten Design-Vorgaben oft aus Screenshots erraten – mit entsprechenden Ungenauigkeiten bei Abständen, Farben oder Komponentennamen. Der Figma MCP Server löst das, indem er strukturierte Design-Daten direkt aus der Figma-Datei liefert: exakte Variablenwerte, Komponentennamen und Layout-Informationen, statt visueller Vermutungen. Für Teams mit einem etablierten Design-System ist das besonders wertvoll, weil generierter Code so eher zu den tatsächlich verwendeten Komponenten und Tokens passt, statt neue, abweichende Werte zu erfinden.

Für wen sich der Server eignet

Am meisten profitieren Entwicklerteams, die eng mit Designern zusammenarbeiten und regelmäßig Figma-Entwürfe in Code umsetzen: Der Server verkürzt den Weg von der Design-Freigabe zur ersten Code-Implementierung deutlich. Auch für die automatisierte Erstellung von Architektur- oder Datenbankdiagrammen in FigJam aus bestehendem Code eignet sich der Server gut. Für gelegentliche Design-Betrachtung ohne Coding-Bezug lohnt sich der Aufwand einer Einrichtung eher nicht, insbesondere angesichts der Plan-Anforderungen für ein praktikables Nutzungskontingent.

Kurz zusammengefasst: Ohne einen ausreichenden Figma-Plan bleibt der Server eine reine Demo-Funktion mit wenigen Aufrufen im Monat; erst mit Dev- oder Full-Sitz auf einem bezahlten Plan wird er zu einem alltagstauglichen Werkzeug für Design-zu-Code-Workflows.

Ein Figma-Konto mit einem bezahlten Plan (Professional, Organization oder Enterprise) und einem Dev- oder Full-Sitz für ein praktikables Nutzungskontingent; ein Starter-Plan oder ein View-/Collab-Sitz funktioniert technisch, ist aber auf wenige Aufrufe pro Monat begrenzt. Zusätzlich ein MCP-Client aus dem Figma-MCP-Katalog (z. B. Claude Code, Cursor, VS Code, Xcode).

In Claude Code empfiehlt Figma das offizielle Plugin, das MCP-Einstellungen und passende Agent-Skills mitbringt:

claude plugin install figma@claude-plugins-official

Alternativ manuell:

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

Mit --scope user steht der Server projektübergreifend zur Verfügung statt nur im aktuellen Projekt. Nach der Einrichtung mit /mcp in Claude Code den Eintrag „figma" auswählen, „Authenticate" wählen und den Zugriff im sich öffnenden OAuth-Fenster bestätigen.

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

OAuth-Anmeldung am eigenen Figma-Konto, ausgelöst im MCP-Client. Für Unternehmen wird zusätzlich Enterprise-verwaltete Autorisierung über Okta Cross App Access (XAA) unterstützt, aktuell nur für Claude.

Der Agent kann nur auf Figma-Inhalte zugreifen, für die das angemeldete Konto bereits Anzeige- oder Bearbeitungsrechte besitzt. Nutzungslimits richten sich nach Plan und Sitztyp (siehe Kostenangaben); schreibende Werkzeuge wie das Anlegen neuer Dateien sind von den Leseratenlimits ausgenommen.

Anfragen gehen an die von Figma gehostete Infrastruktur unter mcp.figma.com. Antworten enthalten Design-Daten der zugänglichen Figma-Dateien (Layout, Komponenten, Variablen, ggf. Bilder) und werden an den MCP-Client sowie dessen Sprachmodell weitergegeben. Schreibende Werkzeuge verändern Inhalte direkt in den verbundenen Figma- oder FigJam-Dateien.

Da der Server mit den Rechten des angemeldeten Figma-Kontos arbeitet, kann ein fehlgeleiteter Agent mit Schreibzugriff Design-Dateien versehentlich verändern oder überschreiben. Design-Dateien können vertrauliche Produktinformationen enthalten, die über den Agenten in dessen Sprachmodell gelangen. Für produktive Design-Systeme empfiehlt sich, Schreibzugriffe zunächst an Testdateien zu erproben und Konten mit möglichst engem Dateizugriff für automatisierte Abläufe zu verwenden.