Frontender

Sie markieren eine Ebene oder eine ganze Gruppe, und das Plugin schreibt den Code dafür. Es gibt keinen Einrichtungsassistenten und keine Etiketten, die vorher gesetzt werden müssen. Das ist der Kern des Werkzeugs, und deshalb fühlt es sich eher wie ein Junior-Entwickler an als wie ein Exportdialog.

Zur Wahl stehen nur CSS, nur CSS-in-JS, nur Tailwind, HTML mit CSS, HTML mit Tailwind, JSX mit CSS-in-JS und JSX mit Tailwind. Wer einen CSS-Generator für eine alte Seite braucht und wer einen JSX-Generator für eine React-App sucht, nutzt dasselbe Plugin und muss kein zweites Werkzeug installieren.

Frontender versteht Tailwind-Klassen, nicht nur rohes CSS. Sie fügen Ihre Konfiguration ein, und er schreibt mit Ihren Klassennamen und greift zu willkürlichen Werten, wenn Ihre Skala nichts Passendes hat. Im Ablauf Figma zu Tailwind bleibt das Markup damit nah an dem, was Ihr Team von Hand schreiben würde.

Das Plugin hängt nicht von Autolayout oder sauber benannten Ebenen ab. Es leitet Reihenfolge, Hierarchie und Bedeutung selbst ab, sodass eine Datei von drei Designern noch eine brauchbare Struktur ergibt. Wer vor dem Export schon einmal aufgeräumt hat, merkt den Unterschied.

Die bezahlten Tarife liefern zusätzlich Komponenten für React und Vue, Sie erhalten also ein wiederverwendbares Bauteil statt eines flachen Blocks Markup. Das verkürzt den Schritt von der Übergabe Figma zu React bis zu etwas, das sich in ein Repository importieren lässt. Die kostenlose Stufe bleibt bei den einfachen Formaten.

Der Code erscheint im Panel, während das Plugin arbeitet, und die Autokopie legt das Ergebnis in die Zwischenablage, ohne dass Sie einen Knopf suchen. Kleine Erleichterungen, die die wiederholten Klicks bei einer Serienumwandlung sparen.