Sprache: DE Deutsch
Leitvia Pro holen

Figma: Code Connect für Patterns, Loops bleiben Loops

Mit Leitvia Pro 0.8.33 gibt der MCP-Server von Figma deinem KI-Agenten Blockmarkup jedes Patterns statt React, und Query Loops bleiben in Figma Loops.

Von

CMS ADMINS

Lesezeit

6 Minuten
Eine Design-Fläche und ein Code-Bereich nebeneinander auf dunklem Raster: links ein Loop aus drei Karten, die erste orange umrandet, die beiden folgenden als Kopien ausgegraut, rechts eingerückte Code-Zeilen, zwei davon orange, mit einem orangen Pfeil von den Karten zum Code

Seit Leitvia Pro 0.8.33 bekommt, wer in Figma beginnt und über den MCP-Server von Figma mit einem KI-Agenten arbeitet, die Patterns von Leitvia als Blockmarkup statt als React. Das Leitvia-Plugin für Figma baut jedes Pattern als Komponente für Code Connect, und Query Loops bleiben von WordPress nach Figma und zurück Loops.

Die Pattern-Bibliothek für Code Connect und Query Loops in Figma, in acht Schritten. Das Video ist auf Englisch und hat keinen Ton; die Abschrift auf Deutsch steht darunter.
Abschrift des Videos
  1. Ohne Zuordnung beschreibt der MCP-Server von Figma einen Frame als React, mit Code Connect als Blockmarkup. Zeichnung eines Frames in Figma und zweier Ausgaben: ohne Zuordnung ein div mit Tailwind-Klassen, mit Code Connect die Blockkommentare von WordPress.
  2. Im Leitvia-Plugin, Tab Patterns, baut „Build pattern library“ jedes Pattern als Komponente. Screenshot des Plugins, Tab Patterns, mit aufgeklapptem Abschnitt Pattern library for Code Connect: der Button Build pattern library, das Feld Link of this file und der Button Download Code Connect files.
  3. Jeder Text wird eine Text-Property. Danach veröffentlichst du die Datei als Bibliothek deines Teams. Screenshot des Plugins nach dem Bau: Die Statuszeile meldet, dass 154 von 154 Patterns als Komponenten auf der Seite Leitvia patterns gebaut sind, und dass du die Datei als Bibliothek veröffentlichen und dann die Code-Connect-Dateien laden sollst.
  4. Code-Connect-Dateien laden, die Vorlagen mit dem Skill leitvia-figma schreiben und veröffentlichen. Zeichnung von vier Schritten: Bibliothek in Figma veröffentlichen, leitvia-code-connect.json laden, build-code-connect.mjs aus dem Skill leitvia-figma ausführen, figma connect publish mit deinem eigenen Figma-Token ausführen.
  5. Dein KI-Agent bekommt jetzt das Blockmarkup des Patterns, mit den Texten der Instanz. Zeichnung einer Instanz mit der geänderten Überschrift Fresh bread daily und dem Snippet mit der Kennung WordPress, in dessen Blockmarkup dieselbe Überschrift steht.
  6. Query Loops bleiben Loops: den Eintrag gestaltest du einmal, seine Kopien sind gesperrt, die Zahl steht in „Loop count“. Zeichnung eines Query Loops in Figma: der Text Loop count mit 6, eine erste Karte mit [Post title] und [Post date] zum Gestalten und zwei ausgegraute Kopien mit dem Hinweis repeat, view only.
  7. Änderungen gehen als dieselben Blöcke zurück, als Änderung im Posteingang oder als Pattern-Entwurf im Lab. Zeichnung des Posteingangs mit Vorschau und Diff der Änderung und des Pattern Labs mit einem Pattern-Entwurf.
  8. Nichts geht von selbst live: Eine Person übernimmt die Änderung in WordPress oder lehnt sie ab. Zeichnung einer Änderung mit den Buttons Apply und Decline und einem Pfeil zur Live-Website, dem nur Apply folgt.

Warum Code Connect

Über den MCP-Server von Figma liest ein KI-Agent wie Claude ein Design. Für einen Frame ohne Zuordnung antwortet der Server mit React und Tailwind, und ein Agent, der daraus eine WordPress-Website baut, schreibt Markup, das kein Block-Theme kennt. Code Connect ordnet einer Figma-Komponente Code zu. Seit Figma Vorlagen-Dateien empfiehlt, die an kein Framework gebunden sind, kann eine Vorlage das Blockmarkup eines WordPress-Patterns ausgeben. Genau das richtet das Leitvia-Plugin für dich ein.

Eine Pattern-Bibliothek in vier Schritten

  1. Öffne im Tab Patterns des Plugins „Pattern library for Code Connect“ und wähle „Build pattern library“. Jedes Pattern des Themes und von Leitvia Pro wird eine Komponente auf der Figma-Seite „Leitvia patterns“, jeder seiner Texte eine Text-Property, benannt nach Ebene und Stelle im Pattern, zum Beispiel „Heading 0/1/0“.
  2. Veröffentliche die Datei in Figma als Bibliothek deines Teams.
  3. Füge den Link der Datei ein und wähle „Download Code Connect files“. Du bekommst leitvia-code-connect.json.
  4. Lass das Skript build-code-connect.mjs aus dem Skill leitvia-figma für KI-Agenten auf den Download laufen. Es schreibt figma.config.json und je Pattern eine Vorlagen-Datei. Danach führst du in diesem Ordner npx figma connect publish mit deinem eigenen Figma-Token aus.

Ab dann liefert get_design_context des MCP-Servers für jede Instanz der Bibliothek ein Snippet mit der Kennung WordPress: das Blockmarkup des Patterns mit den Texten dieser Instanz. Nach einem Update des Themes oder von Leitvia Pro mit neuen Patterns baust du die Bibliothek noch einmal; das Plugin ergänzt nur, was der Seite fehlt.

Der Tab Patterns des Leitvia-Plugins nach Build pattern library: Die Statuszeile meldet, dass 154 von 154 Patterns als Komponenten auf der Seite Leitvia patterns gebaut sind, und dass die Datei als Bibliothek veröffentlicht und dann die Code-Connect-Dateien geladen werden sollen; weiter unten, nach Build a pattern und Send the selection, der aufgeklappte Abschnitt Pattern library for Code Connect mit dem Button Build pattern library, dem Feld Link of this file und dem Button Download Code Connect files.
Die Pattern-Bibliothek im Plugin: Ein Durchlauf baut jedes Pattern des Themes und von Leitvia Pro als Komponente mit Text-Properties.

Was dein KI-Agent damit macht

Leitvia Pro enthält jetzt einen zweiten Skill für KI-Agenten, leitvia-figma, für Agenten, die Designs über den MCP-Server von Figma lesen. Er richtet die Bibliothek wie oben ein und gibt dem Agenten klare Regeln. Ein Snippet von Leitvia wird so übernommen, wie es ist, nur seine Texte dürfen sich ändern. Ein Frame ohne Snippet wird das passendste Pattern des Designvertrags oder ein neuer Pattern-Entwurf im Lab der Website, gebaut nur aus Blöcken und Rollen. React, Tailwind, Hex-Farben und Pixelwerte kommen nie hinein. Farben und Größen änderst du als Variablen des Designsystems im Plugin, nicht der Agent, und aus Figma geht nichts direkt live.

Loops, die Loops bleiben

Query Loops, die Eintragslisten von Leitvia Pro und Produktsammlungen zeigen Inhalte aus der Datenbank, nicht aus dem Design. Bisher hat Figma sie als leere Rahmen gezeichnet, und eine Seite mit Query Loop war gesperrt. Beides hat sich geändert.

  • Felder wie Beitragstitel, Datum oder Beitragsbild erscheinen als „[Post title]“ oder als Bildplatzhalter, und ihre Ebene trägt [data]. Sie gehen als dieselben Felder zurück, die Website füllt sie weiter.
  • Den Eintrag eines Loops gestaltest du einmal. Bis zu fünf Kopien danach sind gesperrt und zeigen nur den Rhythmus der Liste.
  • Der Text „Loop count“ enthält, wie viele Einträge der Loop zeigt. Änderst du ihn, geht der Loop mit der neuen Zahl zurück. In einem Raster geht auch die Spaltenzahl des Eintrags zurück.
  • Seiten mit Query Loop sind nicht mehr gesperrt: Du baust sie in Figma wie jede andere Seite, und der Loop kommt als dieselben Blöcke mit seiner Abfrage zurück.
  • Texte aus einer Block-Bindung, etwa eine Telefonnummer aus den Website-Werten, bleiben Daten. Sie bekommen keine Text-Property, und ihre Ebene trägt [data].
  • In Code Connect ist die Zahl der Einträge ebenfalls eine Text-Property, sodass das Snippet eines Loops die Zahl der Instanz mitbringt.

Was du brauchst und was nicht mitreist

  • Leitvia Pro Agency oder Pro Agency Unlimited und das Leitvia-Plugin in Figma.
  • Für Code Connect Figma Professional oder höher mit einem Dev- oder Full-Seat. Professional erlaubt eine Bibliothek und ein Framework; ein Team, das schon React verbunden hat, braucht für ein zweites Organization.
  • Formatierungen im Text wie Links oder Fettdruck, Bilder und Figma-Modi wie Dunkel reisen nicht im Snippet. Eine Seite, die das Plugin in einer anderen Datei baut, nutzt eigene Komponenten ohne Snippets.

Datenschutz

Für die Bibliothek lädt das Plugin die Patterns des Themes und von Leitvia Pro von leitvia.com; sie enthalten keine personenbezogenen Daten. Die Datei für Code Connect schreibt das Plugin auf deinem Rechner, wir bekommen davon nichts. Der Code-Connect-Befehl von Figma veröffentlicht die Vorlagen mit deinem eigenen Figma-Token. Details stehen in der Datenschutzerklärung.

Versionen und Anleitung

Das alles kommt mit Leitvia Pro 0.8.33 und Version 0.1.48 des Leitvia-Kontos. Die Figma-Anleitung zeigt die Schritte, das Changelog listet jede Änderung.

Ähnliche Artikel