UnHTML

So importierst du eine React- oder Vue-Website in Figma

Erfahre, wie eine CLI-Erfassung eine live React- oder Vue-App in bearbeitbare Auto-Layout-Frames in Figma verwandelt.

TUTORIALDEVELOPERVeröffentlicht

Eine React- oder Vue-Website wirkt im Browser wie eine fertige Seite, aber das HTML, das ihr Server tatsächlich sendet, ist fast leer. Importierst du sie genauso wie eine statische Seite, erfasst du nur diese leere Hülle, nicht die Seite, die ein echter Besucher sieht. Genau hier kommt die UnHTML CLI ins Spiel: Sie lässt die App zuerst laufen, wartet, bis JavaScript die Seite fertig aufgebaut hat, und erfasst dann das Ergebnis. Dieser Leitfaden zeigt, warum das Hüllen-Problem entsteht, wie die CLI es Schritt für Schritt löst, und was am Ende in Figma landet.

Warum React- und Vue-Websites einen anderen Erfassungsweg brauchen

Die meisten React- und Vue-Apps setzen auf clientseitiges Rendering. Die Aufgabe des Servers ist klein: Er sendet ein minimales HTML-Dokument und ein JavaScript-Bundle und zieht sich dann zurück. Wie MDNs Glossareintrag zu clientseitigem Rendering beschreibt, besteht eine rein clientseitig gerenderte Antwort kaum mehr als aus einem leeren Wurzel-Container und einem einzigen Verweis auf ein Skript. Der eigentliche Inhalt entsteht erst danach, im Browser, durch DOM-Manipulation. Sämtliche Logik, Datenabfrage, Templating und Routing laufen auf dem Client, wie web.devs Überblick zum Rendering im Web erklärt.

Du kannst es selbst sehen: Deaktiviere JavaScript bei einer clientseitig gerenderten App und lade sie neu. Die Seite wirkt weitgehend leblos, weil in der ersten Antwort nie viel enthalten war. Genau das ist das Problem für jedes Erfassungstool, das nur liest, was der Server geschickt hat. Es bekommt die Hülle, und die Hülle sagt fast nichts über Layout, Abstände oder Inhalt aus.

Für ein Erfassungstool bedeutet das: Eine React- oder Vue-App braucht ihr JavaScript ausgeführt, bevor die Erfassung stattfindet, nicht anstelle davon. Liest man nur den rohen Quelltext, gibt es nichts, was sich zu importieren lohnt. Lässt man die App zuerst rendern, wartet eine vollständige Seite aus Frames, Text und Bildern darauf, in Figma zu landen.

Das unterscheidet sich vom Import einer Marketingseite aus reinem HTML und CSS, bei der die Serverantwort bereits die fertige Seite enthält. Ein Erfassungstool, das nur auf Server-HTML abzielt, funktioniert dort einwandfrei und scheitert bei einer React- oder Vue-App still, indem es eine Seite fast leerer Divs statt eines Fehlers zurückgibt. Genau dieses stille Scheitern ist das eigentliche Risiko: Du merkst erst, dass die Erfassung falsch war, wenn du Figma öffnest und nichts vorfindest, womit sich arbeiten lässt.

So erfasst die UnHTML CLI eine Live-URL

Die CLI existiert genau für diesen Fall, und es ist ein einziger Befehl. Auf deiner Seite ist kein Projekt-Setup nötig:

  1. Installiere und führe den Erfassungsbefehl gegen die Live-URL aus. 
    node capture/cli/capture.js https://deine-app.beispiel.com --out scene.json
    Das richtet die CLI auf die gewünschte Seite, mit einem Ausgabepfad für das Ergebnis.
  2. Sie öffnet einen Headless-Browser gegen diese URL. Sie parst das HTML, führt dann die Skripte der Seite aus, dieselbe grundlegende Technik hinter Chromes eigenem dump-dom-Flag: 
    chrome --headless --dump-dom https://example.com
    Chrome for Developers dokumentiert das so: HTML in ein DOM parsen, jedes Skript ausführen, das es verändert, und das Ergebnis dann zurück in HTML serialisieren. Die CLI wendet diese Idee auf eine vollständige Erfassungs-Pipeline an statt auf einen einzelnen Dump.
  3. Sie wartet das Verhalten der Seite ab. Es läuft ein vollständiges Scrollen der Seite, damit Inhalte, die beim Scrollen nachladen, eine Chance bekommen, sich aufzubauen, und entfernte Ressourcen werden abgerufen, ohne auf CORS-Beschränkungen zu treffen, die eine Erfassung aus dem Browser selbst blockieren würden.
  4. Sie schreibt das Ergebnis nach scene.json. Diese Datei enthält den vollständig gerenderten DOM-Zustand, Struktur, Styles und Ressourcenverweise, bereit für den Plugin-Import.
  5. Importiere scene.json aus dem Figma-Plugin. Weil die Erfassung bereits auf der Kommandozeile stattgefunden hat, braucht das Plugin beim Import keinen Live-Netzwerkzugriff. Du importierst eine Datei, keine erneut abgerufene Seite.

Bei einer kleinen Marketingseite dauert diese ganze Sequenz Sekunden. Bei einem großen Vue-Dashboard oder einer React-App mit vielen Routen sind es dieselben fünf Schritte, nur mit mehr zum Durchscrollen und mehr Ressourcen zum Abrufen.

Ein paar Dinge lohnt es sich vor dem Ausführen des Befehls zu prüfen. Stelle sicher, dass die URL, die du erfasst, wirklich die ist, die deine App rendert, nicht ein Login-Gate oder ein Ladebildschirm davor. Die CLI erfasst den DOM-Zustand, der vorliegt, wenn sie mit dem Warten aufhört, sodass eine noch mitten im Laden befindliche Seite eine unvollständige Szene ergibt. Hängt deine App von Authentifizierung ab, erfasse eine Route, die ohne sie erreichbar ist, oder einen Zustand, den du direkt ansteuern kannst. Und weil während der Erfassung entfernte Ressourcen abgerufen werden, kann ein langsamer Bilder-Host oder eine Font-CDN bei einer inhaltsreichen Seite echte Zeit zum Durchlauf hinzufügen.

Von der CLI-Erfassung zu den Figma-Layern

Sobald scene.json in Figma ist, verwandelt das Plugin den erfassten DOM in native Layer: Frames, Text, Bilder und Vektoren, gemappt aus dem eigenen CSS der Seite.

Auto Layout ist dort, wo sich dieses Mapping am meisten zeigt. Figmas Steuerung für Richtung, Gap, Padding und Resizing folgt eng dem CSS-Flexbox-Modell, wie Figmas eigener Guide zu Auto Layout darlegt: Gap verteilt Objekte genauso wie justify-content und CSS-gap, Padding spiegelt CSS-padding, und die Resizing-Modi hug contents und fill container entsprechen inhaltsgesteuerter Größe und flex: 1. Du willst das Property-für-Property-Mapping? Sieh dir wie CSS-Flexbox auf Figma Auto Layout gemappt wird an.

Schriftarten bekommen dieselbe ehrliche Behandlung. Eine Schriftart, die lokal nicht installiert ist, wird ersetzt, standardmäßig durch Inter, und jede Ersetzung wird im Importbericht festgehalten statt still ausgetauscht. Die Mechanik dieser Ersetzung und Protokollierung wird in Figma-Schriftartersetzung behandelt.

Nicht alles lässt sich sauber mappen. Ein komplexes CSS-Grid oder ein Layout, das auf Positionierungstricks statt Flex aufbaut, kann auf absolute Positionierung statt Auto Layout zurückfallen. Das ist kein pixelgenauer Klon der Originalseite, und der Importbericht sagt das direkt, statt die Lücke zu verbergen.

CLI-Erfassung gegenüber dem Re-Rendering im Plugin

Das Plugin kann eine Seite auch mit aktivierten Skripten neu rendern, innerhalb eines sandboxed Frames, direkt beim Import. Dieser Weg existiert, ist aber optional, weil er im Moment des Imports Live-Netzwerkzugriff braucht.

Für eine schwere React- oder Vue-Anwendung ist es der zuverlässigere Weg, zuerst mit der CLI zu erfassen und anschließend scene.json zu importieren. Die Rendering-Arbeit passiert einmal, auf der Kommandozeile, mit Zeit, um Scrollen und Ressourcen-Laden abzuwarten. Das Re-Rendering im Plugin ist praktisch für einen schnellen Check auf einer leichten Seite, aber bei allem mit echter clientseitiger Komplexität ist der zweistufige CLI-Workflow das, was trägt.

Es gibt auch einen Workflow-Grund, die CLI über die Zuverlässigkeit hinaus zu bevorzugen. Eine scene.json-Datei ist portabel: Erfasse eine Route einmal, gib die Datei an ein Teammitglied weiter, oder importiere sie später erneut, ohne die Live-URL noch einmal anzusteuern. Das Re-Rendering im Plugin muss jedes Mal das Netzwerk erreichen, was bedeutet, dass jeder erneute Import davon abhängt, dass die Seite in der Zwischenzeit erreichbar und unverändert bleibt.

Layer-Limits und Preise für größere Erfassungen

Eine React- oder Vue-App kann leicht mehr Layer erzeugen als eine statische Seite, deshalb lohnt es sich, die Limits vor der Erfassung einer großen App zu kennen. Stand 21. September 2026 wendet der kostenlose Plan bereits Auto-Layout-Konvertierung an, mit einer Grenze von 500 Layern pro Import. Pro, eine einmalige Zahlung von 39 US-Dollar pro Editor, hebt dieses Layer-Limit auf und fügt Komponenten und Textstile hinzu. Studio, eine einmalige Zahlung von 119 US-Dollar, lizenziert Pro für bis zu fünf Editoren. Alle Stufen enthalten ein Jahr an Updates. Prüfe die Preise direkt auf unhtml.pro nach, bevor du kaufst, da sie sich ändern können.

Fazit

Der Grund, warum eine React- oder Vue-Website die CLI braucht, lässt sich auf eine Tatsache zurückführen: Der Server sendet kaum etwas, und die eigentliche Seite existiert erst, nachdem JavaScript gelaufen ist. Die CLI löst das, indem sie den live gerenderten DOM in scene.json erfasst, sodass das Figma-Plugin eine vollständige Seite zum Importieren hat statt einer leeren Hülle. Von dort an läuft der Workflow wie bei jeder anderen Erfassung: Auto Layout aus CSS gemappt, Schriftarten ersetzt und protokolliert, und ein Importbericht, der genau zeigt, wo die Konvertierung gehalten hat und wo nicht.