Funktionen
Das komplette HTML to Figma Toolkit
Von einer einzelnen URL bis zur mehrseitigen, responsiven Figma-Datei, die dein Designsystem kennt. Hier ist alles, was HTML to Frames kann – und wie.
Import von überall
Fünf Quellen decken öffentliche Websites, Dateien auf deinem Rechner, Seiten, die nur dein Browser sieht, und von KI geschriebenen Code ab.
Link
Beliebige öffentliche URL einfügen. Die Seite wird in einem isolierten Browser gerendert, Lazy-Content wird ins Bild gescrollt, und Cookie-Banner und Pop-ups werden auf Wunsch ausgeblendet.
Multiple-Import
Bis zu 10 Links pro Import, nacheinander verarbeitet. Jede Seite wird zu einer eigenen Reihe von Screens. In jedem Plan enthalten – kein Pro nötig.
Lokale Dateien & eingefügter Code
Leg eine HTML-Datei, einen ganzen Website-Ordner oder eine .zip ab und wähle die zu importierenden Seiten – oder füge HTML/CSS direkt ein. Dateien werden aus dem Arbeitsspeicher ausgeliefert und nach dem Import gelöscht.
Chrome-Erweiterung
Erfasse Dashboards mit Login, localhost, private Netzwerke und den aktuellen Zustand der Seite. Wähle ein einzelnes Element oder die ganze Seite, dann einfügen oder Send to Figma.
KI-Tools per MCP
Verbinde Claude Code, Claude Desktop, Cursor oder jeden MCP-Client. Sie rufen import_html oder import_url auf, und die Seite landet in deinem geöffneten Plugin.
Verlinkte Seiten importieren & Re-import
Wähle nach einem Import weitere Seiten derselben Website aus einer Liste. Aktualisiere jeden Frame später per Klick mit Re-import.
Screens wie auf der echten Website
Responsive Design heißt mehr als drei Screenshots. HTML to Frames rendert jede Breite separat – so bekommst du die echten Tablet- und Mobile-Layouts.
Site width, gemessen
Desktop öffnet in der Designbreite, für die die Website gebaut wurde: 1920 mit zentrierter Box bei Full-Bleed-Layouts, die Containerbreite bei geboxten Websites, 1440 bei fluiden.
Responsive set
Desktop + Tablet 768 + Mobile 390 mit einem Klick; Laptop 1280 und eigene Breiten bei Pro. Screens werden parallel erfasst.
Aufgeräumter Canvas
Eine Reihe pro Seite, Screens nebeneinander, Frames benannt wie yoursite.com/pricing — Desktop (1920).
Auto Layout, dem du vertrauen kannst
Das Herzstück von HTML to Frames. Auto Layout wird aus echter Browser-Geometrie abgeleitet, angewendet und verifiziert – nie einfach angenommen.
Stapel, Zeilen und Grids
Vertikale und horizontale Stapel, umbrechende Zeilen, Abstände, Padding und Ausrichtung werden aus der gemessenen Position jedes Kindelements abgeleitet.
Responsive Bedeutung
Zentrierter Inhalt bleibt zentriert, gleiche Karten füllen auf, Container mit max-width bleiben mittig und Abstandshalter dehnen sich – so skalieren Frames wie die Website.
Verifiziert auf 2 px genau
Nach dem Anwenden von Auto Layout wird die Position jedes Kindelements mit dem Browser verglichen. Hat es sich bewegt, wird ein einfacherer Plan probiert; sonst behält der Frame exakte Positionen.
Smarte Constraints
Frames mit absoluten Positionen erhalten Stretch-, Scale-, Center- oder Min/Max-Constraints, damit Größenänderungen weiterhin sauber funktionieren.
Diagnose
Der Ergebnisbildschirm listet auf, warum ein Frame absolut geblieben ist – ungleiche Abstände, Überlappungen, unterschiedliche Textgrößen – nichts bleibt ein Rätsel.
Designsystem, extrahiert
Mach aus Farben, Typografie und wiederkehrender UI einer Website die Bausteine eines Figma-Designsystems – oder mappe sie auf deines.
Farbvariablen
Bis zu 96 Farbvariablen in einer Sammlung „Colors · domain“, benannt nach den CSS Custom Properties der Website (zum Beispiel --brand-primary → brand/primary).
Text- & Schatten-Styles
Bis zu 48 Textstile, benannt nach Rolle und Größe, plus Schatten-Styles von sm bis xl. Füllungen, Konturen und Textfarben werden an Variablen gebunden.
Wiederverwenden statt duplizieren
Hat deine Datei bereits eine Variable oder einen Style mit demselben Wert, wird er genutzt. Wer dieselbe Website zweimal importiert, erzeugt nichts Neues.
Snap to my file's styles
Beinahe-Treffer rasten auf die nächstgelegene Farbe und den nächstgelegenen Textstil deines eigenen Designsystems ein – anhand der wahrgenommenen Farbdistanz.
Komponenten & Hover-Varianten
Wiederholte Karten, Buttons und Menüpunkte werden zu Komponenten und Instanzen. Hover-Looks werden zu Default-/Hover-Varianten mit einer On-Hover-Interaktion.
Light + Dark
Die Seite wird im hellen und dunklen Farbschema gelesen und in eine Sammlung mit zwei Modi geschrieben, plus eine dunkle Kopie jedes Screens.
Detailtreue bis ins Kleinste
Echtes CSS ist unordentlich. HTML to Frames beherrscht die Details, die eine Seite wie sie selbst aussehen lassen.
Text
Gemischte Stile in einem Absatz, Links, Laufweite, Zeilenhöhe, text-transform, Hoch- und Tiefstellung, CSS-Zähler und Listenpunkte wie in Chrome.
Füllungen
Lineare, radiale und konische Verläufe inklusive px-Stopps und gekachelter Muster, Mischmodi, Deckkraft, Blur und Backdrop-Blur, Graustufenfilter.
Formen & Effekte
SVG als bearbeitbare Vektoren, Eckenradius, innere und äußere Schatten, Textschatten, einseitige Rahmen, ::before/::after, clip-path, mask-image, Rotation und Skalierung.
Eingebettete Inhalte
Karten, iframes, WebGL und Videos ohne Poster werden als Bild des jeweiligen Bereichs erfasst – nichts bleibt leer.
Bilder
Hochauflösende srcset-Quellen, object-fit, background-size und gekachelte Hintergründe.
Schriften
Ein Missing-fonts-Bildschirm schlägt Ersatzschriften vor, bevor etwas gebaut wird, und merkt sich deine Wahl für diese Website.
Prototyp und Workflow
Importierte Seiten sind sofort klickbar und lassen sich leicht aktuell halten.
Klickbare Links
Links öffnen im Present-Modus ihre URL; Links zwischen importierten Seiten werden zu Navigate-Interaktionen.
Fixed, Sticky & Scroll
Fixierte und sticky Header bleiben stehen, und horizontale Scrollbereiche wie Karussells scrollen im Prototyp.
Akkordeon-Text als Notizen
Optional: Versteckter Text in geschlossenen Akkordeons wird als Figma-Annotation hinzugefügt, damit kein Inhalt verloren geht.
Referenz-Screenshot
Eine versteckte, gesperrte Screenshot-Ebene unter jedem Screen für pixelgenaue Vergleiche (Pro).
Häufige Fragen
Free enthält jede Importquelle, Multiple-Import mit bis zu 10 Links, gemessene Seitenbreite, Auto Layout mit Verifizierung, Font-Zuordnung, Prototyp-Links und Screenshots eingebetteter Inhalte – mit 10 Importen pro Monat und einem Screen pro Import. Styles und Variablen, Komponenten, Light + Dark, eigene Breiten und der Referenz-Screenshot sind Pro-Funktionen.
Ja. Das Plugin liest CSS-Regeln nicht direkt, um das Layout aufzubauen, sondern nutzt die vom Browser gemessene Geometrie. Flexbox- und Grid-Layouts werden zu Auto-Layout-Stapeln und umbrechenden Zeilen, wo immer das Ergebnis auf 2 px genau mit dem Browser übereinstimmt.
Ja, bei Pro. Für Screens in Desktop-Breite erzwingt der Capture-Service den Hover-Zustand von Links und Buttons, vergleicht ihn mit dem Normalzustand und erstellt Default-/Hover-Varianten mit einer On-Hover-Prototyp-Interaktion. Menüs, die JavaScript beim Mouse-Enter öffnet, werden nicht erfasst.
Skew- und 3D-Transformationen, clip-path mit path(), mehrschichtige Masken und Display-P3-Farben werden noch nicht umgewandelt. Eingebettete Canvases, Karten und iframes werden zu Bildern ihres Bereichs statt zu Ebenen.
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