Figma-Import oder manueller Nachbau: Was jeder Weg an Zeit und Genauigkeit kostet

Was geht schneller: eine Seite importieren oder von Hand nachbauen?

Ein Import übernimmt das Aufbauen Ebene für Ebene, sodass Ihre Zeit in die Kontrolle und das Aufräumen des Ergebnisses fließt. Trotzdem hat niemand einen verlässlichen Stoppuhr-Vergleich veröffentlicht, und wir erfinden keinen. Auch die Website von UnHTML nennt weder eine Zeitersparnis noch eine Genauigkeitszahl.

Deshalb vergleichen wir die Arbeit Schritt für Schritt und zeigen danach, wie Sie Ihre eigene Seite fair messen. Die Antwort hängt von Ihrer Seite ab, und darum ist die Methode wichtiger als jeder Durchschnittswert. Wer Figma gut kennt und eine Seite mit klarer Struktur vor sich hat, erlebt den Vergleich oft anders als jemand, der eine dichte, verschachtelte Seite übernehmen muss.

Was ein manueller Nachbau umfasst

Wer eine Seite in Figma nachbaut, wird selbst zur Layout-Engine. Jede Entscheidung, die der Browser aus dem CSS getroffen hat, treffen Sie noch einmal mit der Maus.

Frames, Text und Bilder, einzeln

In Figma wird Auto Layout pro Frame eingerichtet. Sie wählen Ebenen aus, drücken Shift A oder wählen Add auto layout und entscheiden sich dann für einen Flow (vertikal, horizontal oder Grid). Danach legen Sie Padding, Gap und den Größenmodus jedes Kindelements fest: Hug contents, Fill container oder Fixed, optional mit Mindest- und Höchstgrößen. Eine Seite mit Dutzenden verschachtelten Abschnitten bedeutet Dutzende solcher Durchgänge.

Text bringt eine eigene Aufgabe mit. Jede Überschrift und jeder Absatz braucht Schriftfamilie, Schnitt, Größe, Zeilenhöhe und Laufweite passend zum Stylesheet, und wiederholte Elemente wie Karten oder Navigationspunkte müssen kopiert und konsistent gehalten werden. Nichts davon ist schwierig. Es sind viele kleine, wiederkehrende Entscheidungen, und bei jeder kann sich ein Wert leicht verschieben. Je länger die Seite, desto größer wird die Zahl dieser Stellen, an denen sich kleine Abweichungen ansammeln.

CSS-Standardwerte übersetzen

Die Originalseite verlässt sich außerdem auf CSS-Standardwerte, die man im Browser nicht sieht. Die Flexbox-Referenz von MDN listet sie auf: flex-direction ist standardmäßig row, flex-wrap ist nowrap, flex-grow ist 0, flex-shrink ist 1 und align-items ist stretch. Übersehen Sie einen davon, weicht Ihr Nachbau auf eine Weise vom Original ab, die mit bloßem Auge schwer zu erkennen ist. Am Ende lesen Sie fast so viel in DevTools, wie Sie in Figma arbeiten.

Flexbox und Grid sind verschiedene Modelle

Flexbox ist eindimensional. CSS Grid ist zweidimensional, mit fr-Spuren, gap und Platzierung nach Linienummer oder Bereichsname. Das Auto Layout von Figma hat inzwischen einen Grid-Flow, doch zwischen beiden Modellen übersetzen Sie weiterhin von Hand: Aus grid-template-columns: 2fr 1fr 1fr wird eine Reihe von Spaltenbreiten und Fill-Einstellungen, die Sie selbst wählen.

Was ein Import in denselben Schritten leistet

UnHTML liest eine in sich geschlossene HTML-Datei, ein Safari-.webarchive oder eine scene.json aus der Open-Source-CLI. Es überträgt Flex-, Grid- und Block-Layouts aus dem CSS der Seite in Auto Layout, einschließlich Abstände, Padding, Wrap und Stretch. Text bleibt editierbar, mit übernommener Schriftfamilie, Schnitt, Größe, Farbe, letter-spacing und line-height. SVG wird zu nativen Vektoren, und Verläufe werden übertragen.

Es gelingt nicht immer, und es sagt das auch. Kann ein Frame die erfasste Geometrie nicht abbilden, fällt er auf absolute Positionierung zurück. Die Umwandlung in Auto Layout lässt sich außerdem ganz abschalten. Der Importbericht listet ersetzte Schriften, auf absolut zurückgesetzte Frames und übersprungene Bilder auf.

Was bleibt, ist Kontrollarbeit. Rechnen Sie damit, einen Import aufzuräumen, indem Sie überflüssige Ebenen löschen und zusammenfassen, was Sie nicht bearbeiten wollen. Diese Zeit gehört in Ihre Messung, denn ohne sie würde der Import zu gut aussehen.

Man kann den Import als Verlagerung des Aufwands verstehen, nicht als dessen Wegfall. Sie bauen Struktur nicht mehr aus dem Nichts auf. Sie prüfen eine Struktur, die schon existiert. Für Designer, die Figma gut kennen, ist Prüfen meist die leichtere Aufgabe, aber nur Ihr eigener Test zeigt, ob es auf Ihrer Seite schneller geht. Eine lange, dichte Seite erreicht außerdem früher die Grenze von 500 Ebenen im kostenlosen Tarif, was die Rechnung verändert, wie weiter unten beschrieben.

Wo die Genauigkeit in beiden Fällen leidet

Keiner der beiden Wege ist exakt. Sie scheitern nur an unterschiedlichen Stellen, und es lohnt sich zu wissen, an welchen, bevor Sie anfangen.

Von Hand sind Fehler lautlos. Niemand liefert Ihnen eine Liste dessen, was Sie falsch gemacht haben. Beim Import werden die Abweichungen protokolliert, sodass Sie sie prüfen können. Das ist ein echter Genauigkeitsvorteil, auch wenn er den Prüfaufwand nicht ersetzt. Pixeltreue ist es dennoch nicht: Das Ergebnis ist originalgetreu und editierbar, kein pixelgenauer Klon. Zu Schriften siehe wie der Schriftenersatz funktioniert.

So messen Sie Ihre eigene Seite fair

Machen Sie einen kleinen Test. Verlassen Sie sich auf keinen Durchschnittswert, auch nicht auf unseren.

1. Wählen Sie einen echten Abschnitt Ihrer Seite, etwa eine Kopfzeile samt Kartenraster.
2. Legen Sie zuerst den Viewport fest. UnHTML bietet Desktop 1440, Mobile 390 und eigene Breiten; nutzen Sie bei beiden Versuchen dieselbe Breite.
3. Stoppen Sie den manuellen Nachbau von einem leeren Frame bis "entspricht dem Original" bei dieser Breite.
4. Stoppen Sie den Import-Lauf, dann Kontrolle und Aufräumen, als eine einzige Zahl.
5. Zählen Sie die Abweichungen, die jede Version gegenüber dem Original behält, nicht nur die Minuten.

Notieren Sie beide Zahlen und die Anzahl der Abweichungen. Halten Sie auch fest, womit Sie verglichen haben. Wenn Ihre Referenz die Live-Seite bei nur einer Breite ist, schreiben Sie das auf, denn ein Nachbau, der bei 1440 px passt, kann bei 390 px trotzdem abweichen. Eine kurze Notiz neben jedem Ergebnis macht den Vergleich wiederholbar, wenn ein Kollege ihn auf einer anderen Seite durchführt. Wenn Sie denselben Abschnitt zweimal nachbauen, ist der zweite Durchgang schneller, weil Sie die Seite schon kennen; importieren Sie deshalb zuerst oder nehmen Sie zwei verschiedene Abschnitte ähnlicher Größe.

Wann der manuelle Nachbau trotzdem besser ist

Manchmal ist der Import das falsche Werkzeug. Eine sehr kleine Seite ist vielleicht schnell gebaut, nicht langsamer als geprüft. Bei einem Redesign, in dem Sie die Struktur nicht behalten, nützt eine originalgetreue Kopie wenig. Und wenn Sie nur einzelne Elemente brauchen, genügt vielleicht das Kopieren von Elementen aus Chrome DevTools oder das Nachzeichnen von Screenshots.

Auch die Größe zählt, und zwar früher, als man denkt. Laut der Preisseite mit Stand vom 16. September 2026 begrenzt der kostenlose Tarif einen Import auf 500 Ebenen. Pro, ein Einmalkauf von $39 pro Editor, hebt die Grenze auf. Prüfen Sie die Seite auf aktuelle Preise, bevor Sie sich entscheiden, und rechnen Sie ein, wie viele Editoren in Ihrem Team die Importe tatsächlich nutzen würden.

Das Fazit

Ein Import verändert die Form der Arbeit: weniger Aufbau, mehr Kontrolle, dazu ein Bericht, der zeigt, wo er zu kurz kam. Ein manueller Nachbau gibt Ihnen volle Kontrolle und keinen Prüfpfad. Welcher Weg schneller ist, ist eine Frage an Ihre Seite, und ein zehnminütiger Test an einem Abschnitt beantwortet sie besser als jeder Durchschnittswert.

Häufig gestellte Fragen

Geht ein Seitenimport in Figma schneller als der manuelle Nachbau?

Veröffentlichte Quellen nennen keine gemessenen Zeiten, und UnHTML selbst behauptet keine. Ein Import ersetzt den Aufbau Ebene für Ebene durch einen einzigen Lauf, sodass sich die Arbeit auf Kontrolle und Aufräumen verlagert. Wie viel das spart, hängt von Ihrer Seite ab. Stoppen Sie deshalb einen Abschnitt auf beiden Wegen.

Ist eine importierte Seite pixelgenau?

Nein. UnHTML erzeugt originalgetreue, editierbare Ebenen, keinen exakten Klon. Ersetzte Schriften, Frames mit Rückfall auf absolute Positionierung und übersprungene Bilder stehen im Importbericht, damit Sie sie prüfen können.

Was passiert bei einer Seite, die größer ist als der kostenlose Tarif erlaubt?

Der kostenlose Tarif begrenzt einen Import auf 500 Ebenen. Pro, ein Einmalkauf von $39 pro Editor, hebt die Grenze auf. Für eine sehr kleine Seite reicht der kostenlose Tarif oft aus.