Figwright: kostenloses Zweiwege-Figma-MCP, liest Designs und schreibt die Leinwand

Für wen

Wenn ein KI-Agent Figma nicht nur „ansehen“, sondern über ein lokales WebSocket-Relais das offizielle Plugin verbinden, Designs lesen und die Leinwand schreiben soll, passt dieses kostenlose Zweiwege-MCP. Es richtet sich an Claude Code, Cursor, Codex und jeden MCP-Client. Es gibt 113 Werkzeuge für Lesen, Schreiben und grounding, sodass ein Agent vom Design implementieren und auf der Leinwand bauen kann. Es läuft auf Figmas kostenloser Stufe, anders als das offizielle Dev Mode MCP mit bezahltem Sitz. Es passt zu lokaler Designzusammenarbeit. Es passt nicht zum Aufruf von Schreibwerkzeugen ohne Desktop oder bei getrenntem Plugin, und nicht dazu, die ungenannten 113 Werkzeuge als bekannte API zu behandeln. Die Zusammenfassung sagt, Daten blieben auf dieser Maschine; Dateilesen und Leinwandschreiben sind weiter eine lokale Privatsphäregrenze, nicht „keine lokalen Lesezugriffe“.

Erster Versuch in 3 Minuten

Zuerst MCP-Client, Figma-Desktop und Node.js 20.19+ oder 22.12+ prüfen. Offiziell sind Node 18/21 und 22.0–22.11 nicht unterstützt; der Server wird separat von npx geholt, die Version darf von der Build-Node des Projekts abweichen. Die kostenlose Stufe reicht, aber der Plugin-Import braucht die Desktop-App. Die Hauptkonfiguration des Clients ist:

npx -y @figwright/mcp@latest

Keine globale Installation nötig. Nach dem Start das Plugin in Figma-Desktop laut Repo importieren und bestätigen, dass das lokale WebSocket-Relais verbunden ist. Zuerst risikoarm lesen: aus der Clientliste ein Nur-Lese- oder grounding-Werkzeug wählen und aktuelle Auswahl oder Seitenstruktur ansehen. Die Evidenz nennt die 113 Werkzeuge nicht; fehlen sie, die Liste aufrufen, keine Layer-API erfinden. Erfolgssignal ist eine zurückgegebene Designstruktur, keine umgeschriebene Leinwand. Vor dem Schreiben der Leinwand muss ein erfolgreiches Lesen sichtbar sein. Optionales npx skills add awdr74100/figwright/skills ist nicht der Hauptweg; die Skill verlangt ein bereits verbundenes MCP. Repository: https://github.com/awdr74100/figwright

Anwendungsfälle

Fall 1: Vom Design implementieren. Nach Plugin-Verbindung mit Lese-/grounding-Werkzeugen die framework-bewusste Designstruktur verstehen, dann Code auf dieser Maschine erzeugen. Der Titel sagt, Designs könnten framework-bewusster Code werden. Die Evidenz schreibt keine unterstützten Frameworknamen; fehlen sie, der vom Client gelieferten Struktur folgen, kein Exportformat erfinden.

Fall 2: Ergebnisse auf die Leinwand zurückschreiben. Soll der Agent in Figma bauen oder Code zurückschieben, Leinwand-Schreibwerkzeuge nutzen. Das ändert die Designdatei und hat Nebenwirkungen: zuerst bestätigen, dass die aktuelle Datei eine wegwerfbare Kopie oder eine bewusst zu ändernde Datei ist, dann ausführen. Die Evidenz garantiert nur Zweiwege, nicht Nur-Lesen; kein Rückgängig-Schritt. Bei Fehler die Figma-Historie nutzen, keinen undo-Befehl erfinden.

Nutzungsgrenzen

Ohne Desktop kein Plugin-Import, also keine Relaisverbindung. Bei falscher Node-Version nicht erzwingen. Die 113 Werkzeugnamen sind unveröffentlicht; nichts erfinden. Schreiben ändert die Leinwand; vor erfolgreichem Lesen nicht stapelweise schreiben. Die Bezahlgrenzen des offiziellen Dev Mode MCP gelten nicht für Figwright, aber Figwright ist auch kein Ersatz für einen offiziellen Figma-Sitz. Das Skill-Paket ist Zusatz und ersetzt @figwright/mcp nicht. Nicht annehmen, der Agent sähe deine Designdateien nicht. Der erste Versuch nur npx -y @figwright/mcp@latest; Erfolg ist eine Nur-Lese-Strukturrückgabe.