Figma-Plugin · Chrome-Erweiterung · MCP
Jede Webseite als echte Figma-Ebenen.
HTML to Frames wandelt Live-URLs, lokales HTML, Chrome-Tabs und KI-generierten Code in bearbeitbare, responsive Figma-Frames um – mit verifiziertem Auto Layout, damit dein Design niemals bricht.
Free-Plan: 10 Importe pro Monat. Kein Konto, keine Kreditkarte.
Bald in der Figma Community
- Auto Layout, verifiziert
- Desktop · Tablet · Mobile
- Variablen & Styles
- Komponenten & Hover-Zustände
Fünf Wege rein. Ein sauberes Ergebnis.
- LinkBeliebige öffentliche URL einfügen.
- MultipleBis zu 10 Links auf einmal, in jedem Plan.
- Local fileHTML-Datei, Website-Ordner, .zip oder eingefügter Code.
- BrowserSeiten mit Login, localhost, geöffnete Menüs.
- KI-ToolsClaude, Cursor und jeder MCP-Client.
So funktioniert’s
Von der URL zu Auto-Layout-Frames in vier Schritten
Das ist der echte Ablauf im Plugin – dasselbe Panel, das du in Figma nutzt.
yoursite.com — Desktop (1440)
Tablet (768)
Mobile (390)
3 Frames importiert
Auto Layout auf 60 von 77 Frames · 23 Farbvariablen · 19 Textstile · 10 Komponenten
- 01
Link einfügen
Oder einen Ordner ablegen, Code einfügen, einen Chrome-Tab senden oder dein KI-Tool eine Seite schicken lassen.
- 02
Screens wählen
Desktop öffnet in der eigenen Designbreite der Website – gemessen, nicht geraten. Tablet und Mobile fügst du mit einem Klick hinzu.
- 03
Importieren
Ein isolierter Browser rendert die Seite so, wie normale Besucher sie sehen, blendet Cookie-Banner aus und lädt Lazy-Content nach.
- 04
Sofort bearbeiten
Frames, Texte, Vektoren und Bilder kommen mit Auto Layout, Variablen, Textstilen und Komponenten an.
2 px
Auto Layout wird mit einer Toleranz von 2 px gegen das Layout des Browsers geprüft.
86–97%
Anteil der Frames, die auf den getesteten echten Websites Auto Layout erhalten haben.
10
Links in einem Multiple-Import – auch im Free-Plan enthalten.
4
Screens pro Import bei Pro: Desktop, Laptop, Tablet und Mobile.
Zahlen aus unseren eigenen Tests an echten Websites – keine Marketing-Mathematik.
Die Auto-Layout-Engine
Auto Layout, das dein Design nie zerstört
Die meisten Konverter raten ein Layout und hoffen das Beste. HTML to Frames baut die Seite zuerst pixelgenau auf und arbeitet sich dann von innen nach außen: Aus der vom Browser gemessenen Geometrie leitet es Stapel, umbrechende Zeilen, Abstände, Padding und Ausrichtung ab, wendet Auto Layout an und prüft die Position jedes Kindelements. Verschiebt sich etwas um mehr als 2 px, wird ein einfacherer Plan probiert – und scheitert auch der, behält der Frame seine exakten Positionen mit sinnvollen Constraints. Der Ergebnisbildschirm sagt dir sogar, warum ein Frame absolut geblieben ist.
- Zentrierter Inhalt wird zu Center, gleich breite Karten werden zu Fill
- Container mit max-width bleiben beim Skalieren zentriert
- Absolute Frames erhalten Stretch-, Scale-, Center- oder Min/Max-Constraints
- Eine Diagnoseliste erklärt jeden Frame, der absolute Positionen behalten hat
Funktionen
Alles, was du sonst von Hand nachbauen müsstest
HTML to Frames liest die Seite so, wie ein Browser sie layoutet, und schreibt Figma-Ebenen so, wie Designer sie aufbauen würden.
Verifiziertes Auto Layout
Zeilen, Stapel und Grids werden zu Auto Layout. Jeder Frame wird nach dem Anwenden geprüft – passt er nicht, wird zurückgerollt.
Responsive set
Desktop, Tablet und Mobile in einem einzigen Import, parallel erfasst und nebeneinander angeordnet.
Gemessene Seitenbreite
Desktop öffnet in der echten Designbreite der Seite – 1920 bei Full-Bleed-Layouts, die Containerbreite bei geboxten Websites.
Variablen & Styles
Farben werden zu Variablen, benannt nach den CSS-Tokens der Website; Typografie und Schatten werden zu Styles. Vorhandene werden wiederverwendet.
Komponenten & Hover
Wiederholte Karten, Buttons und Menüpunkte werden zu Komponenten mit Instanzen; Hover-Looks werden zu Varianten.
Light- + Dark-Modi
Ein Import, zwei Modi: eine Variablensammlung mit Light- und Dark-Werten plus eine dunkle Kopie jedes Screens.
Prototyp-bereit
Links bleiben klickbar, importierte Seiten verlinken aufeinander, fixierte Header und Scrollbereiche funktionieren im Present-Modus.
Font-Zuordnung
Fehlende Schriften? Wähle einmal Ersatz aus – er wird pro Website gespeichert.
Privat von Grund auf
Ergebnisse werden einmal ausgeliefert und nie auf die Festplatte geschrieben. Hochgeladene Dateien werden gelöscht, sobald der Import fertig ist.
Designsystem-fähig
Importe, die sich in dein Designsystem einfügen
Mehrfach verwendete Farben werden zu Variablen – benannt nach den CSS Custom Properties der Website, sofern vorhanden, etwa brand/primary. Typografie wird zu Textstilen, wiederkehrende Schatten zu Schatten-Styles. Mit Snap to my file's styles werden Farben und Schriften, die deinen fast gleichen, auf deine eigenen Variablen und Styles gemappt – so sieht ein Import aus, als wäre er in deiner Datei entstanden.
- Bis zu 96 Farbvariablen und 48 Textstile pro Website
- Verwendet Variablen und Styles wieder, die in deiner Datei schon existieren
- Light + Dark in einer Sammlung mit zwei Modi erfasst
- Komponenten mit Default-/Hover-Varianten und On-Hover-Interaktionen
Gemacht für alle, die zwischen Web und Figma arbeiten
Product- & UI-Designer
Starte ein Redesign vom Original, nicht von einem Screenshot. Prüfe Abstände, Typografie und Farben in Sekunden.
Designagenturen
Hol die aktuelle Website eines Kunden noch am selben Tag für ein Angebot in Figma. Team-Plan für fünf Plätze.
Designsystem-Teams
Finde jede Farbe und jeden Textstil, den ein Produkt tatsächlich nutzt – gemappt auf deine Variablen.
Frontend-Entwickler
Übergib Arbeit von localhost oder Staging als bearbeitbare Figma-Frames ans Design.
KI-Builder
Schick UI aus Claude Code, Claude Desktop oder Cursor direkt in deine Figma-Datei.
Studierende
Nimm großartige Websites Ebene für Ebene auseinander und lerne, wie sie gebaut sind.
Bearbeitbare Ebenen schlagen Screenshots und Nachbauten
| Screenshot | Manueller Nachbau | HTML to Frames | |
|---|---|---|---|
| Bearbeitbarer Text | Nein | Ja | Ja |
| Auto Layout | Nein | Ja, von Hand | Ja, verifiziert |
| Variablen & Styles | Nein | Von Hand | Erzeugt oder wiederverwendet |
| Tablet & Mobile | Separate Aufnahmen | Stunden mehr Arbeit | Ein Import |
| Zeit für eine Seite | Sekunden | Stunden | Sekunden bis eine Minute |
Faire Preise, Einführungsrabatt inklusive
Starte kostenlos. Pro ist zum Start für $7 im Monat unbegrenzt – und wer früh dabei ist, behält diesen Preis.
- 10 Importe pro Monat
- 1 Screen pro Import
- Multiple-Import – bis zu 10 Links
- Link, lokale Dateien, Chrome-Erweiterung, KI-Tools
- Verifiziertes Auto Layout
- Gemessene Seitenbreite
- Font-Zuordnung
- Prototyp-Links
Pro
EinführungspreisUnbegrenzte Importe und das komplette Toolkit, gekauft direkt in Figma.
- Unbegrenzte Importe (Fair Use 1.000 / Monat)
- Bis zu 4 Screens pro Import
- Styles & Variablen
- Snap to my file's styles (an Styles deiner Datei anpassen)
- Komponenten & Hover-Varianten
- Light- + Dark-Variablenmodi
- Eigene Breiten
- Detaillierte Ebenen, Referenz-Screenshot, zusätzliche Wartezeit
Team
5 PlätzeAlles aus Pro für dein ganzes Team, mit einem Lizenzschlüssel.
- Alles aus Pro
- 5 Plätze auf einem Lizenzschlüssel
- Unbegrenzte Importe (Fair Use 5.000 / Monat)
- Plätze lassen sich zwischen Personen übertragen
Deine Seiten sind nicht unsere Daten
Seiten werden in einem isolierten Sandbox-Browser gerendert. Das Ergebnis wird einmal an dein Plugin ausgeliefert und dann gelöscht – nie auf die Festplatte geschrieben. Hochgeladene Dateien werden gelöscht, sobald der Import abgeschlossen ist. Keine Cookies, kein Tracking, keine Werbung.
Blog
Alle ArtikelCSS to Figma Auto Layout: Flexbox und Grid richtig abbilden
Flexbox und Figma Auto Layout sehen sich ähnlich, sind aber nicht dasselbe Modell. Dieser technische Leitfaden ordnet CSS-Eigenschaften den Auto-Layout-Einstellungen zu, erklärt, warum Verifizierung wichtig ist, und zeigt, wie du CSS schreibst, das sich sauber importieren lässt.
10 Min. Lesezeitlocalhost to FigmaLocalhost to Figma: Jede Seite mit der Chrome-Erweiterung
Manche Seiten erreicht ein URL-Import nicht: deinen localhost-Build, ein Dashboard hinter einem Login, ein Menü, das gerade geöffnet ist. Die kostenlose HTML to Frames Chrome-Erweiterung erfasst sie aus deinem eigenen Browser und macht daraus bearbeitbare Figma-Ebenen.
9 Min. LesezeitAI to FigmaAI to Figma: UI aus Claude und Cursor per MCP nach Figma
KI-Coding-Tools bauen in Minuten eine funktionierende UI, aber Designer brauchen sie trotzdem in Figma. So verbindest du Claude Code, Claude Desktop oder Cursor per MCP mit HTML to Frames und bekommst bearbeitbare Ebenen statt Screenshots.
9 Min. LesezeitHäufige Fragen
Es ist ein Figma-Plugin, das Webseiten in echte, bearbeitbare Figma-Ebenen umwandelt. Du kannst eine Live-URL importieren, bis zu 10 Links auf einmal, eine lokale HTML-Datei oder einen Website-Ordner, eingefügten Code, einen mit der Chrome-Erweiterung erfassten Tab oder HTML, das ein KI-Tool per MCP schickt. Die Seiten kommen als Frames mit Text, Vektoren und Bildern an – mit Auto Layout, Variablen, Styles und Komponenten.
Nein. Jede Überschrift ist eine bearbeitbare Textebene, jedes Icon ein Vektor und jeder Abschnitt ein Frame. Nur Inhalte, die kein HTML sind – eine Karte in einem iframe, eine WebGL-Szene oder ein Video ohne Poster – werden als Bild dieses Bereichs eingefügt, damit der Rest der Seite voll bearbeitbar bleibt.
Das Plugin wendet Auto Layout an und prüft danach die Position jedes Kindelements mit 2 px Toleranz gegen das Layout des Browsers. Hält ein Frame nicht, probiert es ein einfacheres Layout oder behält absolute Positionen mit Constraints. In unseren Tests an echten Websites erhielten 86–97% der Frames Auto Layout; die übrigen werden mit Begründung aufgelistet.
Ja, mit der kostenlosen HTML to Frames Chrome-Erweiterung. Sie erfasst den Tab in deinem eigenen Browser – inklusive Dashboards mit Login, localhost, privater Netzwerke, geöffneter Menüs und ausgefüllter Formulare – und schickt ihn per Zwischenablage oder mit Send to Figma an das Plugin.
Desktop in der gemessenen Designbreite der Website, Laptop 1280, Tablet 768 und Mobile 390, dazu eigene Breiten bei Pro. Das Responsive set importiert Desktop, Tablet und Mobile mit einem Klick. Free enthält einen Screen pro Import, Pro und Team bis zu vier.
Free bietet dir 10 Importe pro Monat. Pro ist unbegrenzt (Fair Use) für $7 im Monat zum Start, regulär $9, und wird direkt in Figma gekauft. Team kostet zum Start $22 im Monat, regulär $29, für fünf Plätze mit einem gemeinsamen Lizenzschlüssel. Ein Import ist eine Seite mit all ihren Screens.
Sie werden in einem isolierten Browser gerendert, einmal an dein Plugin ausgeliefert und dann aus dem Speicher gelöscht – nie auf die Festplatte geschrieben. Hochgeladene Dateien werden entfernt, sobald der Import fertig ist. Das Plugin liest deine Figma-Datei nicht, und wir erhalten von Figma weder deinen Namen noch deine E-Mail-Adresse.
Ja. Verbinde Claude Code, Claude Desktop, Cursor oder einen anderen MCP-Client über den AI-Tab des Plugins. Dein KI-Tool kann dann import_html oder import_url aufrufen, und die Seite landet in deiner geöffneten Figma-Datei – importiert mit deinem eigenen Plan.
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