Frames, die Sinn ergeben
HTML to Frame: Jede Seite und jeder Screen wird zum Figma-Frame
Oberste Frames, benannt nach Seite und Screen, verschachtelte Frames, die dem DOM folgen, und Auto Layout, das vor dem Anwenden verifiziert wird.
- Frame-Breite aus dem echten Design gemessen
- Verschachtelte Frames spiegeln die Seitenstruktur
- Desktop-, Tablet- und Mobile-Frames in einem Import (Pro)
Bald in der Figma Community
HTML to Frame beschreibt, was Designer von einem Import wirklich wollen: kein einzelnes Bild, sondern einen Figma-Frame pro Seite und Screen, mit einer Hierarchie verschachtelter Frames darin, die im Ebenen-Panel Sinn ergibt. Genau so strukturiert HTML to Frames, das Figma-Plugin von EUREKA!, jeden Import.
Jeder erfasste Screen wird zu einem obersten Frame mit vorhersehbarem Namen, etwa example.com/pricing — Desktop (1920). Protokoll und www entfallen, und Namen bleiben unter 60 Zeichen – so lässt sich ein Mehrseiten-Import leicht überblicken. Innen werden Container der Seite zu Frames, und diese Frames folgen dem DOM. Ein Header-Frame enthält einen Navigations-Frame, der wiederum Link-Frames enthält – ganz wie im Markup, aus dem sie stammen.
Die Frame-Breite ist kein Schätzwert. Das Plugin misst beim Import die echte Designbreite der Seite. Full-Bleed-Designs erhalten einen 1920er-Frame mit zentrierter Inhaltsbox, echt geboxte Websites ihre Containerbreite, etwa 1200, 1280 oder 1440, und fluide Websites 1440. Bei einem Mehrseiten-Import wird für jede Seite einer Website dieselbe Breite verwendet, damit die Frames bündig stehen.
Wo das Layout es zulässt, werden Frames zu Auto-Layout-Frames. Das Plugin leitet Richtung, Abstände, Padding, Ausrichtung und Umbruch aus der vom Browser gemessenen Geometrie ab, wendet den Plan an und prüft jedes Kindelement auf 2 px genau. Frames, bei denen das nicht hält, behalten absolute Positionen mit Constraints – nichts verschiebt sich unerwartet.
Die Details dieser Engine liest du in Auto Layout erklärt. Für die Umwandlung im Allgemeinen siehe HTML to Figma, für viele Seiten auf einmal Website to Figma.
Wie aus einer Seite Frames werden
- 01
Seitenbreite messen
Das Plugin erkennt, ob das Design Full-Bleed, geboxt oder fluid ist, und wählt die Breite des Desktop-Frames entsprechend.
- 02
Pixelgenaue Frames aufbauen
Jeder Container wird an seiner gemessenen Position zu einem Frame und spiegelt die DOM-Hierarchie.
- 03
Auto Layout von innen nach außen ableiten
Beginnend bei den innersten Frames werden Stapel, Umbrüche, Abstände, Padding und Ausrichtung abgeleitet und angewendet.
- 04
Verifizieren oder zurückfallen
Jedes Kindelement wird auf 2 px genau geprüft; Frames, die nicht halten, probieren einen einfacheren Plan oder behalten absolute Positionen mit Constraints.
Details auf Frame-Ebene, die Aufräumzeit sparen
Gemessene Seitenbreite
Desktop-Frames nutzen die echte Breite des Designs: 1920 bei Full-Bleed, die Containerbreite bei geboxten Websites, 1440 bei fluiden.
Hierarchie wie im DOM
Verschachtelte Frames folgen der Seitenstruktur – Abschnitte, Karten und Buttons findest du im Ebenen-Panel schnell.
Auto-Layout-Frames
Horizontale und vertikale Stapel, umbrechende Zeilen, Abstände und Padding, verifiziert Kindelement für Kindelement.
Responsive Absicht
Zentrierter Inhalt bleibt zentriert, gleiche Karten füllen auf, und der Raum zwischen Logo und Menü wird zu einem Fill-Element.
Responsive set
Desktop-, Tablet-768- und Mobile-390-Frames einer Seite, parallel erfasst und als ein Import gezählt (Pro).
Frame neu importieren
Jeder Frame speichert Quell-URL und Breite, sodass du ihn mit einem Klick aktualisieren kannst.
Frame-Benennung und Seitenbreite
Wenn du zehn Seiten über drei Screens importierst, kommt es auf Frame-Namen an. HTML to Frames nutzt ein einheitliches Muster:
domain/path?query — Screen (width)
Zum Beispiel shop.example.com/products?sort=new — Mobile (390). Es gibt kein Protokoll und kein www, und Namen sind auf 60 Zeichen begrenzt, damit sie auf dem Canvas lesbar bleiben.
Wie die Desktop-Breite gewählt wird
Der Desktop-Screen heißt Site width, weil er gemessen und nicht geraten wird:
| Website-Typ | Breite des Desktop-Frames |
|---|---|
| Full-Bleed-Design | 1920, Inhaltsbox zentriert |
| Echt geboxte Website | Die Containerbreite, zum Beispiel 1200, 1280 oder 1440 |
| Fluides Layout | 1440 |
Eine Website erhält bei einem Mehrseiten-Import eine einheitliche Breite, sodass alle Desktop-Frames bündig in einer Reihe stehen. Andere Screens nutzen feste Breiten: Laptop 1280, Tablet 768 und Mobile 390. Bei Pro kannst du zusätzlich eine eigene Breite (Custom width) eingeben, wenn du einen bestimmten Breakpoint brauchst.
Jeder Frame speichert außerdem Quell-URL und Breite – das macht den späteren Re-import per Klick möglich.
Einheitliche Namen helfen auch außerhalb von Figma. Wenn du einen Link zu einem Frame teilst oder ihn exportierst, sagt der Name Entwicklern genau, welche Seite und welchen Breakpoint sie vor sich haben.
Verschachtelte Frames und Auto Layout, verifiziert
Innerhalb jedes obersten Frames spiegelt die Hierarchie das DOM. Das macht das Ebenen-Panel für alle vertraut, die das Markup kennen, und gibt Auto Layout echte Container zum Arbeiten.
Die Engine arbeitet in fester Reihenfolge:
- Die Seite pixelgenau mit absoluten Positionen aufbauen.
- Die Frames von innen nach außen durchlaufen und aus der gemessenen Geometrie vertikale oder horizontale Stapel, umbrechende Zeilen, Abstände, Padding und Ausrichtung ableiten.
- Die responsive Bedeutung übersetzen: Zentrierter Inhalt wird zu Center, Boxen mit max-width bleiben zentriert, gleiche Karten und flex-grow-Elemente werden zu Fill, und der Abstand zwischen Logo und Menü wird zu einem Fill-Element.
- Den Plan anwenden und die Position jedes Kindelements auf 2 px genau verifizieren.
- Hält er nicht, einen einfacheren Plan probieren; andernfalls absolute Positionen behalten.
Frames, die absolut bleiben, erhalten Constraints wie Stretch, Scale, Center, Min oder Max, damit sie sich beim Skalieren trotzdem sinnvoll verhalten. Der Ergebnisbildschirm listet auf, warum jeder davon absolut geblieben ist.
In unseren Tests an echten Websites wurde Auto Layout auf etwa 86 bis 97 Prozent der Frames abgeleitet. Entscheidend ist nicht die Zahl, sondern die Garantie dahinter: Das Design bricht nie. Mehr dazu, wie CSS auf Frames abgebildet wird, in CSS Flexbox und Grid zu Auto Layout.
Eine Seite, mehrere Screens: das Responsive set
Ein einzelner Frame zeigt einen Breakpoint. Echte Designarbeit braucht meist mindestens drei. Mit der Option Responsive set erfasst HTML to Frames Desktop, Tablet und Mobile derselben Seite mit einem Klick.
Ein paar praktische Details:
- Die Screens einer Seite werden parallel erfasst statt nacheinander.
- Eine Seite mit all ihren Screens zählt als ein Import, nicht als drei.
- Pro und Team erlauben bis zu vier Screens pro Import; der Free-Plan erfasst einen Screen pro Import.
- Jeder Screen ist ein eigener oberster Frame, benannt mit Screen und Breite, sodass du sie auf einen Blick unterscheiden kannst.
Da jeder Screen in seiner echten Breite erfasst wird, bekommst du das tatsächliche Mobile-Layout der Website – keinen schmaler gequetschten Desktop-Frame. Navigation, die zu einem Menü-Button zusammenklappt, Grids, die von vier Spalten auf eine fallen, und Typografie, die kleiner skaliert, erscheinen genau so, wie die Website sie in dieser Breite rendert. Das macht das Set zu einem verlässlichen Ausgangspunkt für Responsive-Design-Reviews.
Kombiniere Responsive sets mit dem Multiple-Import, um mehrere Seiten über alle Breakpoints zu erfassen, und prüfe die Limits auf der Preisseite.
Häufige Fragen
Es bedeutet, dass jede Webseite und jeder Screen zu einem Figma-Frame wird, mit verschachtelten Frames darin, die die DOM-Struktur der Seite spiegeln. HTML to Frames erstellt einen obersten Frame pro Seite und Screen und wandelt die inneren Frames überall dort in Auto Layout um, wo sich das Ergebnis verifizieren lässt.
Oberste Frames folgen dem Muster domain/path?query — Screen (width), zum Beispiel example.com/pricing — Desktop (1920). Protokoll und www werden entfernt, und Namen bleiben auf 60 Zeichen begrenzt – so behältst du auch bei großen Mehrseiten-Importen auf dem Canvas und im Ebenen-Panel den Überblick.
Die Desktop-Breite wird aus dem echten Design gemessen. Full-Bleed-Designs erhalten 1920 mit zentrierter Inhaltsbox, echt geboxte Websites ihre Containerbreite, etwa 1200 oder 1440, und fluide Websites 1440. Eine Website behält bei einem Mehrseiten-Import eine einheitliche Breite.
Nicht unbedingt. Auto Layout wird nur angewendet, wenn jedes Kindelement innerhalb von 2 px seiner ursprünglichen Position bleibt. Andernfalls wird ein einfacherer Plan probiert, und scheitert auch der, behält der Frame absolute Positionen mit Constraints. Der Ergebnisbildschirm erklärt, warum ein Frame absolut geblieben ist.
Free erfasst einen Screen pro Import. Pro und Team erfassen bis zu vier Screens pro Import, inklusive des Responsive set aus Desktop, Tablet und Mobile per Klick. Alle Screens einer Seite zählen als ein einziger Import und werden parallel statt nacheinander erfasst.
Ja. Jeder importierte Frame speichert seine Quell-URL und Breite, sodass du ihn mit einem Klick neu importieren kannst, wenn sich die Live-Seite ändert. So bleibt eine Designdatei mit der Produktion im Takt, ohne dass du einen neuen Import von vorn beginnen oder Frames erneut umbenennen musst.
Verwandte Themen
Schluss mit dem Nachbauen von Webseiten.
Link einfügen und in Sekunden echte, bearbeitbare, responsive Figma-Ebenen erhalten. Kostenlos starten – 10 Importe pro Monat.
Keine Kreditkarte nötig. Pro kaufst du direkt in Figma.
Bald in der Figma Community