UnHTML vs html.to.design: Preis, Ebenenlimit und Auto-Layout-Ergebnis 2026

Die Entscheidung zwischen UnHTML und html.to.design hängt vor allem von zwei Fragen ab: Wie begrenzt jedes Tool seinen kostenlosen Plan, und wie berechnet es die Aufhebung dieser Grenze. UnHTMLs kostenloser Plan ist durch die Ebenenzahl begrenzt, und der bezahlte Plan ist ein einmaliger Kauf pro Editor. Der kostenlose Plan von html.to.design ist durch die Importhäufigkeit begrenzt, und der bezahlte Plan ist ein laufendes Abonnement. Beide Tools wandeln eine live Webseite mit Auto Layout in Figma-Ebenen um, wo immer möglich, und weichen auf absolute Positionierung aus, wo es nicht geht. Der Rest dieses Vergleichs prüft Preis, Limits und Ausgabeverhalten anhand der eigenen Seiten beider Anbieter, Stand des Datums, an dem dieser Artikel geschrieben wurde.

Preismodell: Einmalkauf gegenüber monatlichem Abonnement

UnHTML verkauft eine Lizenz, kein Abonnement. Der kostenlose Plan kostet nichts und importiert bis zu 500 Ebenen, nur für den persönlichen Gebrauch. Pro ist eine einmalige Zahlung von 39 USD pro Editor, die das Ebenenlimit aufhebt, kommerzielle Nutzung erlaubt und ein Jahr Updates enthält. Studio erweitert Pro auf bis zu fünf Editoren in einem Team für eine einzige Zahlung von 119 USD, mit priorisiertem Support. Diese Zahlen stammen direkt aus dem Preisbereich der eigenen Produktseite, also behandle die Zahlen in diesem Artikel als Momentaufnahme und prüfe sie vor dem Kauf erneut.

html.to.design geht den umgekehrten Weg: Es berechnet pro Nutzer, pro Monat. Der kostenlose Plan verlangt keine Kreditkarte und erlaubt bis zu 10 Importe alle 30 Tage. Pro kostet 12 USD im Monat bei jährlicher Abrechnung oder 18 USD im Monat bei monatlicher Abrechnung, pro Nutzer, mit unbegrenzten Importen unter einer Fair-Use-Richtlinie, die bei 1.000 Importen im Monat deckelt. Teams, die selbst dieses Limit überschreiten, werden auf ein separates API-Produkt verwiesen statt auf eine höhere Abo-Stufe.

Der praktische Unterschied ist nicht nur der Preis auf dem Etikett. UnHTMLs Pro-Kauf ist ein fester Kostenpunkt, den ein einzelner Designer einmal zahlt und behält, solange die Lizenzbedingungen es erlauben. html.to.designs Pro-Plan ist eine laufende Kosten, die davon abhängt, wie viele Monate der Platz aktiv bleibt. Wer eines der beiden Tools länger als ein paar Monate nutzen will, sollte die Einmalgebühr gegen mehrere Monate Abonnement abwägen, nicht gegen den Preis eines einzelnen Monats. Bei einem Team von fünf Personen verschiebt sich diese Rechnung noch weiter: UnHTMLs Studio-Stufe ist eine einzige Zahlung von 119 USD, fertig, während sich fünf html.to.design-Pro-Plätze jeden Monat erneuern, solange das Team sie behält.

Grenzen im kostenlosen Plan: Ebenenzahl gegenüber Importhäufigkeit

Die beiden kostenlosen Pläne sind auf unterschiedlichen Achsen begrenzt, und dieser Unterschied zählt mehr, als es klingt.

UnHTMLs kostenloser Plan ist durch die Ebenenzahl begrenzt: bis zu 500 Ebenen pro Import, unabhängig davon, wie oft an einem Tag oder in einem Monat importiert wird. Eine große, tief verschachtelte Seite, etwa eine Marketingseite mit langem Footer und einer geschäftigen Komponentenbibliothek, kann dieses Limit in einem einzigen Import erreichen. Sobald Pro das Limit aufhebt, spielt die Ebenenzahl überhaupt keine Rolle mehr.

Der kostenlose Plan von html.to.design ist stattdessen durch die Importhäufigkeit begrenzt: 10 Importe alle 30 Tage, ohne veröffentlichtes Ebenenlimit für einen einzelnen Import. Die Dokumentation beschreibt keine Obergrenze pro Import für Ebenen, Frames oder Verschachtelungstiefe, nur das monatliche Importkontingent. Eine kleine Seite, zehnmal importiert, zählt gegen dieses Limit genauso wie eine große Seite, zehnmal importiert.

Die eigentliche Frage betrifft also den eigenen Workflow, nicht nur den Preis auf dem Etikett. Wer eine große, komplexe Seite importiert und eine Weile daran arbeitet, wird UnHTMLs kostenlosen Plan zuerst ausreizen, in einem einzigen Import. Wer viele kleinere Seiten wiederholt importiert, während er an einem Designsystem arbeitet oder eine Seite abschnittsweise prüft, wird zuerst an html.to.designs Grenze von zehn Importen im Monat stoßen, unabhängig davon, wie groß eine einzelne Seite ist.

Wie jedes Tool CSS auf Figmas Auto Layout abbildet

Beide Tools zielen auf dasselbe Ziel ab: Figmas natives Auto-Layout-System (Figma behält den englischen Begriff auch in der lokalisierten Oberfläche bei), das Kindobjekte entlang einer Richtung anordnet, mit Abstand zwischen ihnen und Padding um sie herum, und sie nach Einstellungen wie Inhalt anpassen, Container füllen oder feste Größe skaliert.

Dieses System entspricht CSS ziemlich genau. Die Richtung entspricht flex-direction. Der Abstand entspricht direkt der CSS-Eigenschaft gap. Das Skalierungsverhalten spiegelt flex-grow, flex-shrink und flex-basis. Auf der CSS-Seite verteilt justify-content den Raum entlang der Hauptachse, während align-items die Elemente entlang der Querachse ausrichtet, und gap legt einen festen Abstand zwischen Elementen fest, statt übrig gebliebenen Raum zu verteilen.

Für eine Seite mit display: flex und expliziten Werten für justify-content, align-items und gap haben beide Tools ein klares Auto-Layout-Ziel zum Abbilden: Die Richtung wird zum horizontalen oder vertikalen Fluss des Frames, gap wird zur Abstandseinstellung des Frames, und das Padding des Ausgangselements wird zum Padding des Frames. Die schwierigen Fälle, CSS Grid mit komplexen Spans, absolut positionierte Überlagerungen und Elemente, die nach ihrem Inhalt auf eine Weise dimensioniert sind, die Auto Layout nicht abbilden kann, sind der Punkt, an dem sich die beiden Tools darin unterscheiden, wie elegant sie ausweichen. Hier zählt ein Blick in den Importbericht mehr als ein flüchtiger Blick auf die Zeichenfläche.

Wiederholte Struktur ist die andere Hälfte der Abbildung. Eine Seite, die dieselbe Karte, denselben Button oder dasselbe Listenelement viele Male wiederholt, gibt einem Importwerkzeug die Chance, das Muster zu erkennen und daraus etwas Wiederverwendbares statt eines Haufens einzelner Frames zu machen. Ob wiederholte Elemente zu echten Komponenten werden und wiederholter Text zu gemeinsamen Textstilen, oder ob jede Instanz ein flacher, unverbundener Frame bleibt, zeigt sich erst nach dem Import, sobald man mit dem Bearbeiten beginnt.

Fallback-Verhalten und Ausgabetreue

Kein Tool behauptet, eine Seite exakt zu reproduzieren. UnHTML erklärt offen, dass ein Frame, der die erfasste Geometrie nicht reproduzieren kann, von selbst auf absolute Positionierung ausweicht, sodass ein Abschnitt, der Auto Layout überfordert, trotzdem in Figma landet, nur ohne die Skalierungs- und Umbruchvorteile, die Auto Layout bietet. Dieses Fallback-Verhalten ähnelt der Funktionsweise von Figmas eigener Einstellung "Auto Layout ignorieren": Ein so platziertes Objekt verhält sich wie CSS position: absolute innerhalb seines übergeordneten Frames, außerhalb des automatischen Flusses, statt sich mit ihm zu skalieren.

Das ist wichtig für die Erwartungen. Wenn das Marketing eines Wettbewerbers einen exakten, pixelgenauen Klon einer Ausgangsseite andeutet, behandle diese Behauptung als unbestätigt, sofern die Dokumentation des Anbieters selbst nicht direkt etwas anderes sagt, und bleibe selbst dann skeptisch, denn Geometrie, die Auto Layout überfordert, muss auf irgendetwas ausweichen. Was UnHTML und html.to.design tatsächlich versprechen, sind echte, editierbare Figma-Ebenen mit eleganter Degradation bei allem, was Auto Layout nicht abbilden kann, keine perfekte visuelle Kopie. Schriftersatz folgt derselben Logik: Eine Schrift, die lokal nicht installiert ist, wird durch eine Standardschrift ersetzt, und ein sorgfältiges Importwerkzeug meldet jeden Ersatz, statt still die falsche Schriftart zu zeigen.

Welches Tool passt zu deinem Workflow

UnHTMLs Pro-Stufe konsolidiert, was importiert wird: Wiederholte Elemente werden zu echten Komponenten, wiederholter Text wird zu gemeinsamen Textstilen. Das passt zu einem Designer oder einem kleinen Team, bis zu fünf Editoren mit Studio, das gelegentlich Seiten analysiert oder rekonstruiert, wo ein fester Kostenpunkt mehr zählt als eine monatliche Rechnung.

html.to.designs Pro-Stufe ist darauf ausgelegt, denselben Import zu wiederholen: Massenimporte über URLs, ein schneller Reimport-Pfad für Seiten, die regelmäßig geprüft werden, und Erkennung hochauflösender Bilder für bildlastige Seiten. Das passt zu einem Team, das dieselben Live-Seiten nach einem Zeitplan erneut besucht, Wettbewerbsanalysen, eine Designsystem-Auffrischung über viele Seiten, oder laufendes Qualitätsmanagement gegen eine aktive Seite, wo ein aktives Abonnement laufenden Workflow-Komfort statt einer einzelnen Umwandlung kauft.

Trotzdem ist keines der beiden Tools die offensichtliche Antwort für jede Situation. Ein freiberuflicher Designer, der ein paar Mal im Jahr einzelne Seiten analysiert, muss vielleicht nie einem der beiden Anbieter etwas zahlen, indem er unter html.to.designs kostenlosem Limit von zehn Importen im Monat bleibt oder innerhalb von UnHTMLs kostenloser Obergrenze von 500 Ebenen arbeitet, eine Seite nach der anderen. Erst beim wiederkehrenden, umfangreichen Workflow, oder bei der einzelnen großen Seite, die ein kostenloser Plan nicht tragen kann, beginnen die bezahlten Stufen wirklich zu zählen, und dort hört der Unterschied im Preismodell auf, akademisch zu sein.

Prüfe die eigenen Preisseiten beider Anbieter, bevor du dich entscheidest. Preise, Importobergrenzen und Fair-Use-Bedingungen sind genau die Art von Detail, die sich zwischen den Versionen eines Plugins ändert, und dieser Vergleich spiegelt wider, was jeder Anbieter zum Zeitpunkt der Prüfung angegeben hat.

Fazit

Kurz gesagt: UnHTML begrenzt seinen kostenlosen Plan nach Ebenenzahl und berechnet einmal pro Editor, um dieses Limit aufzuheben. html.to.design begrenzt seinen kostenlosen Plan nach Importhäufigkeit und berechnet monatlich pro Nutzer für mehr Spielraum. Beide bilden CSS-Layout auf Figmas Auto Layout ab und weichen bei Geometrie, die Auto Layout nicht abbilden kann, auf absolute Positionierung aus, also ist keines ein pixelgenauer Klon der Ausgangsseite. Für aktuelle Zahlen, bevor du dich für eines der beiden entscheidest, sieh direkt auf UnHTMLs Preisseite nach.