Seiten von WordPress nach Figma und zurück

Ganze Seiten wandern jetzt von einer WordPress-Website nach Figma und zurück. Du bearbeitest sie in Figma, die Website bekommt das Ergebnis als eine Änderung im Posteingang, und dort entscheidet ein Mensch. Dieser Beitrag fasst die Releases dahinter zusammen: Theme Leitvia 1.2.9, Studio 1.3.9, Skills 1.4.11, Pro 0.8.4, das Figma-Plugin und das Leitvia-Konto.

Eine Seite in neun Schritten von WordPress nach Figma und zurück. Das Video hat keinen Ton; das Transkript darunter enthält den Text jeder Szene.

Transkript des Videos

Eine Seite auf einer WordPress-Website: die Startseite der SaaS-Demo auf demo.leitvia.com. Screenshot der Startseite von Tidepost mit Überschrift, Buttons und einem Produkt-Screenshot.
In der Seitenliste schickt „An Figma senden“ die ganze Seite an dein Leitvia-Konto. Zeichnung der Seitenliste in WordPress, die Zeilenaktion „An Figma senden“ an einer Seite und ein Pfeil zum Leitvia-Konto.
In Figma listet das Leitvia-Plugin die Seiten deiner Websites unter Pages. Screenshot des Plugins, Tab Pages: Das Designsystem Tidepost ist verbunden, vier Seiten von drei Websites warten darauf, gebaut zu werden.
„Build page“ zeichnet sie in einem Frame mit 1440 Pixeln Breite, jedes Pattern als Hauptkomponente. Zeichnung des Seiten-Frames, seiner Abschnitte als Instanzen und ihrer Hauptkomponenten auf der Figma-Seite „Leitvia patterns“.
Texte änderst du auf der Seite, das Aussehen in den Hauptkomponenten, Farben und Größen in den Variablen. Zeichnung der drei Stellen: eine geänderte Überschrift auf der Seite, eine geänderte Hauptkomponente und eine geänderte Farbvariable.
„Review changes“ sortiert deine Änderungen nach Designsystem, Patterns und Seite, offene Werte zuerst. Screenshot der Prüfung: eine geänderte Variable, ein geändertes Pattern, drei Änderungen auf der Seite und ein Abstand von 28 Pixeln ohne Variable, mit spacing/l (32) als Vorschlag.
Die Seite kommt als eine Änderung im Posteingang an, geänderte Patterns als Entwürfe im Pattern Lab. Zeichnung des Posteingangs mit Vorschau und Diff der Änderung und des Pattern Lab mit einem Pattern-Entwurf.
Nichts geht von allein live: Ein Mensch ü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.
Zurück in Figma zeigt das Plugin für jede Seite, ob sie gesendet wurde, wartet, übernommen oder abgelehnt wurde. Screenshot von „Sent from Figma“ im Plugin: Home übernommen, Pricing wartet im Posteingang, Features abgelehnt mit Begründung.

Seiten von WordPress nach Figma

In den Listen der Seiten und Beiträge schickt „An Figma senden“ eine ganze Seite an dein Leitvia-Konto, auf Wunsch mit Bildern, verkleinert auf 1200 Pixel. In Figma listet das Leitvia-Plugin die Seiten deiner Websites unter Pages und baut die gewählte in einem Frame mit 1440 Pixeln Breite. Jedes Pattern der Seite wird eine Hauptkomponente auf der Figma-Seite „Leitvia patterns“, und die Seite nutzt Instanzen davon. Änderst du ein Pattern, zeigt sich das auf jeder Seite, die es nutzt.

Passt das Designsystem der Seite nicht zur Datei, fragt das Plugin zuerst nach. Du kannst die Version laden, die die Seite nutzt, die Seite so bauen, wie die Website mit ihren eigenen Werten aussieht, oder sie mit den Variablen der Datei bauen. Bevor es etwas baut, prüft das Plugin, ob die Schriften der Seite in Figma verfügbar sind, und sagt dir, welche fehlen.

Raster, Inhaltsbreiten und das Seitenverhältnis von Bildern folgen der Website. Eine Tabelle und jeder andere Block, für den Figma keine Ebene hat, erscheint so, wie die Website ihn darstellt, als gesperrte Ansicht. Diese Blöcke änderst du in WordPress; aus Figma gehen sie nie zurück.

Änderungen gehen als Änderung in den Posteingang zurück

„Review changes“ vergleicht eine gebaute Seite mit dem, was die Website gesendet hat, und sortiert das Ergebnis in drei Gruppen. Geänderte Variablen werden eine neue Version des Designsystems. Geänderte Hauptkomponenten gehen als Pattern-Entwürfe ins Pattern Lab der Website. Geänderte Texte, neue oder umgebaute Abschnitte und die Reihenfolge der Abschnitte werden eine Änderung im Posteingang von Leitvia Studio, mit Vorschau, Diff und Zurücksetzen.

Eine Seite aus Figma ist immer eine Änderung im Posteingang, auch wenn die Autonomie des Bereichs auf Autonom steht. Zurück kommt nur Markup, das die Website gesendet hat, geprüft über seinen Hash, und neue Abschnitte müssen dieselbe Sicherheitsprüfung bestehen wie alles, was ein KI-Agent schreibt. Freie Werte, die zu keiner Variable passen, stehen ganz oben, mit der nächstliegenden Variable als Vorschlag, und gesendet wird erst, wenn über jeden entschieden ist.

„Review all pages“ prüft alle gebauten Seiten der Datei in einem Durchgang. Jede Seite geht als eigene Änderung an ihre eigene Website.
„Take into main component“ überträgt Stiländerungen an einer Instanz, etwa eine Füllung, eine Schrift oder einen Abstand, in die Hauptkomponente, damit sie jede Seite erreichen. Texte bleiben auf der Seite.
Der Statusverlauf zeigt für jede Seite und jeden Pattern-Entwurf, ob sie gesendet wurden, im Posteingang oder im Lab warten, übernommen oder abgelehnt wurden, mit Begründung. Der Posteingang der Website listet, was aus Figma kam.

Designsysteme mit Versionen

Eine Figma-Datei gehört zu einem Designsystem, dem beliebig viele Websites folgen können. Das Plugin führt es als Figma-Variablen. „Save version“ prüft die Kontrastpaare von Studio in jedem Mode und speichert nicht, solange eines durchfällt. Speichern ändert keine Website. Nur Besitzer und Admins eines Teams geben eine Version für die Websites frei, die sie anhaken; jede Website bekommt sie dann bei ihrer nächsten Prüfung als Änderung im Posteingang.

Das Plugin selbst ist jetzt einfacher. Es hat vier Tabs in der Reihenfolge der Arbeit, Pages, Patterns, Design system und Account, oben eine Zeile mit dem nächsten Schritt, eine Hauptaktion je Abschnitt und die selten gebrauchten Optionen eingeklappt. Die Anleitung zu Figma führt Schritt für Schritt hindurch.

Die Leitvia-Verbindung

In Leitvia Pro heißt der Bildschirm „Design system hub“ jetzt „Leitvia connection“. Er zeigt, wann die Website als Nächstes abgleicht, und hat einen Button „Jetzt abgleichen“. Die Website gleicht stündlich ab, solange eine Änderung wartet oder etwas aus Figma offen ist, sonst zweimal am Tag.

„Als Designsystem speichern“ legt das aktive Token-Set der Website in deinem Leitvia-Konto ab, als neues Designsystem oder neue Version, ohne es freizugeben. Die Website folgt ihm danach. Du lädst das Token-Set also nicht mehr herunter und im Konto wieder hoch. Eine Website, die noch keinem Designsystem folgt, speichert auf dieselbe Weise eines beim ersten „An Figma senden“. So baut eine neue Figma-Datei die Seite ohne Rückfrage mit den Variablen der Website.

Sicherheit

Jede Website bekommt bei ihrer ersten Aktivierung ein eigenes Website-Token und nutzt es für die Leitvia-Verbindung, Flottenberichte und Figma, nie den Zugangsschlüssel des Teams. Nach dem Update von Leitvia Pro speicherst du den Lizenzschlüssel einmal, damit die Website ihr Token bekommt.
KI-Agenten, die mit der Flotte arbeiten, nutzen eigene Agent-Tokens, die pro Person auf der Kontoseite Flotte angelegt werden und auf die Rolle dieser Person beschränkt sind.
Ein Designsystem erreicht eine Website nur in der Version, die dein Team ausgerollt hat. Eine später gespeicherte Version, von einem Mitglied oder aus Figma, wartet auf die Freigabe durch einen Besitzer oder Admin.
Bei der Anmeldung im Figma-Plugin gibst du den Code ein, den das Plugin zeigt. „An Figma senden“ braucht das Recht, das Theme zu bearbeiten, und ein Pattern aus Figma geht nur an die Websites, die du anhakst.
Besitzer und Admins können den Zugangsschlüssel des Teams im Konto unter Lizenz nach Eingabe ihres Passworts erneut anzeigen. Jede Anzeige wird mit Person und Zeitpunkt protokolliert.

Nichts aus Figma geht von allein live. Es wartet immer, bis jemand es in WordPress übernimmt.

Datenschutz

Das Figma-Plugin spricht nur mit leitvia.com. Die Website behält ihre Inhalte und Patterns, dein Leitvia-Konto die Versionen des Designsystems, und Figma ist nur der Ort, an dem du daran arbeitest. Bilder aus Figma gehen nicht zurück an die Website. Die Datenschutzerklärung beschreibt, was das Konto unterwegs für jede Seite und jedes Pattern speichert.

Theme, Studio und Branchen-Kits

Leitvia 1.2.9 zeigt seinen Fokusring an einem Video, solange eines der Bedienelemente des Videos den Fokus hat.
Leitvia 1.2.8 setzt kleinen Metatext in 14 statt 13 Pixeln, und Überschriften erzwingen nicht mehr die feinste optische Größe einer variablen Schrift, deren Haarlinien auf Smartphones zerfielen.
Seit Leitvia 1.2.3 hat das Theme drei neue Header-Patterns, mit Button, mit einer Serviceleiste für Öffnungszeiten und Telefon und mit dem Logo in der Mitte, dazu zwei neue Hero-Patterns.
Leitvia Studio 1.3.8 listet im Posteingang die Farben und Schriften, die eine Änderung der globalen Stile berührt, mit ihren Werten vorher und nachher, statt nur JSON zu zeigen. In 1.3.9 bleiben Patterns im Entwurf oder in Prüfung aus dem Block-Inserter heraus; das Pattern Lab zeigt sie weiter.
Die Branchen-Kits von Leitvia Pro beginnen mit eigenem Header und eigenem Einstieg: Kanzlei und Restaurant mit dem Logo in der Mitte, Handwerk und Arztpraxis mit einer Serviceleiste über dem Header, das Restaurant mit einem Foto-Slider, SaaS, Behörde und Verein mit einem Button für die Hauptaktion im Header. Die Kits brauchen Leitvia 1.2.3 und Leitvia Studio 1.3.4.

So fängst du an

Auf jeder Website ist Leitvia Pro mit Pro Agency oder Pro Agency Unlimited unter Leitvia Studio, Leitvia connection verbunden.
Starte in Figma das Leitvia-Plugin in einer Design-Datei und wähle „Sign in with Leitvia“. Du bestätigst einen Code in deinem Leitvia-Konto; sonst verlässt nichts deinen Rechner.
Wähle in WordPress in der Liste der Seiten oder Beiträge „An Figma senden“.
Wähle im Plugin die Seite unter Pages und dann „Build page“.
Ändere die Seite in Figma, wähle dann „Review changes“ oder „Review all pages“ und, wenn die Zusammenfassung stimmt, „Send to sites“.
Öffne auf der Website den Posteingang von Leitvia Studio, prüfe Vorschau und Diff und übernimm die Änderung. Vorher geht nichts live.

Figma Design im Browser oder in der Desktop-App funktioniert mit jedem Figma-Tarif; hell und dunkel als zwei Modes brauchen einen kostenpflichtigen Figma-Tarif. Die Doku zum Figma-Plugin beschreibt jeden Schritt, die Grenzen und was nie aus Figma zurückgeht.

Was kostenlos ist und was Pro

Das Theme, Leitvia Studio und die Skills bleiben kostenlos. Die Leitvia-Verbindung und die Branchen-Kits gehören zu Leitvia Pro. Das Figma-Plugin, das Senden von Seiten an Figma und alles, was von dort zurückkommt, brauchen Pro Agency oder Pro Agency Unlimited. Die Preisseite listet die Tarife, und das Changelog enthält jede Änderung jedes Releases.