Figma-Designs lesen und Frames erzeugen

Empfehlung

Wer in Claude arbeitet, nimmt den Figma-Connector aus dem Claude-Verzeichnis; Claude Desktop und Claude Code können damit laut Figma auch in Dateien schreiben. Den Server trägst du direkt ein, wenn du Cursor, VS Code oder Codex nutzt. Der lokale Desktop-Server ist für besondere Anforderungen von Organisationen gedacht. Beleg 3 Beleg 7 Beleg 8

Nicht geeignet, wenn

• Du hast nur einen View-, Collab- oder Dev-Sitz und willst, dass die KI Dateien befüllt: Schreiben auf der Zeichenfläche erfordert einen Full-Sitz. Beleg 6
• Du willst mit der gerade markierten Auswahl arbeiten, ohne einen Link zu kopieren: Das geht nur mit dem lokalen Desktop-Server. Beleg 4
• Du brauchst viele Abrufe pro Tag mit einem Starter-Plan oder View-Sitz: Das Limit liegt dort bei wenigen Aufrufen im Monat. Beleg 5

3 Abläufe zum Ausprobieren

Kopiere einen Prompt in deinen KI-Client und ersetze, was in eckigen Klammern steht. Lesende Abläufe ändern nichts im Dienst; bei schreibenden bestätigst du jede Änderung selbst.

1. Kampagnenformate einer Figma-Datei vor der Übergabe prüfen

   Für Marketing vor der Übergabe an Medien oder Agentur

   Liest nur Beleg 2 Beleg 4

   Prompt · ein Klick markiert den ganzen Text

   Nutze diese Figma-Datei: [Link zur Datei oder Seite]. Gib mir eine Tabelle der Frames auf dieser Seite mit Name, Breite und Höhe. Vergleiche sie mit dieser Soll-Liste: [Formate, zum Beispiel Instagram-Feed, LinkedIn-Anzeige, Newsletter-Header]. Nenne fehlende oder abweichende Frames. Ändere nichts.

   Ergebnis

   Eine Tabelle aller Frames mit Namen und Größen und eine kurze Liste der fehlenden oder abweichenden Formate.

   Vorher prüfen

   Gleiche die Tabelle mit dem ab, was du in Figma siehst. Unbenannte Ebenen wie „Frame 12“ erschweren der KI die Zuordnung.

2. Markenfarben und Schriften im Entwurf gegen die Bibliothek abgleichen

   Für Marken- und Content-Teams

   Liest nur Beleg 4

   Prompt · ein Klick markiert den ganzen Text

   Nutze diese Auswahl in Figma: [Link zur Auswahl]. Liste alle Variablen und Stile auf, die darin vorkommen, etwa Farben, Schriften und Abstände. Suche in den verbundenen Bibliotheken nach den Markenfarben und Markenschriften und nenne, welche davon in der Auswahl fehlen. Ändere nichts.

   Ergebnis

   Eine Liste der verwendeten Variablen und Stile und ein Abgleich mit den Marken-Bausteinen der Bibliothek.

   Vorher prüfen

   Die Antwort ist nur so gut wie die Pflege der Variablen und Bibliotheken. Kommt wenig zurück, nutzt die Datei vermutlich Einzelwerte; prüfe Auffälliges in Figma selbst.

3. Einen Kampagnenablauf als FigJam-Diagramm entwerfen

   Für Kampagnenleitung und Vertrieb

   Schreibt Beleg 4

   Prompt · ein Klick markiert den ganzen Text

   Erstelle ein FigJam-Diagramm für unsere Kampagne [Name]: Start am [Datum], Phasen Teaser, Launch und Nachfassen, Kanäle [zum Beispiel LinkedIn, Newsletter, Anzeigen], Freigaben durch [Marketing-Leitung] und [Recht]. Zeig Verantwortliche und Abhängigkeiten als Pfeile. Erfinde keine Termine oder Namen. Zeig mir vorher den geplanten Aufbau zur Bestätigung.

   Ergebnis

   Ein FigJam-Diagramm mit Phasen, Kanälen, Freigaben und Abhängigkeiten, das du im Team weiterbearbeiten kannst.

   Vorher prüfen

   Termine und Zuständige stammen allein aus deinem Prompt. Prüfe, ob das Diagramm sie richtig übernommen hat, und sieh in Figma nach, wo die Datei liegt und wer Zugriff hat.

Das brauchst du

Tarif

Der Remote-Server steht laut Figma auf allen Sitzen und Tarifen bereit. Wie viele Werkzeugaufrufe möglich sind, hängt vom Sitz und vom Tarif ab (Starter, Professional, Organization, Enterprise); zum Schreiben brauchst du einen Full-Sitz.

Rolle

Du brauchst ein Figma-Konto mit Zugriff auf die Datei. Bei Claude Team und Enterprise aktiviert zuerst ein Owner den Connector. Ob du in Figma lesen oder schreiben darfst, bestimmt dein Sitz.

Zeitbedarf

ca. 10 Minuten

Schätzung der Redaktion

Belege

Beleg 5 Beleg 6 Beleg 7 Beleg 9

Einrichtung je Client

Rechte

• 3 von 15 Werkzeugen legen Daten an oder ändern sie, etwa create_new_file, upload_assets, add_code_connect_map.
• Anmeldung über OAuth: Der Server handelt mit den Rechten deines Kontos.

Verbinde zuerst ein Testkonto oder eine Sandbox und lass Änderungen einzeln bestätigen, bevor der Baustein mit echten Daten arbeitet.

Die Anmeldung läuft per OAuth im Browser; für Claude ist laut Figma zusätzlich eine zentral verwaltete Freigabe über Okta möglich. Der Server liest und schreibt. Lesen reicht mit Dev-Sitz, Schreiben auf der Zeichenfläche erfordert einen Full-Sitz und Bearbeitungsrecht an der Datei. Nur Clients aus dem Figma-MCP-Katalog können sich verbinden.

Liest

Ebenen, Layout, Variablen, Stile, Komponenten und Texte aus Design-, FigJam-, Slides- und Make-Dateien, auf die du Zugriff hast, dazu Screenshots, Exporte, Bibliotheken sowie Identität und Sitztyp.

Ändert

Legt Frames, Komponenten, Variablen, FigJam-Elemente, Diagramme, Dateien und Bilder an, ändert bestehende Inhalte, löscht Objekte und verknüpft Komponenten mit Code.

Kann nicht

Ohne Full-Sitz auf die Zeichenfläche schreiben und auf Dateien zugreifen, die dein Konto nicht sehen darf. Der Remote-Server liest nicht die aktuelle Auswahl, sondern arbeitet mit dem Link, den du angibst.

Belege

Beleg 4 Beleg 5 Beleg 6

Technische Prüfung

Ungeprüft

Datenschutz

Was der Server kann

• Liest Design-Kontext aus Figma-Design-, FigJam- und Make-Dateien, also Ebenen, Layout, Variablen, Stile und Komponenten, die du per Link benennst.
• Erstellt Screenshots und exportiert Ebenen als PNG, JPG, SVG oder PDF; auch die Original-Bilder aus einer Datei lassen sich herausgeben.
• Wandelt einen per Link benannten Frame in Code um, standardmäßig React mit Tailwind, auf Wunsch in anderen Frameworks.
• Legt Frames, Komponenten, Variablen und Auto Layout in Design-Dateien an und ändert sie, in FigJam auch Stickies, Sektionen und Konnektoren; dafür brauchst du einen Full-Sitz.
• Löscht Objekte in Figma-Dateien, wenn die KI das allgemeine Schreibwerkzeug dafür nutzt.
• Erzeugt FigJam-Diagramme wie Flussdiagramm, Gantt-Diagramm oder ERD aus einer Beschreibung oder aus Mermaid-Code.
• Legt leere Design-, FigJam- oder Slides-Dateien an, lädt Bilder hoch und überträgt die Oberfläche einer Web-App als Designebenen (nur ausgewählte Clients).
• Durchsucht Bibliotheken nach Komponenten, Variablen und Stilen, verknüpft Komponenten per Code Connect mit Code und erzeugt Bilder, die Figma-KI-Guthaben verbrauchen.

Belege Beleg 3 Beleg 4 Beleg 6

Grenzen

• Der Remote-Server braucht einen Link zu Frame oder Ebene; Arbeiten mit der aktuellen Auswahl gibt es nur beim lokalen Server über die Desktop-App.
• Ein einzelner Schreibaufruf liefert höchstens 20 KB Antwort, Bilder und eigene Schriften werden dabei noch nicht unterstützt.
• Im Claude-Verzeichnis ist get_screenshot in Claude und Claude Code auf eine Beschreibung des Screenshots beschränkt, und die dort gelistete Werkzeugliste nennt kein Schreibwerkzeug.
• Die Schreibfunktion ist laut Figma derzeit während der Beta kostenlos, soll aber später nutzungsabhängig bezahlt werden.

Belege Beleg 4 Beleg 5 Beleg 6 Beleg 8

Wenn etwas nicht klappt

Die KI meldet, dass sie auf Inhalte nicht zugreifen kann.

Prüfe, ob der Link zu einer gültigen Design-, FigJam- oder Make-Datei führt. Das Werkzeug whoami zeigt die angemeldete E-Mail-Adresse samt Plänen und Sitzen; dein Konto muss zum Plan der Datei gehören. Beleg 5

Die KI stößt an ein Aufruflimit.

Die Limits hängen von Tarif und Sitz ab. Mehr Aufrufe gibt es mit einem Dev- oder Full-Sitz und mit einem höheren Tarif. Beleg 5