UnHTML gegen Locofy: Design zu Code und Web zu Design sind nicht derselbe Job

Welche Aufgabe jedes Tool tatsächlich erfüllt

UnHTML und Locofy werden oft verglichen, lösen aber unterschiedliche Probleme. UnHTML nimmt eine laufende Webseite und importiert sie als native, bearbeitbare Layer nach Figma. Locofy nimmt ein Figma Design, das du bereits gebaut hast, und exportiert es zu Code. Das eine erfasst, das andere liefert aus. Wenn du nur einen dieser beiden Schritte brauchst, deckt das andere Tool ihn nicht ab.

UnHTML akzeptiert eine eigenständige HTML Datei, ein Safari .webarchive, oder ein per CLI erfasstes scene.json, und wandelt die Seite in echte Figma Frames, Text, Bilder, Vektoren und Auto Layout um, abgeleitet direkt aus dem eigenen CSS der Seite. Standardmäßig sendet es keinerlei Netzwerkanfragen: der Import läuft vollständig auf deinem Rechner. Das Laden externer Ressourcen und das Ausführen von Seiten Skripten, was bei JavaScript gerenderten Seiten relevant ist, ist eine einzelne Option, die du selbst aktivieren musst und die standardmäßig ausgeschaltet bleibt. Der einzige Aufruf, den UnHTML von sich aus macht, ist eine wöchentliche Lizenzprüfung mit dem Lizenzschlüssel und einer Figma Nutzer ID. Die Einstellung für optionale Anfragen regelt alles Weitere.

Locofy beginnt am anderen Ende des Prozesses. Es liest eine bestehende Figma Datei, egal ob von Hand erstellt oder von einem Erfassungstool erzeugt, und exportiert sie nach React, React Native, HTML und CSS, Flutter, Vue, Angular oder Next.js, über einen automatischen Lightning Modus oder einen schrittweisen Classic Modus mit manueller Kennzeichnung. Locofy Lightning ist wirklich schnell darin, eine gekennzeichnete Figma Datei in funktionierenden Framework Code umzuwandeln, und seine Framework Liste, sieben Optionen Stand 2026, ist breiter als bei den meisten Design zu Code Tools. Was Locofy nicht kann, ist bei einer laufenden URL zu starten. Es gibt keinen Erfassungspfad im Produkt: eine Figma Datei muss bereits existieren, bevor Locofy überhaupt etwas zum Exportieren hat.

Wo sich die beiden Workflows treffen

Die Überschneidung zeigt sich in einer bestimmten Situation: ein Team will eine Seite neu gestalten und hat keine Figma Datei, von der es ausgehen kann. Das passiert bei veralteten Seiten, die älter sind als jedes Designsystem, und es passiert, wenn ein Team untersucht, wie ein Wettbewerber seine Seite gebaut hat, bevor es die eigene Version entwirft.

Hier zählt die Reihenfolge. Ein Erfassungstool muss zuerst laufen, weil es sonst noch nichts gibt, das ein Code Exporter lesen könnte. Sobald die Seite als bearbeitbare Layer existiert, mit echtem Auto Layout statt eines flachen Bildes, kann das Team innerhalb von Figma neu gestalten und die fertige Datei anschließend an ein Design zu Code Tool übergeben.

Die Seite eines Wettbewerbers auf diese Weise zu untersuchen bedeutet, ihre Struktur, ihre Komponentengrenzen und ihre Abstandsentscheidungen zu analysieren, damit das eigene Team fundierte Entscheidungen treffen kann. Es bedeutet nicht, das Design einer anderen Person als eigenes fertiges Werk erneut zu veröffentlichen. Das Ziel einer solchen Analyse ist Verstehen, nicht Kopieren.

Dieselbe Abfolge gilt für eine Seite, die du bereits besitzt, für die es aber nie eine Designdatei gab. Viele Produktivseiten wurden direkt im Code gebaut, Jahre bevor jemand einen Figma Workspace dafür eingerichtet hat. Diese Seite so zu erfassen, wie sie heute tatsächlich gerendert wird, mit ihrem echten CSS statt einer groben visuellen Vermutung, gibt dem Redesign einen funktionierenden Ausgangspunkt statt einer leeren Fläche.

Preise und Pakete im Vergleich

Die beiden Produkte werden unterschiedlich bepreist, weil sie unterschiedliche Probleme lösen. Das eine ist ein Erfassungstool pro Import. Das andere ist ein wiederkehrendes Abo für den Code Export.

Die UnHTML Zahlen oben stammen direkt von unhtml.pro, geprüft am 2026-09-29. Für die Locofy Zahlen gilt das nicht: locofy.ai/pricing rendert seine Preistabelle clientseitig, und zwei unabhängige Rezensionen der Seite berichteten dieselben Zahlen, aber keine davon ist die eigene statische Seite des Anbieters. Behandle die Locofy Zahlen als unbestätigt, bis du die Live Seite selbst prüfst, bevor du eine Kaufentscheidung triffst.

Der strukturelle Unterschied zählt mehr als die genauen Beträge. UnHTML berechnet einmalig pro Editor, und die Lizenz gehört dir. Locofy berechnet monatlich für den fortlaufenden Zugriff auf seine Export Frameworks.

Die Zuordnung von CSS zu Auto Layout, Eigenschaft für Eigenschaft

Eine Webseite in eine nutzbare Figma Datei zu verwandeln bedeutet, die tatsächlichen berechneten Stile der Seite zu lesen und sie als Figma Auto Layout Eigenschaften nachzubilden, nicht eine visuelle Annäherung zu erraten.

Die Kernzuordnung, laut der Flexbox Referenz von MDN:

• CSS flex-direction (row oder column) wird zur horizontalen oder vertikalen Ausrichtung eines Figma Auto Layout Frames.
• CSS justify-content wird zur Ausrichtung entlang der Hauptachse von Figma.
• CSS align-items wird zur Ausrichtung entlang der Gegenachse von Figma.
• CSS gap wird direkt zum Gap Wert zwischen Objekten im Figma Frame.
• CSS padding am Container wird zum Padding des Auto Layout Frames.

Der Grid Modus von Figma funktioniert anders als sein horizontales und vertikales Auto Layout. Er gruppiert Objekte in Spalten und Zeilen mit Spans, näher an CSS Grid als an Flexbox. Eine mit CSS grid gebaute Seite wird diesem Grid Modus zugeordnet statt einem Flex artigen Frame, weshalb ein Erfassungstool erkennen muss, welches Layout Modell ein Container tatsächlich verwendet, bevor es die richtige Figma Struktur wählen kann.

UnHTML liest flex, grid und block Layouts direkt aus dem tatsächlichen CSS der Seite und baut die entsprechende Auto Layout Struktur. Wenn ein Layout nicht originalgetreu nachgebildet werden kann, fällt der Frame auf absolute Positionierung zurück, statt auf eine Annäherung, die gut aussieht, sich aber beim Skalieren falsch verhält. Es ist kein pixelgenauer Klon der Ausgangsseite, und der Importbericht listet genau auf, was zurückgefallen ist und welche Schriften ersetzt wurden, standardmäßig Inter, wenn eine Schrift lokal nicht installiert ist.

Das ist für den oben beschriebenen Workflow entscheidend. Ein Design zu Code Tool wie Locofy exportiert genau die Struktur, die die Figma Datei bereits hat. Ist diese Struktur flach, mit absolut positionierten Layern, wird auch der exportierte Code so aussehen. Eine sauber zugeordnete Auto Layout Datei, wie sie ein Erfassungstool liefert, das echtes CSS liest, gibt einem Code Exporter etwas, das den Export wirklich lohnt.

Wann zuerst UnHTML und dann Locofy einsetzen

Für eine Seite ohne bestehende Figma Datei: erfasse sie, bevor du etwas gestaltest. Das deckt drei häufige Situationen ab: eine veraltete Seite ganz ohne Designquelle, eine Wettbewerbsanalyse zu Referenzzwecken, und das Redesign der eigenen alternden Seite. In jedem Fall bekommst du, wenn du die laufende Seite durch UnHTML laufen lässt, echte, bearbeitbare Layer mit funktionierendem Auto Layout, keinen von Hand nachgezeichneten flachen Screenshot.

Kenne die Grenzen von Anfang an. Die kostenlose Stufe deckelt bei 500 Layern pro Import; komplexe Seiten mit tief verschachtelten Komponenten können diese Grenze erreichen, bevor Pro sie aufhebt. Schriften, die lokal nicht installiert sind, werden ersetzt, und jeder Ersatz erscheint im Importbericht, sodass nichts verborgen bleibt. Komplexe CSS Grids, die sich nicht sauber zuordnen lassen, fallen auf absolute Positionierung zurück. Nichts davon macht das Ergebnis unbrauchbar. Es macht es ehrlich darüber, wo die Automatisierung endet und die manuelle Nacharbeit beginnt.

Sobald die neu gestaltete Datei fertig ist, kommt ein Design zu Code Tool ins Spiel. Locofy, oder jeder vergleichbare Exporter, liest die Figma Datei, die du jetzt hast, und wandelt sie in Framework Code um. Die beiden Tools sind Haltepunkte auf derselben Strecke, nicht zwei Versionen desselben Haltepunkts.

Fazit

UnHTML und Locofy beantworten unterschiedliche Fragen. UnHTML beantwortet "wie bekomme ich diese bestehende Webseite als echte Layer nach Figma". Locofy beantwortet "wie verwandle ich dieses Figma Design in funktionierenden Code". Keines ersetzt das andere, und ein Projekt, das ganz ohne Designdatei beginnt, braucht den Erfassungsschritt, bevor der Exportschritt überhaupt etwas zum Arbeiten hat.

Während Design zu Code Tools weiter Frameworks hinzufügen und schneller werden, hört die Qualität der Figma Datei, die sie füttert, auf, eine Nebensächlichkeit zu sein. Ein Erfassungsschritt, der das echte CSS einer Seite liest und echtes Auto Layout baut, statt alles auf absolute Positionen zu reduzieren, ist das, was den nachgelagerten Exportschritt überhaupt lohnenswert macht.