Dokumentation zu HTML to Frames

1. Öffne Figma (Desktop-App oder Browser) und geh auf die Community-Seite von HTML to Frames.
2. Klick auf Open in… oder Try it out und wähle eine Datei. Das Plugin wird in deinem Konto gespeichert.
3. Beim nächsten Mal startest du es über das Menü: Plugins → HTML to Frames – oder drück ⌘/ (Strg / unter Windows) und tippe HTML to Frames.

Das Plugin funktioniert in Figma Design-Dateien. Es braucht kein Konto: Der Free-Plan startet automatisch, Pro wird direkt in Figma gekauft.

1. Lass im Tab Import die Quelle auf Link und füge eine URL ein, zum Beispiel deine eigene Startseite.
2. Unter Screens ist Desktop ausgewählt und zeigt Site width (Seitenbreite) – das Plugin misst beim Import die echte Designbreite der Seite. Bei Pro klickst du auf Responsive set, um Tablet und Mobile hinzuzufügen.
3. Lass Auto Layout aktiviert. Klick auf Import.
4. Verfolge den Fortschritt: Die Seite wird gerendert, Bilder werden vorbereitet, Ebenen werden erstellt und Auto Layout wird angewendet und verifiziert.
5. Der Ergebnisbildschirm zeigt die Anzahl der Frames und Ebenen, den Anteil der Frames mit Auto Layout, fehlende Schriften und eventuelle Warnungen.

Deine Seite erscheint auf dem Canvas als Reihe von Frames mit Namen wie yoursite.com — Desktop (1920). Jeder Text, jedes Bild und jeder Vektor ist bearbeitbar.

Link

Jede öffentliche Seite. Seiten, die einen Login erfordern, auf localhost oder in einem privaten Netzwerk liegen, kann der Capture-Service nicht erreichen – nutze dafür die Chrome-Erweiterung.

Multiple

Füge bis zu 10 Links ein, einen pro Zeile. Sie werden nacheinander importiert, jeder als eigene Reihe. Seiten derselben Website teilen sich eine gemessene Breite, damit sie sauber untereinander stehen.

Local file

Wähle eine HTML-Datei, einen Website-Ordner oder eine .zip (bis 30 MB). Bei Ordnern wählst du die zu importierenden Seiten aus. Du kannst auch Paste code wählen und HTML mit Inline- oder eingebettetem CSS einfügen. Dateien werden aus dem Arbeitsspeicher in einem isolierten Browser geöffnet und direkt nach dem Import gelöscht.

Browser

Füge eine mit der HTML to Frames Chrome-Erweiterung erstellte Aufnahme ein (⌘V), leg eine .h2f-Datei ab oder verbinde die Erweiterung einmalig und nutze Send to Figma. Siehe Chrome-Erweiterung.

KI-Tools

Verbinde im Tab AI einen MCP-Client und lass dein KI-Tool Seiten senden. Siehe KI-Tools (MCP).

Site width wird beim Import gemessen: Layouts mit randlosen Abschnitten landen in einem 1920er-Frame mit zentrierter Inhaltsbox; echt geboxte Websites nutzen ihre Containerbreite (zum Beispiel 1200 oder 1280); fluide Layouts nutzen 1440. Free importiert einen Screen pro Seite, Pro und Team bis zu vier. Alle Screens einer Seite zählen als ein Import.

Vor dem Aufbau prüft das Plugin, welche Schriften der Seite in Figma auf deinem Rechner nicht verfügbar sind. Der Bildschirm Missing fonts (fehlende Schriften) schlägt für jede einen Ersatz vor – zuerst eine Familie, die mit demselben Wort beginnt, dann die erste installierte Schrift aus dem CSS-Font-Stack, dann Inter. Such bei Bedarf eine andere Familie aus und entscheide, ob die Wahl für diese Website oder alle Websites gespeichert wird. Skip verwendet die Vorschläge einmalig, ohne zu speichern. Gespeicherte Zuordnungen löschst du mit forget saved unter der Option.

Mit aktivierter Option Styles & variables (Pro):

• Farben, die mindestens zweimal vorkommen – und Farben, die den CSS Custom Properties der Website entsprechen – werden zu Variablen in einer Sammlung namens Colors · yoursite.com. Die Namen stammen wenn möglich aus den Tokens der Website (--brand-primary → brand/primary), sonst aus Farbton und Abstufung (blue/500).
• Typografie, die mindestens zweimal vorkommt oder 20 px und größer ist, wird zu Textstilen mit Namen wie yoursite.com/Heading/32/40 Bold.
• Wiederkehrende Schatten werden zu den Schatten-Styles sm, md, lg, xl.
• Enthält deine Datei bereits eine Variable oder einen Style mit demselben Wert, wird er wiederverwendet.

Snap to my file's styles geht noch einen Schritt weiter und mappt Beinahe-Treffer auf dein eigenes Designsystem.

Mit aktivierter Option Components & hover states werden wiederkehrende Strukturen zu Komponenten, die in einem Frame Components · yoursite.com neben der Seite liegen, und jedes Vorkommen wird zu einer Instanz mit eigenen Texten und Bildern. Elemente mit Hover-Look werden zu Komponenten-Sets mit den Varianten State=Default und State=Hover.

Wähle Color scheme → Light + Dark (Pro). Die Seite wird zweimal gelesen – mit prefers-color-scheme: light und dark – ohne neu zu laden. Jede Farbe, die sich ändert, wird zu einer Variable mit einem Light- und einem Dark-Wert, und neben jedem Screen wird eine dunkle Kopie platziert, deren Sammlung auf Dark steht. Figma-Dateien im Starter-Plan erlauben nur einen Modus pro Sammlung; in diesem Fall teilt dir das Plugin mit, dass der Dark Mode übersprungen wurde. Websites, die das Theme nur per JavaScript-Schalter (nicht über die Systemeinstellung) wechseln, werden in ihrem Standard-Theme importiert.

• Links funktionieren im Present-Modus weiter: Externe Links öffnen ihre URL; Links zu Seiten, die du ebenfalls importiert hast, werden zu Navigate-Interaktionen.
• Fixierte und sticky Header bleiben beim Scrollen stehen; horizontale Karussells und Scrollbereiche scrollen.
• Nach einem Import listet Import linked pages weitere Seiten derselben Website auf, die auf der Seite gefunden wurden. Hak die gewünschten an, und sie werden als Multiple-Import mit denselben Einstellungen importiert.
• Wähle einen importierten Frame aus und klick auf Re-import, um eine frische Version von der gespeicherten Quell-URL zu holen.

Nutze die kostenlose HTML to Frames Chrome-Erweiterung für Seiten, die der Capture-Service nicht erreicht: Seiten mit Login, localhost, Intranets und den exakten Zustand einer Seite (ein geöffnetes Dropdown, ein ausgefülltes Formular).

1. Installiere die Erweiterung und pinne sie an die Symbolleiste.
2. Öffne die Seite und klick auf die Erweiterung → Capture this page, oder Select an element, um nur einen Teil zu erfassen (Maus bewegen, ↑ für das Elternelement, ↓ zurück, Enter zum Auswählen, Esc zum Abbrechen).
3. Die Aufnahme wird in deine Zwischenablage kopiert (oder als .h2f-Datei heruntergeladen).
4. Öffne in Figma das Plugin → Tab Browser → drück ⌘V oder leg die Datei ab.

Send to Figma: Klick im Browser-Tab des Plugins auf Connect, um einen Einmalcode zu erhalten, und gib ihn in der Erweiterung unter Connect to Figma ein. Ab dann lautet der Hauptbutton Send to Figma, und Aufnahmen gehen direkt in dein geöffnetes Plugin.

Die Erweiterung erfasst einen Screen in der aktuellen Fensterbreite – ändere die Fenstergröße für Tablet- oder Mobile-Layouts. Jede Aufnahme zählt als ein Import.

1. Öffne das Plugin → Tab AI → Connect an AI tool. Ein persönlicher Token wird erstellt und einmalig angezeigt.
2. Kopiere das Setup für deinen Client: Claude Code (ein claude mcp add-Befehl), Claude Desktop (eine Konfiguration mit mcp-remote) oder Cursor & others (JSON mit URL und Header).
3. Lass das Plugin in Figma geöffnet und bitte dein KI-Tool, eine Seite zu importieren, zum Beispiel: „Bau eine Preisseite mit drei Plänen und schick sie mit HTML to Frames an Figma.“

Verfügbare Tools: import_html (HTML bis 2 MB, optional Name und Screens), import_url (jede öffentliche URL) und import_status. Der Import läuft in deinem Plugin mit deinem Plan, und das Tool erhält eine Zusammenfassung – Frames, Ebenen, Auto-Layout-Anteil und fehlende Schriften. Create a new token macht den alten ungültig; Disconnect entfernt ihn. Web-Connectors in claude.ai werden noch nicht unterstützt.

Ein Import = eine Seite mit all ihren Screens. Die Zähler werden monatlich zurückgesetzt (UTC). Wird eine sehr lange Seite durch ein Plan-Limit abgeschnitten, bekommt der Frame einen lila Capture limit-Streifen, damit du es immer erkennst. Kaufe Pro im Tab Plan über den Figma-Checkout; Team-Mitglieder geben ihren Lizenzschlüssel im selben Tab ein und können ihn aus einem Konto entfernen, um den Platz freizugeben.

Die Seite sieht anders aus als in meinem Browser. Aktiviere Hide cookie banners & popups, probier Extra wait bei langsamen Animationen oder nutze die Chrome-Erweiterung, um genau das zu erfassen, was du siehst.

„This address can't be reached.“ Der Capture-Service öffnet nur öffentliche Adressen. Für localhost, Staging hinter einem VPN oder Seiten mit Login nutze die Chrome-Erweiterung.

Text bricht anders um. Meist liegt es an einer anderen Schrift – ordne die fehlende Schrift auf dem Bildschirm Missing fonts der richtigen Familie zu.

Manche Frames haben kein Auto Layout. Das ist Absicht, wenn Auto Layout Elemente verschieben würde. Öffne auf dem Ergebnisbildschirm die Diagnoseliste, um den Grund zu sehen (ungleiche Abstände, Überlappung, Textgröße).

Etwas ist leer. Karten, iframes und WebGL-Szenen werden als Bilder erfasst; ist eines trotzdem leer, brauchte der Inhalt vermutlich eine Nutzeraktion oder einen Login.

„Limit reached.“ Du hast die Free-Importe dieses Monats aufgebraucht. Sie werden am 1. zurückgesetzt (UTC) – oder du wechselst zu Pro für unbegrenzte Importe.

Kommst du nicht weiter? Schreib an [email protected] mit der URL und einem Screenshot.