UnHTML gegen Screenshot plus Bild-Nachzeichnung: Was du wirklich bekommst

Was "Screenshot plus Nachzeichnung" wirklich bedeutet

"Nachzeichnen" meint in Figma meist eine von zwei Sachen: die eingebaute Vectorize-Funktion oder ein Community-Tracer-Plugin. Beide starten am gleichen Punkt, einem flachen Bild. Beide liefern das gleiche Ergebnis: Vektorgeometrie.

Figmas eigene Vectorize-Funktion verwandelt ein statisches Bild in editierbare Vektorebenen, aber die Dokumentation rahmt das um handgezeichnete Symbole, Schriftzüge und Illustrationen, nicht um UI-Screenshots. Man markiert ein Bild, öffnet More in der sekundären Toolbar und wählt Vectorize. Nirgends in Figmas eigener Beschreibung ist von Textebenen oder Auto Layout die Rede, die dabei herauskommen. Die Warnung ist eindeutig: komplexe oder niedrig aufgelöste Bilder lassen sich womöglich schlecht vektorisieren. Ein Screenshot einer textlastigen Webseite kommt diesem Worst Case ziemlich nahe.

Community-Plugins wie Image Tracer erledigen dieselbe Aufgabe mit einer anderen Oberfläche: Bitmap rein, skalierbare Vektorpfade raus. Diese Tools arbeiten rein mit Pixeldaten. Sie haben kein Konzept vom ursprünglichen DOM der Seite, von ihrem CSS, oder davon, welche Pixel einmal ein Textabsatz waren und welche ein dekoratives Icon. Eine Überschrift und ein Schlagschatten werden gleichermaßen zu nachgezeichneter Geometrie, und keines von beiden ist Text, den man auswählen, bearbeiten oder neu umbrechen kann.

Was KI-Screenshot-Tools dazugeben

Eine neuere Kategorie sitzt zwischen reinem Nachzeichnen und einem echten Import: KI-gestützte Screenshot-zu-Design-Plugins. image.to.design etwa nimmt einen Screenshot und lässt ihn von einem Modell verarbeiten, das Text extrahiert, Ebenen sinnvoller benennt als "Rectangle 17", Auto-Layout-Gruppen anlegt und versucht, Komponenten wie Buttons, Navigationsleisten und Karten zu erkennen.

Das ist ein echter Schritt nach vorn gegenüber einem Tracer-Plugin, und das sei fair gesagt: für ein schnelles Mockup einer fremden Oberfläche, oder eine Referenz, die man ohnehin von Hand neu zeichnen will, kann diese abgeleitete Struktur echte Zeit sparen. Aber es arbeitet weiterhin mit einem flachen Abbild der Seite, zusammengesetzt, nachdem jeder CSS-Wert, der dieses Abbild erzeugt hat, bereits verschwunden ist. Das Tool rekonstruiert Abstände, Farbe und Layout aus Pixeln und einer trainierten Vermutung, nicht aus den Werten, die der Browser tatsächlich verwendet hat. Die eigene Beschreibung von div.RIOTS sagt es selbst: komplexe oder ungewöhnliche Designs brauchen womöglich manuelle Nacharbeit.

Textextraktion speziell ist noch immer nichts, was Figma nativ beherrscht. Eine seit Langem offene Feature-Anfrage im eigenen Figma-Forum nach eingebautem OCR liegt seit April 2024 vor, mit einer Antwort, die sich auf "wir geben das ans Team weiter" beschränkt. Die neueste Aktivität verweist weiterhin auf Drittanbieter-Plugins. Willst du heute Text aus einem Screenshot in Figma bekommen, verlässt du dich auf die Vermutung eines Plugin-Modells, nicht auf eine eingebaute Fähigkeit.

Diese Vermutung kann auf Weisen danebenliegen, die zählen. OCR liest, wie die Pixel aussehen, nicht was im Markup steht, und kann dir deshalb nicht sagen, dass eine Überschrift eigentlich ein <h2> in einem Flex-Container mit 24px Gap war, oder dass ein Preis ein Live-Wert aus einer Vorlage war statt statischer Text. Die rekonstruierte Figma-Datei sieht auf den ersten Blick oft richtig aus, und für ein einmaliges Mockup reicht das meistens. Aber jede Zahl, die sie zeigt, Abstand, Eckenradius, Zeilenhöhe, ist eine Schätzung, zu der das Modell beim Betrachten eines Bildes gekommen ist, kein Wert, den es von der Seite abgelesen hat.

Was UnHTML stattdessen erfasst

UnHTML überspringt den Screenshot-Schritt komplett. Es liest das live DOM und CSS der Seite und baut Frames, Text, Bilder, Vektoren und Auto Layout direkt aus dem, was der Browser tatsächlich gerendert hat. Text kommt als Text an, weil es Text auf der Seite war. Auto Layout stammt aus den echten Flexbox- und Grid-Regeln der Seite, nicht aus der Vermutung eines Modells, wo die Abstände wohl liegen.

Das kostenlose Plugin importiert bis zu 500 Ebenen pro Seite, mit absoluter Positionierung. Pro hebt dieses Limit auf und fügt Auto-Layout-Konvertierung hinzu, für 39 $ einmalig pro Editor. Studio erweitert eine Pro-Lizenz auf fünf Editoren für 119 $ einmalig. Standardmäßig stellt der Import keine einzige Netzwerkanfrage, nichts verlässt deinen Rechner, und das Nachladen externer Ressourcen ist ein ausdrückliches Opt-in, das man selbst einschalten muss.

Wo UnHTML weiterhin auf einen Fallback zurückgreift

Nichts davon macht den Import pixelgenau, und das behauptet es auch nicht. Ist eine auf der Seite verwendete Schrift lokal nicht installiert, ersetzt UnHTML sie, standardmäßig durch Inter, und protokolliert jede Ersetzung im Importbericht, damit du genau weißt, was sich geändert hat. Ist das Layout eines Abschnitts zu komplex für ein sauberes Auto-Layout-Mapping, greift es von selbst auf absolute Positionierung zurück, statt eine kaputte Struktur zu erzwingen. Fidelitätsgrenzen sind der ehrliche Tausch dafür, mit der echten Struktur der Seite zu arbeiten statt mit einem Abbild davon. Siehe wie fehlende Schriften ersetzt und protokolliert werden für die Schriftseite dieses Tauschs im Detail.

Entscheidend ist, was der Fallback bewahrt, verglichen mit der Nacharbeit eines Screenshot-Tools. Greift UnHTML auf absolute Positionierung zurück, ist der Text weiterhin echter Text, die Farben sind weiterhin die echten CSS-Werte der Seite, und der Importbericht sagt dir genau, welcher Frame zurückgefallen ist und warum. Die Nacharbeit eines Screenshot-Tools dagegen ist manuell: du bist es, der bemerken muss, dass das Padding eines Buttons falsch aussieht, und es von Auge korrigieren muss, weil nie ein CSS-Wert dahinterstand, den man hätte ablesen können.

Das richtige Tool für die Aufgabe wählen

Die beiden Ansätze konkurrieren eigentlich nicht um denselben Job. Vectorize und Tracer-Plugins eignen sich für statische Referenzkunst: ein Moodboard-Bild, einen annotierten Konkurrenz-Screenshot, Kunst, die man nie funktional nachbauen will. KI-Screenshot-Tools gehen einen Schritt weiter, nützlich für ein schnelles Mockup, wenn das Ergebnis nicht dem echten CSS der Quelle entsprechen muss.

Eine editierbare Struktur, die man tatsächlich neu gestalten oder nachbauen will, ist eine andere Aufgabe, und genau dafür sind UnHTML und andere strukturlesende Tools gebaut. Der Unterschied wird schärfer, sobald man konkrete Tools vergleicht: siehe in welche Richtung die Konvertierung tatsächlich läuft dafür, wie sich das gegenüber Anima zeigt, und Design zu Code und Web zu Design sind nicht derselbe Job dafür, warum ein Tool, das für den Weg von Design zu Code gebaut ist, nicht automatisch auch rückwärts gut funktioniert.

Häufig gestellte Fragen

Kann Figmas eingebaute Vectorize-Funktion einen Screenshot in ein funktionierendes UI-Design verwandeln?

Vectorize ist für statische Kunst wie handgezeichnete Symbole, Schriftzüge und Illustrationen gebaut. Es verwandelt ein Bild in Vektorpfade, aber Figmas eigene Dokumentation beschreibt nicht, dass dabei Textebenen, Frames oder Auto Layout entstehen, und warnt, dass komplexe oder niedrig aufgelöste Bilder sich womöglich schlecht vektorisieren lassen. Ein Screenshot einer Webseite ist genau der komplexe, textlastige Fall, für den es nicht gebaut ist.

Erzeugen KI-Screenshot-zu-Figma-Plugins echten, editierbaren Text?

Manche schon, mit Einschränkungen. Plugins wie image.to.design führen OCR und Layout-Inferenz über das flache Bild aus und können Text extrahieren sowie Auto-Layout-Gruppen erraten, was gegenüber reinem Nachzeichnen ein echter Fortschritt ist. Aber es ist eine Rekonstruktion aus Pixeln, erstellt nachdem die echten CSS-Werte der Seite bereits verschwunden sind, sodass Abstände, exakte Farbwerte und Schrift-Metadaten Annäherungen sind, von denen der Anbieter selbst sagt, dass sie bei komplexen Designs manuelle Nacharbeit brauchen können.

Was macht UnHTML anders als ein screenshot-basiertes Tool?

UnHTML liest das live DOM und CSS der Seite statt eines flachen Bildes, sodass Textebenen aus dem echten Text der Seite stammen, Auto Layout aus den echten Flexbox- und Grid-Regeln der Seite kommt, und Farben und Abstände aus den echten CSS-Werten der Seite stammen. Die kostenlose Stufe begrenzt auf 500 Ebenen mit absoluter Positionierung; Pro hebt das Limit auf und fügt Auto-Layout-Konvertierung hinzu, für 39 $ einmalig pro Editor.

Ist der Import von UnHTML pixelgenau?

Nein, und das behauptet es auch nicht. Schriften, die lokal nicht installiert sind, werden ersetzt, standardmäßig durch Inter, und jede Ersetzung wird im Importbericht protokolliert. Ein Frame, der die erfasste Geometrie nicht reproduzieren kann, greift von selbst auf absolute Positionierung zurück, statt stillschweigend ein schlechteres Layout zu erzeugen.

Fazit

Ein nachgezeichneter Screenshot, egal ob über Figmas natives Vectorize, ein Tracer-Plugin oder eine KI-Rekonstruktion, liefert Vektorgeometrie und bestenfalls eine abgeleitete Annäherung an Struktur. UnHTML liefert die echte, aus dem CSS der Seite abgebildete Struktur, mit protokollierten statt verborgenen Fallbacks. Welches richtig ist, hängt davon ab, ob du Referenzkunst brauchst oder eine Struktur, die du tatsächlich bearbeiten und nachbauen willst.