Figma HTML Plugin
Das Figma HTML Plugin, dessen Ebenen du wirklich bearbeiten kannst
Starte es direkt in Figma, füge einen Link ein oder zieh dein HTML hinein – und du bekommst Frames, Texte und Vektoren mit Auto Layout, das gegen die echte Seite geprüft wurde.
- Läuft in jeder Figma-Design-Datei, ohne eigenes Konto
- Fünf Quellen: Link, 10 Links, Dateien, Chrome, KI-Tools
- Free-Plan mit 10 Importen pro Monat
Bald in der Figma Community
Ein Figma HTML Plugin hat genau eine Aufgabe: etwas, das als HTML und CSS existiert, in etwas zu verwandeln, mit dem du in Figma gestalten kannst. Der Unterschied zwischen den Plugins liegt darin, was „etwas, mit dem du gestalten kannst“ bedeutet. Manche fügen einen Screenshot ein. Andere platzieren Hunderte absolut positionierte Boxen, die in sich zusammenfallen, sobald du einen Frame skalierst. HTML to Frames, ein Figma-Plugin von EUREKA!, folgt einem strengeren Maßstab: Jeder Frame, jede Textebene und jeder Vektor soll sich so verhalten, als hätte ein Designer ihn von Hand gebaut.
Deshalb arbeitet das Plugin in zwei Durchgängen. Zuerst baut es die Seite pixelgenau nach. Dann geht es die Frames von innen nach außen durch, leitet aus der vom Browser gemessenen Geometrie Stapel, umbrechende Zeilen, Abstände, Innenabstände und Ausrichtung ab, wendet Auto Layout an und prüft die Position jedes Kindelements auf 2 px genau. Würde sich ein Frame verschieben, versucht das Plugin einen einfacheren Plan oder behält die exakten Positionen mit sinnvollen Constraints. In unseren Tests mit echten Websites blieb Auto Layout auf etwa 86–97 % der Frames erhalten – und das Design bricht nie.
Das Plugin läuft dort, wo du ohnehin arbeitest. Öffne es in einer beliebigen Figma-Design-Datei über Plugins → HTML to Frames, wähle eine Quelle und klick auf Import. Ein eigenes Konto musst du nicht anlegen: Der Free-Plan startet automatisch, und Pro kaufst du direkt in Figma über Figmas eigenen Bezahlvorgang.
Wenn du Optionen vergleichst, fang mit dem Überblick zu HTML zu Figma an, sieh dir auf der Funktionsseite genau an, was umgewandelt wird, oder lies den ehrlichen Vergleich der HTML-zu-Figma-Tools.
So nutzt du das Figma HTML Plugin
- 01
In Figma öffnen
Geh in einer Figma-Design-Datei auf Plugins → HTML to Frames oder drück ⌘/ und tippe den Namen.
- 02
Quelle des HTML wählen
Link, Multiple (bis zu 10 Links), Local file, Browser für die Chrome-Erweiterung oder AI für MCP-Tools.
- 03
Screens und Optionen festlegen
Desktop öffnet in der gemessenen Seitenbreite. In Pro fügst du mit Responsive set Tablet und Mobil hinzu.
- 04
Importieren und bearbeiten
Die Frames kommen nach Seite und Screen benannt an – mit Auto Layout, bearbeitbarem Text und Vektoren, die du sofort ändern kannst.
Was ein gutes Figma HTML Plugin leisten sollte
Native Ebenen statt Bild
Frames, bearbeitbarer Text mit gemischten Formatierungen, SVG als Vektoren und Bilder mit ihrer ursprünglichen Skalierung und Kachelung.
Auto Layout, das hält
Stapel, Zeilen und Raster werden zu Auto Layout, auf 2 px geprüft; Frames, die sich verschieben würden, behalten exakte Positionen.
Responsive Screens
Desktop in der gemessenen Breite der Website, dazu in Pro Laptop, Tablet, Mobil oder eine eigene Breite.
Mehr als öffentliche URLs
HTML-Dateien, ganze Website-Ordner, .zip-Archive und eingefügter Code, geöffnet in einem isolierten Browser.
Bausteine fürs Designsystem
Farbvariablen, Text- und Schattenstile, Komponenten und Hover-Varianten in Pro – unter Wiederverwendung dessen, was deine Datei schon hat.
Datenschutz von Anfang an
Das Plugin liest den Inhalt deiner Datei nie. Ergebnisse werden einmal ausgeliefert und nie auf die Festplatte geschrieben.
Plugin, Chrome-Erweiterung oder MCP: welcher Weg passt?
HTML to Frames ist ein Produkt mit drei Zugängen – und alle führen im Plugin zum selben bearbeitbaren Ergebnis.
Das Figma-Plugin allein
Ideal für alles mit einer öffentlichen Adresse. Füge einen Link ein oder mit Multiple bis zu 10 Links. Der Capture-Dienst rendert jede Seite in einem isolierten Browser so, wie ein normaler Besucher sie sieht – Cookie-Banner und Pop-ups blendet er auf Wunsch aus. Lokale HTML-Dateien, Website-Ordner und .zip-Archive bis 30 MB nehmen denselben Weg und werden gelöscht, sobald der Import fertig ist.
Plugin + Chrome-Erweiterung
Ideal für Seiten, die der Dienst nicht erreicht: Dashboards hinter einem Login, localhost, Staging in einem privaten Netzwerk oder eine Seite in einem bestimmten Zustand, etwa mit geöffnetem Menü oder ausgefülltem Formular. Die kostenlose Chrome-Erweiterung für Figma erfasst, was dein Browser anzeigt, und schickt es mit Send to Figma direkt ins geöffnete Plugin.
Plugin + KI-Tools
Ideal, wenn das HTML noch gar nicht existiert. Verbinde Claude Code, Claude Desktop, Cursor oder einen anderen MCP-Client über den AI-Tab des Plugins und lass dir eine Seite entwerfen. Das Ergebnis landet in deinem Plugin und wird über deinen eigenen Plan importiert. Die Einrichtung erklärt KI zu Figma.
Woran du ein Figma HTML Plugin erkennst, das taugt
Bevor du ein ganzes Team auf ein Tool festlegst, importiere mit jedem Kandidaten dieselben drei Seiten: eine Marketingseite, einen dichten Produkt-Screen und eine Seite mit dunklem Theme. Dann prüfst du fünf Dinge.
- Kannst du den Text bearbeiten? Klick in eine Überschrift und tippe. Ist sie Teil eines Bildes, ist der Import eine Referenz, kein Design.
- Übersteht das Auto Layout eine Größenänderung? Zieh den Frame breiter. Zeilen sollten sich dehnen, zentrierte Inhalte zentriert bleiben, und nichts sollte sich überlappen.
- Stimmen die Breiten? Eine Website, die für 1200 px gestaltet wurde, sollte nicht in 1440 px gequetscht ankommen. HTML to Frames misst die echte Designbreite und nennt sie Site width.
- Sind die Stile wiederverwendbar? Achte auf Farbvariablen und Textstile statt Hunderter roher Hex-Werte – und darauf, ob ein bestehendes Designsystem genutzt wird.
- Wohin gehen deine Daten? Lies die Datenschutzerklärung. Unser Capture-Dienst liefert jedes Ergebnis einmal aus, speichert nichts auf der Festplatte und löscht hochgeladene Dateien direkt nach dem Import; die Details stehen auf der Sicherheitsseite.
Besteht ein Tool alle fünf Punkte, spart es dir Zeit in echten Projekten – nicht nur in einer Demo.
Pläne, Limits und was als Import zählt
Der Free-Plan enthält 10 Importe im Monat, einen Screen pro Import, den Mehrfach-Import mit bis zu 10 Links, Auto Layout und die Schriftzuordnung. Pro kostet zum Start $7 im Monat (regulär $9) und bringt unbegrenzte Importe mit einer Fair-Use-Grenze von 1.000 pro Monat, bis zu vier Screens pro Import, eigene Breiten, Stile und Variablen, Snap, Komponenten und Hover-Zustände, Light + Dark, detaillierte Ebenen, einen Referenz-Screenshot und längere Wartezeit. Team deckt 5 Plätze für $22 im Monat zum Start mit einem gemeinsamen Lizenzschlüssel ab.
Ein Import ist eine Seite mit all ihren Screens – Desktop, Tablet und Mobil derselben Seite zählen also einmal. Auch eine Aufnahme mit der Chrome-Erweiterung zählt als ein Import. Die Zähler werden jeden Monat zurückgesetzt (UTC). Alle Details findest du auf der Preisseite.
Häufige Fragen
Ja. HTML to Frames hat einen Free-Plan mit 10 Importen im Monat und einem Screen pro Import. Der Mehrfach-Import mit bis zu 10 Links, Auto Layout und die Schriftzuordnung sind enthalten. Du brauchst weder Konto noch Karte; der Plan startet, sobald du das Plugin zum ersten Mal öffnest.
Öffne HTML to Frames in einer Figma-Design-Datei über das Plugins-Menü. Wähle Link und füge eine URL ein, oder wähle Local file und zieh eine HTML-Datei, einen Ordner oder eine .zip hinein. Leg die Screens fest, lass Auto Layout eingeschaltet und klick auf Import. Die Seite erscheint als bearbeitbare Frames auf deinem Canvas.
Das Plugin ist für Figma-Design-Dateien gebaut, denn dort gibt es Frames, Auto Layout, Variablen und Komponenten. Öffne eine Design-Datei, um es zu starten.
Allein nicht, weil der Capture-Dienst nur öffentliche Adressen öffnet. Installiere die kostenlose Chrome-Erweiterung von HTML to Frames: Sie erfasst, was dein eigener Browser anzeigt, und schickt es an das Plugin – auch Seiten hinter einem Login, localhost und private Netzwerke.
Nein. Es schreibt die importierten Ebenen und liest nur die Metadaten seiner eigenen Frames, etwa Quell-URL und Breite, damit du später neu importieren kannst. Schriftnamen werden lokal geprüft, um fehlende Schriften zu finden.
Die wichtigsten Unterschiede sind geprüftes Auto Layout, das das Design nie zerstört, eine gemessene Seitenbreite, automatische Komponenten aus wiederkehrenden Strukturen, Light- und Dark-Variablenmodi in einem Import, Mehrfach-Import in jedem Plan und das sofortige Löschen hochgeladener Dateien. Die Seite mit den Alternativen vergleicht die Tools direkt nebeneinander.
Passend dazu
Schluss mit dem Nachbauen von Websites.
Link einfügen – und in Sekunden hast du echte, bearbeitbare und responsive Figma-Ebenen. Der Einstieg ist kostenlos: 10 Importe pro Monat.
Keine Kreditkarte nötig. Pro kaufst du direkt in Figma.
Bald in der Figma Community