HTML to Frame: Wie aus dem DOM Figma Auto Layout wird

Eine Webseite in ein Bild umzuwandeln ist einfach. Sie in Figma-Frames umzuwandeln, die sich verhalten, als hätte sie ein Designer gebaut, ist der schwierige Teil. Ein Frame, der richtig aussieht, aber in sich zusammenfällt, sobald du eine Überschrift bearbeitest, ist kaum besser als ein Screenshot.

Dieser Artikel erklärt Schritt für Schritt, wie HTML to Frames ein DOM in verschachtelte Figma-Frames verwandelt, wie seine Auto-Layout-Engine entscheidet, was zum Stapel wird, und warum sie ihre eigene Arbeit prüft, bevor sie sie behält.

Vom DOM zum Frame-Baum

Eine Webseite ist ein Baum: body enthält Abschnitte, Abschnitte enthalten Container, Container enthalten Karten, Karten enthalten Überschriften und Buttons. Eine Figma-Datei ist ebenfalls ein Baum: Frames enthalten Frames, Text und Vektoren.

Die Grundidee der HTML-to-Frame-Umwandlung ist, den einen Baum auf den anderen abzubilden:

• Jede Seite und jeder Screen wird zu einem obersten Frame. Ein Desktop-, Tablet- und Mobile-Import einer Seite erzeugt drei Frames nebeneinander.
• Elemente, die als Boxen fungieren, werden zu verschachtelten Frames. Ihre Hintergründe, Rahmen, Radien, Schatten und Beschneidungen werden zu Frame-Eigenschaften.
• Text wird zu Textebenen, gemischte Stile bleiben erhalten – ein Satz mit fettem Link bleibt also eine Textebene.
• SVG wird zu bearbeitbaren Vektoren, und Bilder werden zu Bildfüllungen.
• Pseudoelemente (::before, ::after), Inhalte im Shadow DOM und die z-index-Reihenfolge werden übernommen, sodass die Stapelung dem entspricht, was der Browser gezeichnet hat.

Ziel ist ein Ebenen-Panel, das ein Designer lesen kann, kein Abbild jedes DOM-Knotens. Brauchst du zur Analyse eine feinere Ebenenstruktur, gibt es dafür die Option Detailed layers (Pro).

Frame-Benennung

Oberste Frames werden so benannt, dass du sie auch in einer großen Datei findest:

example.com/pricing — Desktop (1920)

Der Name enthält Domain und Pfad (plus Query, falls vorhanden), ohne Protokoll und ohne www, gefolgt vom Screen und seiner Breite, und ist auf 60 Zeichen begrenzt. Die Quell-URL wird außerdem am Frame gespeichert – das macht den Re-import per Klick möglich.

Schritt 1: Zuerst pixelgenau aufbauen

Die Engine beginnt nicht damit, Auto Layout zu raten. Sie beginnt mit einer Version, die garantiert richtig aussieht:

1. Die Seite wird in einem echten Browser in der gewählten Breite gerendert. Für Desktop ist das die Site width – eine Breite, die das Plugin aus dem tatsächlichen Design der Seite misst (1920 bei Full-Bleed, die Containerbreite bei geboxten Websites, 1440 bei fluiden).
2. Die Geometrie und die berechneten Styles jedes Elements werden gemessen.
3. Der Frame-Baum wird mit absoluten Positionen aufgebaut, sodass jede Ebene genau dort sitzt, wo der Browser sie platziert hat.

Diese absolute Version ist das Sicherheitsnetz. Alles danach ist eine Verbesserung, die sich beweisen muss.

Schritt 2: Auto Layout von innen nach außen ableiten

Als Nächstes durchläuft die Engine die Frames von innen nach außen. Für jeden Frame betrachtet sie die gemessene Geometrie seiner Kindelemente und fragt: Lassen sich diese als Auto-Layout-Stapel beschreiben?

Sie leitet ab:

• Richtung – sind die Kindelemente in einem vertikalen oder horizontalen Stapel angeordnet?
• Umbruch – bilden sie umbrechende Zeilen, wie in einem CSS-Grid aus Karten oder bei flex-wrap?
• Abstand – ist der Abstand zwischen den Kindelementen konsistent genug für einen einzigen Wert?
• Padding – wie weit sind die Kindelemente auf jeder Seite vom Rand des Frames entfernt?
• Ausrichtung – sind sie auf jeder Achse am Anfang, in der Mitte oder am Ende ausgerichtet?

Von innen nach außen zu arbeiten ist wichtig: Sobald der Inhalt einer Karte ein sauberer vertikaler Stapel ist, kann die Karte selbst als einzelnes Element in der umgebenden Kartenreihe behandelt werden.

Entscheidend ist, dass die Ableitung auf dem basiert, was der Browser tatsächlich gerendert hat, nicht auf dem Parsen des CSS. Ob eine Zeile mit Flexbox, Grid, Floats oder inline-block gebaut wurde – das gemessene Ergebnis ist dasselbe, und damit arbeitet die Engine.

Schritt 3: Responsive Bedeutung ergänzen

Ein Stapel mit dem richtigen Abstand und Padding ist ein Anfang, verhält sich aber noch nicht wie ein responsives Design. Die Engine leitet daher auch die Absicht ab:

• Zentrierter Inhalt → Center. Sitzt Inhalt zentriert in seinem Elternelement, wird er auf Center ausgerichtet und bleibt beim Skalieren des Frames zentriert.
• Boxen mit max-width bleiben zentriert. Ein Inhaltscontainer mit maximaler Breite in einem Abschnitt voller Breite behält seine Breite und bleibt in der Mitte.
• Gleiche Karten und flex-grow → Fill. Karten, die sich eine Reihe gleichmäßig teilen, oder Elemente, die wachsen, um Platz zu füllen, werden auf Fill container gesetzt.
• Logo … Menü … Icons → das Abstandselement wird zu Fill. In einem typischen Header dehnt sich der Raum zwischen den Gruppen. Die Engine macht dieses Abstandselement zu Fill, sodass das Logo links und die Icons rechts bleiben, wenn der Header breiter wird.

Das ist der Unterschied zwischen einem Frame, der bei einer Breite zur Seite passt, und einem Frame, den du tatsächlich skalieren kannst.

Schritt 4: Jedes Kindelement verifizieren (2 px Toleranz)

Das ist der Teil, der das Design intakt hält. Nachdem ein Auto-Layout-Plan auf einen Frame angewendet wurde, prüft die Engine die Position jedes Kindelements gegen das ursprüngliche pixelgenaue Layout. Jedes muss innerhalb von 2 px dort landen, wo der Browser es platziert hat.

• Halten alle Kindelemente, bleibt der Plan.
• Wenn nicht, wird ein einfacherer Plan probiert – zum Beispiel ein einzelner Stapel ohne die ambitionierteren Ausrichtungs- oder Fill-Einstellungen.
• Hält kein Plan, behält der Frame seine absoluten Positionen.

Die Regel ist einfach: Das Design bricht nie. Bei einem kniffligen Abschnitt bekommst du vielleicht weniger Auto-Layout-Frames, aber nie ein Layout, das sich stillschweigend verschiebt.

Wie oft gelingt es? In unseren Tests an echten Websites wurde Auto Layout auf etwa 86–97% der Frames abgeleitet – zum Beispiel 93% bei einer Produkt-Website und 88% bei Linear und Stripe. Die Ergebnisse hängen davon ab, wie die Seite gebaut ist; betrachte diese Werte als Messungen, nicht als Garantie.

Schritt 5: Constraints für Frames, die absolut bleiben

Frames mit absoluten Positionen werden nicht zurückgelassen. Die Engine gibt ihnen sinnvolle Constraints:

• Stretch – für Elemente, die ihr Elternelement überspannen, etwa eine Hintergrundebene voller Breite.
• Scale – für Elemente, die proportional skalieren sollen.
• Center – für Elemente, die in ihrem Elternelement zentriert sind.
• Min – links oder oben fixiert.
• Max – rechts oder unten fixiert.

So verhält sich selbst ein absoluter Frame vernünftig, wenn du sein Elternelement skalierst.

Schritt 6: Diagnose – warum ein Frame absolut geblieben ist

Der Ergebnisbildschirm zeigt Frames, Ebenen und den Auto-Layout-Anteil des Imports, dazu fehlende Schriften und Warnungen. Außerdem listet er auf, warum bestimmte Frames absolut geblieben sind. In der Praxis bleiben meist die Abschnitte absolut, in denen sich Kindelemente überlappen, außerhalb des normalen Flusses liegen oder zu unregelmäßige Abstände haben, um als ein Stapel beschrieben zu werden.

Diese Diagnose ist auf zwei Arten nützlich:

• Für Designer – du weißt, welche Abschnitte du von Hand umbauen musst, wenn sie voll responsiv sein sollen.
• Für Entwickler – sie ist oft ein Hinweis auf Layout-Code, der komplexer ist als nötig.

CSS Flexbox und Grid zu Auto Layout: eine Zuordnungstabelle

Da die Engine mit gemessener Geometrie arbeitet, beschreibt die folgende Zuordnung das typische Ergebnis, keine wörtliche Übersetzung von CSS-Eigenschaften. Mehr dazu in CSS Flexbox und Grid zu Figma Auto Layout.

Ein durchgerechnetes Beispiel: ein Preisbereich mit drei Karten

Um die Schritte konkret zu machen, stell dir einen gängigen Abschnitt vor: oben zentriert eine Überschrift und eine Unterzeile, darunter drei Preiskarten in einer Reihe, jede mit Planname, Preis, Funktionsliste und Button.

So würde die Engine typischerweise vorgehen:

1. Pixelgenauer Aufbau. Jedes Element wird an seiner gemessenen Position platziert. Der Abschnitt sieht bereits richtig aus.
2. Innerste Frames zuerst. Jede Funktionsliste wird zu einem vertikalen Stapel mit konsistentem Abstand. Jede Karte wird zu einem vertikalen Stapel – Name, Preis, Liste, Button – mit Padding aus dem Abstand zu den Kartenrändern.
3. Die Kartenreihe. Die drei Karten stehen nebeneinander, gleich breit und mit gleichen Abständen – die Reihe wird also zu einem horizontalen Stapel mit einem Abstand, und jede Karte wird auf Fill gesetzt, damit sie sich die Breite gleichmäßig teilen.
4. Der Kopfbereich. Überschrift und Unterzeile sind zentriert und werden daher zu einem vertikalen Stapel mit Ausrichtung Center.
5. Verifizierung. Jedes Kindelement jedes Frames wird gegen seine ursprüngliche Position geprüft. Überlappt etwa ein Badge „Am beliebtesten“ den oberen Rand der mittleren Karte, besteht der Plan dieser Karte die 2-px-Prüfung möglicherweise nicht. Die Engine probiert einen einfacheren Plan, und hält auch der nicht, behält die Karte absolute Positionen mit Constraints – und der Ergebnisbildschirm sagt dir, welcher Frame es war.

Das Ergebnis ist ein Abschnitt, den du skalieren kannst: Verbreiterst du den Frame, wachsen die Karten gemeinsam; bearbeitest du eine Funktionsliste, wächst die Karte mit. Mit Components & hover states (Pro) kommen die drei Karten womöglich auch als Instanzen einer Komponente an, da sie dieselbe Struktur teilen.

Was das in der Praxis bedeutet

Wenn du eine importierte Seite öffnest, kannst du:

• eine Überschrift bearbeiten, und der Abschnitt wächst und schiebt den Inhalt darunter nach unten.
• einen einzigen Abstandswert ändern, um ein Karten-Grid zu verdichten.
• den Frame skalieren und zusehen, wie sich Fill-Elemente dehnen, während zentrierter Inhalt an seinem Platz bleibt.
• eine Karte gegen eine Komponenten-Instanz tauschen – und mit Components & hover states (Pro) sind wiederkehrende Karten womöglich schon Komponenten.

Das unterscheidet einen Frame-Baum von einem flachen Bild. Der Vergleich HTML to Canvas beleuchtet diesen Kontrast genauer.

Tipps für bessere Auto-Layout-Ergebnisse

1. Importiere in der richtigen Breite. Lass Desktop die Site width nutzen und ergänze Tablet und Mobile mit dem Responsive set, damit du jeden Breakpoint prüfen kannst.
2. Blende Overlays aus. Aktiviere Hide cookie banners & popups, damit fixierte Dialoge keine Abschnitte überlappen und absolute Positionierung erzwingen.
3. Erfasse stabile Zustände. Animationen werden bei der Aufnahme eingefroren, aber bei spät ladenden Inhalten hilft Extra wait (Pro).
4. Prüfe die Diagnose, bevor du irgendetwas von Hand umbaust. Sie sagt dir genau, welche Frames du dir ansehen solltest.
5. Nutze Reference screenshot (Pro), wenn du bestätigen musst, dass die Ebenen der Live-Seite entsprechen.

Mehr erfahren

• Der komplette Importablauf: HTML in Figma umwandeln
• Alle Umwandlungsfunktionen: Funktionen
• Jede Option erklärt: Doku
• Pläne und Limits: Preise

Hol dir das Plugin und importiere eine Seite, die du gut kennst. Am schnellsten verstehst du die Engine, wenn du das Ergebnis skalierst und siehst, was hält.