Figma-Plugin
HTML to Figma: HTML in bearbeitbare Ebenen umwandeln statt in einen Screenshot
HTML to Frames verwandelt jede Webseite in echte Figma-Frames, Texte, Vektoren und Bilder – mit Auto Layout, das geprüft wird, bevor es bleibt.
- Fünf Quellen: Link, mehrere Links, lokale Dateien, Chrome-Tab, KI-Tools
- Auto Layout wird Kindelement für Kindelement verifiziert – das Design bricht nie
- Free-Plan mit 10 Importen pro Monat
Bald in der Figma Community
HTML in Figma umzuwandeln klingt einfach – bis du das Ergebnis öffnest: ein flaches Bild, das du nicht bearbeiten kannst, oder ein Haufen absolut positionierter Boxen, die auseinanderfallen, sobald du einen Frame skalierst. HTML to Frames, ein Figma-Plugin von EUREKA!, geht einen anderen Weg. Es rendert deine Seite in einem echten Browser, misst jedes Element und baut es auf deinem Canvas als native Figma-Ebenen nach: Frames, bearbeitbarer Text mit gemischten Stilen, in Vektoren umgewandeltes SVG und Bilder mit ihrer ursprünglichen Einpassung und Kachelung.
Das Plugin baut die Seite zuerst pixelgenau mit absoluten Positionen auf. Dann durchläuft es die Frames von innen nach außen und leitet Stapel, umbrechende Zeilen, Abstände, Padding und Ausrichtung aus der Geometrie des Browsers ab. Jeder Auto-Layout-Plan wird angewendet und die Position jedes Kindelements mit einer Toleranz von 2 px verifiziert. Hält ein Plan nicht, wird ein einfacherer probiert; passt nichts, behält der Frame seine absoluten Positionen mit sinnvollen Constraints. Du bekommst eine Datei, die sich verhält, als hätte sie ein Designer gebaut – keine Nachzeichnung.
Du kannst HTML von überall her holen: eine öffentliche URL, bis zu 10 Links in einem Durchgang, eine lokale HTML-Datei, einen Website-Ordner oder eine .zip, eingefügten Code, einen Tab in deinem eigenen Chrome oder ein per MCP verbundenes KI-Tool. Die Funktionsübersicht listet alles auf, was umgewandelt wird – von Verläufen und Schatten bis zu ::before-Pseudoelementen und Shadow DOM.
Wenn du neu dabei bist, führt dich die Schritt-für-Schritt-Anleitung HTML in Figma umwandeln durch einen ersten Import. Arbeitest du vor allem mit Live-Websites, sieh dir URL to Figma an; für Seiten hinter einem Login oder auf localhost ist die Chrome-Erweiterung der richtige Weg. Die Preise beginnen bei $0 mit 10 Importen pro Monat, und die Preisseite zeigt, was Pro dazu bringt.
HTML in Figma umwandeln in vier Schritten
- 01
Plugin öffnen und Quelle wählen
Wähle Link, Multiple, Local file, Browser oder AI – je nachdem, wo dein HTML liegt.
- 02
Screens und Optionen wählen
Wähle Desktop, Laptop, Tablet oder Mobile und schalte Optionen wie Auto Layout, Images oder Hide cookie banners & popups ein oder aus.
- 03
Fehlende Schriften klären
Bevor etwas gebaut wird, schlägt der Bildschirm Missing fonts Ersatzschriften vor und merkt sich deine Wahl pro Website.
- 04
Ergebnis prüfen
Der Ergebnisbildschirm zeigt Frames, Ebenen, Auto-Layout-Anteil und Warnungen – inklusive des Grundes, warum ein Frame absolut geblieben ist.
Was die Umwandlung bearbeitbar macht
Native Ebenen, keine Pixel
Frames, Texte, Vektoren und Bilder, die du auswählen, umbenennen und umgestalten kannst wie alles, was von Hand gezeichnet wurde.
Verifiziertes Auto Layout
Stapel, Abstände, Padding und Ausrichtung werden aus gemessener Geometrie abgeleitet und auf 2 px genau geprüft, bevor sie bleiben.
Echte Textformatierung
Gemischte Stile, Links, Laufweite, Zeilenhöhe und text-transform kommen als bearbeitbarer Text an.
Verläufe, Schatten, Blur
Lineare, radiale und konische Verläufe, innere und äußere Schatten, Mischmodi, Blur und Backdrop-Blur bleiben erhalten.
Responsive Screens
Erfasse Desktop, Laptop 1280, Tablet 768 und Mobile 390 – oder bei Pro ein komplettes Responsive set mit einem Klick.
Fünf Wege rein
Importiere per Link, bis zu 10 Links, lokale Dateien, einen Chrome-Tab oder ein KI-Tool über MCP.
Bearbeitbare Ebenen vs. Screenshot
Viele Tools, die eine HTML-to-Figma-Umwandlung versprechen, fügen ein Bild der Seite ein. Für ein Moodboard reicht das, aber dann ist Schluss: Du kannst keine Überschrift ändern, keine Farbe tauschen und keine Karte verschieben. HTML to Frames baut stattdessen die Struktur nach.
| Screenshot-Import | HTML to Frames | |
|---|---|---|
| Text | Pixel | Bearbeitbarer Text mit gemischten Stilen |
| Icons und Logos | Pixel | SVG als bearbeitbare Vektoren |
| Layout | Flaches Bild | Verschachtelte Frames mit verifiziertem Auto Layout |
| Farben | Nach Augenmaß abgegriffen | Exakte Werte, optional Farbvariablen (Pro) |
| Größe ändern | Streckt das Bild | Auto Layout und Constraints reagieren |
Es gibt eine ehrliche Ausnahme. Inhalte, die nicht als Ebenen existieren können – etwa ein eingebettetes Karten-iframe, ein Video ohne Poster oder eine WebGL-Szene –, kommen als Screenshot genau dieses Bereichs an. Der Rest der Seite drumherum bleibt bearbeitbar; ein Hero mit Hintergrundvideo liefert dir also trotzdem bearbeitbare Überschriften, Buttons und Navigation.
Wenn du trotzdem eine Pixelreferenz willst, bietet Pro die Option Reference screenshot: eine versteckte, gesperrte Ebene unter dem Import, mit der du den Nachbau jederzeit mit dem Original vergleichen kannst. Mehr zum Unterschied liest du in HTML to Canvas vs. bearbeitbare Ebenen.
Fünf Quellen, ein Ergebnis
Jede Quelle führt zur gleichen Art von Ergebnis – du kannst also die wählen, die zu deiner Situation passt.
Link und Multiple
Füge eine öffentliche URL ein oder bis zu 10 Links, die nacheinander verarbeitet werden. Jede Seite landet als eigene Reihe auf dem Canvas. Multiple-Import ist in jedem Plan verfügbar, auch in Free.
Local file
Leg eine einzelne HTML-Datei, einen ganzen Website-Ordner (dann wählst du die Seiten aus) oder eine .zip ab oder füge HTML und CSS direkt ein. Uploads dürfen bis zu 30 MB groß sein und werden gelöscht, sobald der Import abgeschlossen ist.
Browser
Die kostenlose Chrome-Erweiterung erfasst, was dein Browser sieht: Dashboards mit Login, localhost, private Netzwerke und den aktuellen Zustand einer Seite, etwa ein geöffnetes Menü oder ein ausgefülltes Formular. Siehe Chrome-Erweiterung für Figma.
KI-Tools
Verbinde Claude Code, Claude Desktop, Cursor oder einen anderen MCP-Client über den AI-Tab des Plugins, und generierte Seiten landen in deinem geöffneten Plugin. Details findest du unter AI to Figma.
Welche Quelle du auch wählst: Ein Import zählt als eine Seite mit all ihren Screens – Desktop, Tablet und Mobile derselben Seite sind also ein einziger Import. Jeder Frame speichert seine Quell-URL, sodass du ihn mit einem Klick neu importieren kannst, wenn sich die Live-Seite ändert.
Was der Konverter beherrscht
Bei modernem CSS verlieren die meisten HTML-to-Figma-Tools an Genauigkeit. HTML to Frames liest das berechnete Ergebnis des Browsers und beherrscht daher eine große Bandbreite an Eigenschaften:
- Layout aus Flexbox und Grid, übersetzt in Auto Layout, wo es hält (siehe CSS Flexbox und Grid zu Auto Layout)
- Rahmen, auch eine einzelne Seite in anderer Farbe, und Eckenradius
- Bilder mit
object-fit,background-size, Kachelung und hochauflösendemsrcset clip-path,mask-image,::beforeund::after, CSS-Zähler und Listenpunkte wie in Chrome- CSS-Rotation und -Skalierung, Deckkraft,
filter: grayscale/opacity - Formularfelder, Hoch- und Tiefstellung, Shadow DOM und z-index-Reihenfolge
Manches wird noch nicht unterstützt: Skew- und 3D-Transformationen, path()-Clip-Paths, mehrschichtige Masken und Display-P3-Farben. Wir listen das offen auf, damit du vor dem Import weißt, was dich erwartet. Die vollständige Liste steht auf der Funktionsseite, Fragen zur Einrichtung beantwortet die Doku.
Wenn sich etwas nicht exakt abbilden lässt, sagt es dir der Ergebnisbildschirm. Er listet fehlende Schriften, Warnungen, den Anteil der Frames mit Auto Layout und für jeden absolut gebliebenen Frame den Grund auf. Du musst nie raten, welche Teile der Umwandlung du nochmal prüfen solltest.
Häufige Fragen
Nein. HTML to Frames baut die Seite als native Figma-Ebenen nach: Frames, bearbeitbarer Text, Vektoren aus SVG und Bilder. Nur Bereiche, die keine Ebenen sein können – etwa Karten-iframes, Videos ohne Poster oder WebGL-Canvases –, kommen als Screenshot dieses Bereichs an, während alles drumherum bearbeitbar bleibt.
Aus fünf: ein öffentlicher Link, bis zu 10 Links in einem Multiple-Import, lokale Dateien (eine einzelne HTML-Datei, ein Website-Ordner, eine .zip oder eingefügter Code), ein Chrome-Tab über die kostenlose Erweiterung und KI-Tools wie Claude Code, Claude Desktop oder Cursor, verbunden über MCP.
Ja. Nachdem die Seite pixelgenau aufgebaut ist, leitet das Plugin Stapel, Abstände, Padding und Ausrichtung ab, wendet sie an und verifiziert jedes Kindelement auf 2 px genau. Scheitert ein Plan, wird ein einfacherer probiert; andernfalls behält der Frame absolute Positionen mit Constraints – das Design bricht also nicht.
Ja. Der Free-Plan enthält 10 Importe pro Monat mit einem Screen pro Import, und Multiple-Import mit bis zu 10 Links ist inklusive. Pro bietet zusätzlich bis zu vier Screens pro Import, Styles und Variablen, Komponenten, Light + Dark und mehr – zum Einführungspreis von $7 pro Monat.
Seiten werden in einem isolierten Sandbox-Browser gerendert. Das Ergebnis wird einmal ausgeliefert und dann aus dem Arbeitsspeicher gelöscht; es wird nie auf die Festplatte geschrieben, und der Auftragsdatensatz wird nach 15 Minuten vergessen. Hochgeladene Dateien werden gelöscht, sobald der Import abgeschlossen ist.
Vor dem Aufbau zeigt das Plugin den Bildschirm Missing fonts mit vorgeschlagenen Ersatzschriften. Deine Wahl wird pro Website gespeichert – oder auf Wunsch für alle Websites –, sodass erneute Importe derselben Website nicht nochmal fragen. Die Font-Zuordnung ist in jedem Plan verfügbar, auch in Free.
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