Figma MCP: Design-Kontext lesen und aufs Canvas schreiben
Der Figma MCP Server bringt Design-Systeme, Variablen und Komponenten in den Agenten — und schreibt seit dem Update vom März 2026 auch selbst native Designs aufs Canvas.
Der Figma MCP Server ist Figmas offizielle MCP-Schnittstelle für KI-Agenten. Er liefert Design-Kontext — Variablen, Komponenten, Layout-Daten — direkt in IDE und Agenten und schreibt seit dem Update vom März 2026 auch selbst native Inhalte aufs Canvas. Verfügbar als gehosteter Remote-Server (empfohlen) oder als lokaler Desktop-Server.
Vom Read-Only-Werkzeug zum Design-Agenten
Lange konnte der Server nur lesen: Frame auswählen, Code generieren, Design-Tokens extrahieren. Das Canvas-Update änderte die Richtung — Agenten erstellen jetzt komplette Landingpages und UX-Flows über mehrere Screens, und zwar mit den Komponenten, Tokens und Stilen deines eigenen Design-Systems statt generischer Bibliotheken. Die wichtigsten Fähigkeiten:
- Design-Kontext extrahieren: Variablen, Komponenten, Auto-Layout-Daten in die IDE holen
- Code aus Frames generieren: ausgewählte Frames in Code übersetzen, konsistent per Code Connect
- Aufs Canvas schreiben: Frames, Komponenten, Variablen in Figma Design und FigJam anlegen und ändern
- Live-UI erfassen: gerenderte Web-UI (auch localhost) als editierbare Design-Ebenen nach Figma bringen
Wie sich daraus ein Team aus Designer-, UX-Redakteur- und Art-Director-Agent bauen lässt, zeigt unser Blog-Beitrag Figma MCP und das Agenten-Team.
Installation in Claude Code
Figma empfiehlt das offizielle Plugin, das MCP-Server plus Agent Skills in einem Schritt einrichtet:
claude plugin install figma@claude-plugins-officialManuell geht es über den Remote-Server mit OAuth-Login:
claude mcp add --transport http figma https://mcp.figma.com/mcpMit --scope user steht der Server in allen Projekten bereit. Wichtig: Für Schreib-Workflows brauchst du zusätzlich die Figma Skills — ohne sie arbeitet der Agent mit der Canvas-API unzuverlässig.
Einsatz-Szenarien und Grenzen
Stark ist der Figma MCP Server überall, wo ein Design-System existiert: Design-to-Code mit echten Tokens, schnelle Mockup-Iterationen, Hypothesen-Validierung in Minuten statt Tagen. Ohne angeschlossenes UI-Kit sinkt die Qualität spürbar — dann generiert der Agent generische Layouts. Für visuelle Referenzen ohne Figma-Datei ist Refero MCP die bessere Wahl, für fertige React-Komponenten Magic MCP. Beachte außerdem: Die Beta ist kostenlos, Figma plant aber ein nutzungsbasiertes Preismodell.
Häufige Fragen
Was kostet der Figma MCP Server?
Der Remote-Server ist auf allen Figma-Plänen und Seats verfügbar und während der Beta-Phase kostenlos — Figma kündigt aber an, dass die Agenten-Features später nutzungsbasiert bezahlt werden. Nur der lokale Desktop-Server setzt einen Dev- oder Full-Seat eines Bezahlplans voraus.
Kann der Figma MCP Server eigenständig Designs erstellen?
Ja, seit dem Update vom März 2026 schreibt der Server aufs Canvas: Agenten bauen Frames, Komponenten, Variablen und Auto-Layouts direkt in Figma-Dateien — auf Basis deines bestehenden Design-Systems. Vorher war der Server reines Read-Only-Werkzeug für Design-to-Code.
Warum sollte ich zusätzlich die Figma Skills installieren?
Die Skills geben dem Agenten Workflow-Wissen für die Schreib-Tools: Ohne sie verbindet er sich zwar, arbeitet aber unzuverlässig mit der Canvas-API. Das Claude-Code-Plugin figma@claude-plugins-official installiert MCP-Server und Skills in einem Schritt.
Quellen
- Figma MCP Server — Developer Docs — Figma (abgerufen 2026-07-18)
- The Figma canvas is now open to agents — Figma (abgerufen 2026-07-18)
Verwandte Artikel
Magic MCP von 21st.dev: Designer-Komponenten per Prompt ins Projekt
Magic MCP verbindet Agenten mit dem Komponenten-Marktplatz von 21st.dev — echte Designer-UI-Komponenten statt AI-generiertem Einheitsbrei, direkt ins Projekt geschrieben.
Refero MCP: 135.000+ echte Produkt-Screens als Design-Referenz im Agenten
Refero MCP gibt KI-Agenten Zugriff auf kuratierte Design-Systeme, über 135.000 echte Produkt-Screens und 10.000+ User-Flows — Research vor dem ersten Prompt.
MCP (Model Context Protocol) — Der USB-C-Standard für KI
MCP ist ein offener Standard von Anthropic, der KI-Modellen standardisierten Zugriff auf externe Tools und Daten gibt.