Figma-Plugin

Arbeite in Figma am Designsystem, an den Patterns und an ganzen Seiten deiner Websites und schick die Änderungen zurück. Was live geht, entscheiden deine Websites.

Ein Kunde, ein Designsystem, eine Figma-Datei

Führe ein Designsystem pro Kunde und eine Figma-Datei pro Designsystem. Alle Websites dieses Kunden folgen dem Designsystem, die Datei dient also jeder von ihnen. Modes in Figma bleiben Farbschemata wie hell und dunkel; einen Mode pro Website gibt es nicht. Das Plugin listet zuerst die Websites, die dem Designsystem der Datei folgen, und alle anderen unter „Other sites“.

Voraussetzungen

• Ein Leitvia-Konto mit Pro Agency oder Pro Agency Unlimited. Jede Person im Team kann sich anmelden; nur Besitzer und Admins geben Versionen frei.
• Figma Design im Browser oder in der Desktop-App, mit beliebigem Figma-Tarif. Mehr als ein Mode, zum Beispiel hell und dunkel, braucht einen kostenpflichtigen Figma-Tarif.
• Websites mit Leitvia Pro und einer aktiven Lizenz für Pro Agency oder Pro Agency Unlimited. Unter Leitvia Studio, Sync, Tab Leitvia account zeigt jede Website ihre nächste Prüfung und hat einen Button „Check now“.

Installieren und anmelden

Installiere Leitvia aus der Figma Community und starte es in einer Design-Datei. Wähle „Sign in with Leitvia“. Das Plugin zeigt einen Code und öffnet dein Leitvia-Konto im Browser. Die Seite sagt dir, wann diese Anmeldung gestartet wurde; gib den Code aus Figma ein und wähle „Link Figma“. Gib nie einen Code ein, den dir jemand geschickt hat. Geh zurück zu Figma, das Plugin meldet sich innerhalb weniger Sekunden an.

Eine Anmeldung gilt 14 Tage. Dein Leitvia-Konto listet jede Anmeldung unter Design systems, Abschnitt Figma plugin. Dort kannst du eine widerrufen, wenn ein Gerät verloren geht oder jemand das Team verlässt.

Die sechs Schritte

Das Plugin öffnet sich auf „Pages“ und zeigt oben in den Tabs Pages, Patterns und Design system eine Zeile „Next step“. So weißt du immer, was als Nächstes kommt.

1. Eine Seite an Figma senden

Öffne in WordPress Seiten oder Beiträge und wähle in der Zeile der Seite „An Figma senden“; „Mit Bildern an Figma senden“ nimmt die Bilder aus der Mediathek mit, verkleinert auf 1200 Pixel. Ein Pattern sendest du aus dem Lab, Panel Figma. Eine Website, die noch keinem Designsystem folgt, speichert beim ersten „An Figma senden“ ihr Token-Set als Designsystem, benannt nach der Website. Weitere Vorbereitung brauchst du nicht.

2. Die Seite bauen

Wähle im Plugin unter „Pages“ die Seite und dann „Build page“; steht sie noch nicht in der Liste, wähle „Refresh list“. In einer Datei ohne Leitvia-Variablen lädt das Plugin zuerst das Designsystem der Website. Enthält die Datei ein anderes Designsystem oder eine andere Version, fragt das Plugin nach: „Load version N“ lädt die Version, die auf der Website läuft, „Build as the site looks“ übernimmt Farben und Schriften der Website als feste Werte, und „Use this file’s design“ nutzt die Variablen der Datei. Seiten von Websites, die dem Designsystem der Datei folgen, stehen oben; alles andere steht unter „Other sites“.

Du bekommst einen Frame mit 1440 Pixeln Breite. Abschnitte, die ein Pattern nutzen, sind Instanzen einer Hauptkomponente auf der Figma-Seite „Leitvia patterns“. Teile, die Figma nicht zeichnen kann, etwa Query Loops, Navigation, Shop, Formulare oder Blöcke anderer Plugins, erscheinen als gesperrte Ansicht mit dem Namen „view only“. Innerhalb eines Abschnitts erscheint eine Tabelle oder ein anderer Block, für den das Plugin keine Form hat, als gesperrte Ansicht davon, wie die Website ihn darstellt. Bilder behalten das Seitenverhältnis ihres Blocks. Ist eine Schrift der Website nicht installiert, listet das Plugin sie mit einem Link zu Google Fonts und baut nur, wenn du dich dafür entscheidest.

3. Gestalten

Texte änderst du direkt auf der Seite. Das Aussehen eines Patterns änderst du in seiner Hauptkomponente, dann folgt jede Seite mit diesem Pattern. Farben, Größen und Abstände änderst du in den Variablen: die Werte, nicht die Namen, denn die Namen sind die Rollen, die Websites kennen. Hast du das Aussehen stattdessen auf der Seite geändert, listet die Prüfung diese Instanz mit „Take into main component“. Ohne diesen Schritt bleiben Stiländerungen an einer einzelnen Instanz in Figma.

4. Änderungen prüfen und senden

Wähle den Frame der Seite aus und dann „Review changes“, oder „Review all pages“ für alle Seiten der Datei, die mit Leitvia gebaut wurden. Das Plugin gruppiert, was sich geändert hat:

• Designsystem: die Variablen, die von der verbundenen Version abweichen. Sie werden als nächste Version gespeichert.
• Patterns: geänderte Hauptkomponenten. Jede wird zu einem Pattern-Entwurf im Lab der Website, von der die Seite kam.
• Seite: geänderte Texte, Reihenfolge und Abschnitte. Sie gehen als eine Änderung in den Posteingang der Website, von der die Seite kam.

Zuerst kommen die „Values to decide“: Werte, die keine Variable nutzen. Übernimm jeweils die Variable, die das Plugin vorschlägt, oder ignoriere den Wert. „Send to site“, nach „Review all pages“ „Send to sites“, erledigt dann alles in einem Durchgang und meldet das Ergebnis für jede Gruppe; schlägt eine Gruppe fehl, hält das die anderen nicht auf. Um einen einzelnen Frame als Pattern-Entwurf zu senden, wählst du ihn aus und nutzt „Send to sites“ unter „Patterns“.

5. In WordPress übernehmen

Jede Website holt bei ihrer nächsten Prüfung ab, was für sie bestimmt ist. Der Tab Leitvia account zeigt den Zeitpunkt der nächsten Prüfung. Solange zwischen Website und Figma etwas offen ist, prüft die Website stündlich, sonst zweimal am Tag, und „Check now“ holt sofort ab. Unter Leitvia Studio, Agents, Tab Inbox listet der Hinweis „From Figma“, was angekommen ist. Öffne eine Änderung, sieh dir Vorschau und Unterschiede an und wähle dann Apply oder Decline. Eine Änderung aus Figma wartet immer im Posteingang, egal, was die Autonomie-Einstellungen sagen; eine übernommene Änderung lässt sich dort zurücksetzen. Pattern-Entwürfe stehen auf keiner Seite, bis jemand sie im Pattern Lab freigibt und platziert.

6. Den Status verfolgen

Jede Seite und jedes Pattern, das aus Figma gesendet wurde, hat einen Status: gesendet, wartet im Posteingang (bei einem Pattern: Entwurf im Lab), dann übernommen (freigegeben) oder abgelehnt, jeweils mit Zeitpunkt und einem Link zur Website. Das Plugin listet ihn unter „Sent from Figma“ in den Tabs Pages und Patterns; Besitzer und Admins sehen ihn außerdem unter Fleet im Leitvia-Konto. Eine abgelehnte Änderung nennt den Grund, den die Website angegeben hat.

Designsystem und Freigabe

Unter „Design system“ wählst du das Designsystem der Datei und „Connect this file“. Das Plugin legt eine Variable pro Rolle an, zum Beispiel color/surface, fontSize/body oder spacing/m, einen Effektstil pro Schatten und einen Textstil pro Schriftgröße. Die oberste Zeile sagt, welches Designsystem die Datei enthält, in welcher Version und wie viele Websites ihm folgen, zum Beispiel „Brand · Design system v7 · 2 sites“. Gibt es eine neuere Version, heißt der Button „Update to version N“.

„Check contrast“ prüft die Farbpaare von Leitvia Studio gegen WCAG 2.2 AA. „Save version“ speichert die Variablen als nächste Version in deinem Leitvia-Konto; solange ein Farbpaar durchfällt, wird nichts gespeichert, und keine Website ändert sich. Ein neues Designsystem beginnst du unter „Start a new design system“ mit einem Namen und „Create design system“, oder in WordPress mit „Save as design system“ unter Leitvia Studio, Sync, Tab Leitvia account.

Besitzer und Admins deines Teams geben eine gespeicherte Version unter „Design system“ im Plugin oder unter Fleet im Leitvia-Konto frei: Version und Websites wählen. Gib zuerst für eine Website frei, prüfe sie dort und gib dann für den Rest frei; zum Zurücksetzen gibst du eine frühere Version frei. Mitglieder sehen „Waiting for release by an admin“, und das Leitvia-Konto führt eine solche Version als „Saved, not released“. Jede Website bekommt eine freigegebene Version als Änderung in ihrem Posteingang.

Code Connect und KI-Agenten

Arbeitest du mit dem MCP-Server von Figma und einem Agenten wie Claude, verbinde die Leitvia-Patterns über Code Connect. Dev Mode und der MCP-Server zeigen dann statt React-Code das Blockmarkup eines Patterns mit den Texten seiner Instanz. Du brauchst Figma Professional oder höher mit einem Dev- oder Full-Seat; Professional erlaubt eine Bibliothek und ein Framework.

1. Öffne im Tab Patterns „Pattern library for Code Connect“ und wähle „Build pattern library“. Jedes Pattern des Themes und von Leitvia Pro wird eine Komponente mit Text-Properties auf der Figma-Seite „Leitvia patterns“.
2. Veröffentliche die Datei als Bibliothek deines Teams.
3. Füge den Link der Datei ein und wähle „Download Code Connect files“.
4. Lass das Skript build-code-connect.mjs aus dem Skill leitvia-figma von Leitvia Pro auf den Download laufen, danach npx figma connect publish in dem Ordner, den es geschrieben hat.

Der Skill leitvia-figma gibt deinem Agenten die Regeln: Ein Snippet von Leitvia wird so übernommen, wie es ist, ein Frame ohne Snippet wird das passendste Pattern oder ein neuer Pattern-Entwurf im Lab, und Werte sind nur Rollen des Designsystems. Aus Figma geht nichts direkt live.

Loops und Daten

Query Loops, Eintragslisten und Produktsammlungen kommen in Figma als das an, was sie sind. Felder wie der Beitragstitel oder das Beitragsbild erscheinen als „[Post title]“ oder als Bildplatzhalter, und ihre Ebene trägt [data]. Den Eintrag eines Loops gestaltest du einmal; seine Kopien sind gesperrt und zeigen nur den Rhythmus. Der Text „Loop count“ enthält, wie viele Einträge der Loop zeigt: Änderst du ihn, übernimmt die Website die neue Zahl. In einem Raster geht auch die Spaltenzahl des Eintrags zurück. Die Felder bleiben Felder, die Website füllt sie weiter mit ihren Beiträgen, Terminen oder Produkten.

Was nicht übertragen wird

• Bilder aus Figma. Die Website behält ihre Bilder; neue Abschnitte bekommen graue Platzhalter und weisen darauf hin.
• Formatierungen im Text wie Links oder Fettdruck in einem Text, den du geändert hast. Die Änderung im Posteingang nennt jeden dieser Fälle.
• Gesperrte Teile einer Seite wie Navigation oder Formulare. Sie kommen genau so zurück, wie die Website sie gesendet hat.
• Farben außerhalb von sRGB. Sie kommen als nächstliegende sRGB-Farbe an.

Abkürzungen in Figma

Das Plugin hat vier Tabs in der Reihenfolge der Arbeit: Pages, Patterns, Design system und Account. Jeder hat eine Statuszeile und eine kurze „Help“, und alle außer Account beginnen mit der Zeile „Next step“. Im Menü Plugins bietet Leitvia Open Leitvia, Design system, Build page, Review changes, Review all pages, Send selection to sites und Build pattern library. Ebenen, die das Plugin gebaut hat, tragen einen Button im Eigenschaften-Panel: „Review changes“ an einer Seite, „Send to sites“ an einem Pattern. Im Dev Mode liest das Plugin nur; bauen, verbinden, speichern und senden geht im Design Mode.

Datenschutz

Das Plugin spricht nur mit leitvia.com. Es sendet die Variablen des Designsystems, deine Notiz und, wenn du einen Frame oder eine Seite sendest, deren Struktur und Texte, sonst nichts aus der Datei. Eine aus WordPress gesendete Seite enthält ihre Struktur, Texte und, nur wenn du es auswählst, verkleinerte Bilder. Dein Leitvia-Konto bewahrt eine Seite oder ein Pattern auf, bis die Website es abgeholt hat, danach nur eine Statuszeile mit den Zeitpunkten und dem Grund, den die Website angegeben hat, alles höchstens 90 Tage lang. Das Anmelde-Token bleibt im lokalen Speicher von Figma auf deinem Gerät; das Konto speichert davon nur einen Hash. Die Code-Connect-Dateien sind ein Download auf deinem Rechner; das Plugin sendet dafür nichts, und der Code-Connect-Befehl von Figma veröffentlicht sie mit deinem eigenen Figma-Token. Details stehen in der Datenschutzerklärung.