UnHTML vs. Builder.ios Figma Import: Welches Tool wirklich zur Aufgabe passt

UnHTML und Builder.ios HTML to Figma Plugin behaupten beide, eine bestehende Webseite in bearbeitbare Figma Ebenen zu verwandeln. Sie sind aber nicht für dieselbe Aufgabe gebaut. UnHTML ist ein Importer, der ausschließlich für Webseite zu Figma gebaut ist. Builder.ios Plugin ist der Import Teil einer Design zu Code Pipeline, deren Hauptgeschäft es ist, Figma in Code zu verwandeln, nur in umgekehrter Richtung. Dieser Unterschied bestimmt, woher jedes Tool importiert, wie weit Auto Layout trägt und was passiert, wenn sich das CSS eines Abschnitts nicht sauber übersetzen lässt. Jede Behauptung unten wurde direkt gegen die eigene Dokumentation oder Produktseite des jeweiligen Anbieters geprüft, mit Stand 2026-10-03, nicht aus einer Rezensionsseite oder einem Forum übernommen.

Woher jedes Tool wirklich importiert

UnHTML nimmt eine HTML Datei, ein Safari .webarchive, eine scene.json Erfassung, oder die Ausgabe seiner eigenen Open Source Capture CLI und Bookmarklet. Der Import läuft lokal. Das ist wichtig für Teardown Arbeit und die Rekonstruktion alter Seiten, bei denen die Quellseite meist nicht die eigene ist.

Builder.ios Plugin arbeitet mit einer Live URL. Einfügen, das Plugin holt die Seite und konvertiert sie. Oder eine begleitende Chrome Erweiterung nutzen, um bestimmte DOM Elemente einer Seite zu erfassen, auch hinter einem Login, und nur diese Abschnitte zu importieren. Builder.io versteht den gesamten Ablauf als Kreislauf: eine Seite nach Figma bringen und das Ergebnis später wieder als React, Vue, Tailwind oder mehrere andere Ziele exportieren, mithilfe eines KI Modells zusammen mit einem Open Source Compiler, der eine saubere Code Hierarchie statt eines flachen Dumps aufbaut. Sobald ein Frame importiert ist, kann es per Prompt in natürlicher Sprache weiter angepasst werden, bevor dieser Export Schritt folgt.

Dieser Kreislauf ist der Kern von Builder.ios Produkt. UnHTML hat überhaupt keinen Code Export Teil. Es hört auf, sobald die Ebenen in Figma sind, und das ist eine bewusste Entscheidung zum Umfang, keine fehlende Funktion. Für einen genaueren Blick darauf, wie die Richtung der Konvertierung bestimmt, welches Tool das richtige ist, siehe UnHTML vs Anima: In welche Richtung die Konvertierung wirklich läuft.

Auto Layout Genauigkeit: CSS flex und grid

Direkt am 2026-10-03 auf unhtml.pro geprüft: UnHTMLs kostenloser Plan enthält bereits Auto Layout, das aus echtem CSS flex und grid abgeleitet wird, begrenzt auf 500 Ebenen pro Import. Builder.io gibt an, dass die Auto Layout Unterstützung bei importierten Frames derzeit Beta ist, und die eigene Projektdokumentation empfiehlt, vor dem Export zurück zu Code manuell zu prüfen, welche Ebenen Autolayout tragen, statt davon auszugehen, dass jeder importierte Frame es hat.

Figma selbst hat 2026 eine an Flexbox angelehnte Überarbeitung von Auto Layout veröffentlicht, die unabhängig vom verwendeten Import Tool relevant ist. Padding bekommt jetzt immer den Platz, den es braucht, näher am CSS Border Box Modell: Ein Frame kann nicht schmaler sein als sein gesamtes Padding. Nur innenliegende Konturen (Strokes) zählen in die Layout Berechnung, nicht außenliegende oder zentrierte, und die Stroke Einstellung eines übergeordneten Elements wirkt sich nicht mehr auf die Berechnung des Strokes eines untergeordneten Elements aus. Auto Gap Stacks unterstützen jetzt die Modi space-between und evenly, die genau ihren CSS Entsprechungen folgen. Diese Version wird ab Juli 2026 zum Standard für neu erstellte Frames, beide Versionen bleiben bis Januar 2027 umschaltbar, danach entfällt die alte Option für neue Frames.

Grid Auto Layout, einer von Figmas drei Auto Layout Modi, entspricht CSS Grid so direkt wie kaum eine andere Figma Funktion. Zeilen und Spalten heißen Tracks. Fraktionale (fr) Einheiten verteilen den verfügbaren Platz proportional, genau wie in CSS, und die Zeilenanzahl passt sich dem Inhalt an, so wie grid-auto-rows es tut. Die vollständige Zuordnung steht in Figmas eigener Dokumentation. Für die Details auf Eigenschaftsebene, wie einzelne flex und grid Eigenschaften in Figma landen, siehe CSS Flexbox to Figma Auto Layout: A Property by Property Map und CSS Grid to Figma: What Survives the Conversion to Layers.

Wenn die Konvertierung nicht sauber bleiben kann

Beide Anbieter geben offen zu, dass dies kein gelöstes Problem ist. UnHTML fällt automatisch auf absolute Positionierung zurück, wann immer die Geometrie eines Abschnitts nicht als Auto Layout reproduziert werden kann, und ein Node Budget schützt vor ausufernden Ebenenmengen auf ungewöhnlich dichten Seiten. Builder.ios eigene Dokumentation besagt klar, dass das Importieren von HTML nach Figma ein Best Effort Prozess ist. Iframes und Pseudo Elemente werden überhaupt nicht konvertiert. Nicht jede CSS Eigenschaft wird unterstützt, und Video und animierte GIFs sind ausgeschlossen. Schriften, die nicht bereits zu Figma hochgeladen sind, werden ersetzt.

UnHTML macht bei Schriften dasselbe: Was nicht installiert ist, fällt auf einen Ersatz zurück (standardmäßig Inter), und jeder Tausch erscheint im Import Bericht, sodass sich nichts unbemerkt ändert. Keines der beiden Tools behauptet ein pixelgenaues Ergebnis. Für UnHTML ist das eine bewusste Grenze: Der Import Bericht existiert genau deshalb, weil manches zurückfällt, und die ehrliche Beschreibung ist "originalgetreue, bearbeitbare Ebenen", kein exakter Klon.

Datenschutz: wohin der Inhalt deiner Seite wirklich geht

Für einen Teardown eines Wettbewerbers, oder jede Seite, die man nicht selbst kontrolliert, ist wichtig, wohin der Inhalt während der Verarbeitung geht. UnHTMLs angegebener Standard ist null Netzwerkanfragen. Nichts verlässt den Rechner, außer der Nutzer aktiviert den entfernten Abruf, und dieser optionale Pfad führt den Abruf in einem isolierten Frame (Sandbox) aus, wobei Skripte und inline Event Handler entfernt werden, bevor überhaupt etwas gerendert wird. Der einzige Aufruf, den UnHTML von sich aus macht, unabhängig von den Einstellungen, ist eine wöchentliche Lizenzprüfung, die nur den Lizenzschlüssel und eine Figma Nutzer ID überträgt. Nicht den Seiteninhalt.

Builder.ios Workflow basiert bewusst auf URL Abruf oder DOM Erfassung, denn genau so bringt das Plugin die Seite vor seine Konvertierungs Engine. Wenn rein lokale Verarbeitung für einen bestimmten Teardown eine harte Anforderung ist, ist das ein echter Unterschied zwischen beiden, kein kleines Detail.

Preise und Grenzen

Direkt am 2026-10-03 auf unhtml.pro geprüft: Der kostenlose Plan enthält Auto Layout aus CSS flex und grid, Open Source Capture Tools und Community Support, begrenzt auf 500 Ebenen pro Import. Pro kostet 39 USD, einmalig, pro Editor, und hebt dieses Limit auf, zusätzlich zur Beförderung wiederkehrender Elemente zu Komponenten und wiederkehrender Typografie zu gemeinsamen Textstilen, mehreren Viewport Voreinstellungen, einem Import Bericht mit Schriftersatz Protokoll und einem Jahr Updates. Studio erweitert Pro auf fünf Editoren für 119 USD.

Builder.io bietet kostenlose und Premium Pläne ohne Kreditkarte für die kostenlosen Funktionen. Konkrete Preise für Builder.ios Premium Pläne waren auf den für diesen Artikel geprüften Seiten nicht veröffentlicht, daher wird hier keine Zahl genannt. Wenn der Preis ausschlaggebend ist, prüfe Builder.ios aktuelle Preisseite direkt, bevor du die Einführung im Team budgetierst. Die Zahlen beider Anbieter können sich zwischen dem Datum, an dem dies geschrieben wurde, und dem Datum, an dem du es liest, ändern.

Was wirklich zur Aufgabe passt

Für das Redesign einer Seite ohne Designdatei, den Teardown der Seite eines Wettbewerbers, oder den Wiederaufbau einer alten Seite mit nichts als ihrem CSS als Grundlage, passt ein Tool, das ausschließlich für Webseite zu Figma gebaut ist und lokal läuft, direkt zu dieser Aufgabe. Das ist UnHTMLs gesamter Umfang: die Ebenen hineinbringen, die Struktur bearbeitbar halten, und den Rest des Designprozesses Figma selbst überlassen. Für ein Team, das bereits auf eine Figma zu Code Pipeline standardisiert ist und den Schritt von HTML zu Figma als einen weiteren Teil eines längeren Kreislaufs zurück zu React, Vue oder einem anderen Framework will, passt Builder.ios kombiniertes Angebot zu dieser anderen Aufgabe. Besonders, wenn dieses Team bereits für die Code Export Seite von Builder.io bezahlt und das Import Plugin einfach der Baustein ist, der den Einstieg liefert.

Noch ein praktischer Punkt. Ein einmaliger Preis pro Editor ohne Abonnement ist ein anderes Budgetgespräch als ein Plattform Tarif, der Import zusammen mit Codegenerierung, KI Überarbeitung und Hosting bündelt. Keine der beiden Strukturen ist falsch, aber sie passen zu unterschiedlichen Teamgrößen und Review Zyklen. Entscheide, welche zu deinem Team passt, bevor du Funktionslisten Zeile für Zeile vergleichst.

Das Fazit

UnHTML und Builder.io konkurrieren nicht wirklich um dieselbe Aufgabe. Das eine ist ein ausschließlich für Webseite zu Figma gebauter Importer, der lokal läuft und offen damit umgeht, wo er auf absolute Positionierung zurückfällt. Das andere ist eine Design zu Code Plattform, deren HTML zu Figma Plugin der umgekehrte Teil einer Pipeline ist, die zurück zu Code führen soll. Auto Layout Genauigkeit, Datenschutz Haltung und Preis folgen alle aus diesem Unterschied. Beide Anbieter sind ehrlich, dass nichts davon pixelgenaue Exaktheit erreicht, also prüfe die konkrete Behauptung, die für deinen Workflow am wichtigsten ist, direkt auf der Seite jedes Anbieters, bevor du einen Prozess darum baust.