Pixel vs. Ebenen
HTML to Canvas: Webseiten als bearbeitbare Ebenen auf dem Figma-Canvas
Screenshot-Bibliotheken liefern dir Pixel. HTML to Frames bringt die Seite als Vektoren, Texte und Frames auf deinen Figma-Canvas – alles veränderbar.
- Bearbeitbarer Text und SVG-Vektoren statt Rasterbild
- Echte Canvas- und WebGL-Bereiche bleiben als Bild dieses Bereichs erhalten
- Animationen eingefroren für einen sauberen, konsistenten Frame
Bald in der Figma Community
„HTML to Canvas“ bedeutet zwei verschiedene Dinge, und es hilft, sie vor der Toolwahl auseinanderzuhalten. Entwickler meinen oft html2canvas, die JavaScript-Bibliothek, die das DOM durchläuft und eine Annäherung der Seite in ein <canvas>-Element malt, oder einen Browser-Screenshot, der die sichtbaren Pixel festhält. Designer meinen meist etwas anderes: eine Webseite auf den Figma-Canvas bringen, um damit zu arbeiten.
Beides erzeugt etwas, das wie die Seite aussieht, aber nur eines gibt dir etwas, womit du arbeiten kannst. Eine Bitmap, so scharf sie auch ist, bleibt ein Raster aus farbigen Pixeln. Du kannst keinen Tippfehler korrigieren, keine Schriftgröße ändern, keinen Button umfärben und keine Karte in ein neues Layout ziehen. Du kannst nur zuschneiden, skalieren und übermalen.
HTML to Frames, ein Figma-Plugin von EUREKA!, nimmt die zweite Bedeutung wörtlich. Es rendert die Seite in einem echten Browser, liest die berechnete Geometrie und die Styles jedes Elements und baut die Seite auf deinem Figma-Canvas als native Ebenen nach: Frames, die die Seitenstruktur spiegeln, bearbeitbarer Text mit seinen ursprünglichen Stilen, in Vektoren umgewandeltes SVG und Bilder mit ihrer ursprünglichen Einpassung. Das Layout wird in Auto Layout umgewandelt, wo es sich verifizieren lässt – so reagiert das Ergebnis auch, wenn du die Größe änderst.
Es gibt einen Fall, in dem Pixel die richtige Antwort sind, und das Plugin behandelt ihn bewusst. Ein echtes <canvas>-Element oder eine WebGL-Szene hat kein DOM, das sich nachbauen ließe – dieser Bereich kommt daher als Screenshot-Bild an, während der Rest der Seite bearbeitbar bleibt.
Die ausführliche Version dieses Vergleichs liest du in HTML to Canvas vs. bearbeitbare Ebenen. Für die Kern-Umwandlung starte mit HTML to Figma, oder sieh dir auf der Funktionsseite an, was umgewandelt wird.
So kommt eine Seite auf deinen Figma-Canvas
- 01
Quelle der Seite wählen
Eine URL, eine lokale Datei oder ein Ordner, eingefügtes HTML und CSS, ein Chrome-Tab oder ein KI-Tool über MCP.
- 02
Den Browser rendern lassen
Die Seite lädt in einem isolierten Browser, Animationen werden eingefroren und WebGL nach wenigen Frames angehalten.
- 03
Ebenen auf dem Canvas erhalten
Frames, Texte, Vektoren und Bilder werden auf deiner aktuellen Figma-Seite platziert, bereit zum Bearbeiten.
Warum Ebenen auf dem Canvas einer Bitmap überlegen sind
Text bleibt Text
Überschriften und Fließtext kommen als bearbeitbarer Text an – Laufweite, Zeilenhöhe und gemischte Stile bleiben intakt.
SVG wird zu Vektoren
Icons und Logos werden zu bearbeitbaren Vektorebenen, die du ohne Unschärfe umfärben und skalieren kannst.
Auswählbare Struktur
Verschachtelte Frames folgen der Seitenstruktur – du kannst eine einzelne Karte auswählen, statt ein Bild zuzuschneiden.
Pixel nur, wo nötig
Iframes, Videos ohne Poster und WebGL- oder 3D-Canvas-Bereiche kommen als Screenshot-Bild dieses Bereichs an.
Eingefrorene, saubere Aufnahme
Animationen werden für einen konsistenten Frame pausiert – keine halb eingeblendeten Elemente.
Referenzebene
Bei Pro kannst du mit einer versteckten, gesperrten Screenshot-Ebene den Nachbau mit den Original-Pixeln vergleichen.
html2canvas und Screenshots vs. bearbeitbare Ebenen
Screenshot-Ansätze und HTML to Frames starten bei derselben gerenderten Seite, landen aber an sehr unterschiedlichen Orten.
| html2canvas / Browser-Screenshot | HTML to Frames auf dem Figma-Canvas | |
|---|---|---|
| Ergebnis | Ein Rasterbild | Frames, Texte, Vektoren und Bilder |
| Text bearbeiten | Nicht möglich | Direkt bearbeiten |
| Skalieren | Wird über 1x unscharf | Vektoren bleiben scharf |
| Layout | Feste Pixel | Auto Layout, wo verifiziert, sonst Constraints |
| Ein Element auswählen | Von Hand zuschneiden | Frame anklicken |
| Typischer Einsatz | Bug-Reports, Thumbnails, Vorschauen | Redesigns, Audits, Übergabe, Designsysteme |
html2canvas implementiert das CSS-Rendering außerdem in JavaScript nach und kann daher Funktionen verpassen, die der Browser unterstützt. HTML to Frames liest die Werte aus einem echten Chromium-basierten Browser, nachdem dieser gerendert hat, und überträgt sie auf Figma-Eigenschaften: Verläufe inklusive konischer und sich wiederholender, Schatten, Mischmodi, Blur und Backdrop-Blur, clip-path, mask-image und mehr.
Screenshots haben trotzdem ihre Berechtigung. Brauchst du eine schnelle visuelle Dokumentation, reicht eine Bitmap. Willst du etwas ändern, ersparen dir Ebenen das Nachzeichnen der Seite.
Eine nützliche Faustregel: Ist der nächste Schritt ein Kommentar oder ein Ticket, reicht ein Screenshot. Ist der nächste Schritt, Figma zu öffnen und etwas zu ändern, importiere lieber Ebenen.
Was mit einem echten <canvas>- oder WebGL-Element passiert
Manche Inhalte einer Seite sind bereits Pixel. Ein <canvas>-Element zeichnet per JavaScript, und eine WebGL-Szene rendert 3D-Grafik auf der GPU. In diesen Bereichen gibt es kein DOM zum Auslesen, daher kann kein Tool daraus sinnvolle Vektorebenen machen.
HTML to Frames behandelt sie ausdrücklich, statt stillschweigend zu scheitern:
- Der Bereich wird als Screenshot-Bild an seiner exakten Position und in seiner exakten Größe erfasst.
- WebGL-Szenen werden nach wenigen Frames eingefroren, sodass du ein stabiles Bild bekommst statt eines leeren Frames oder eines Übergangs.
- Alles rund um den Bereich – etwa Überschriften, Buttons und darüber liegende Overlays – bleibt als bearbeitbare Ebenen erhalten.
Dieselbe Regel gilt für andere eingebettete Inhalte, die keine Ebenen sein können: iframes wie Karten, Videos ohne Posterbild sowie object- oder embed-Elemente. Jedes wird zu einem Bild seines eigenen Bereichs, und der Ergebnisbildschirm listet eventuelle Warnungen auf.
In der Praxis heißt das: Eine Landingpage mit 3D-Hero lässt sich trotzdem in ein brauchbares Design umwandeln. Du kannst das Hero-Bild durch ein neues Visual ersetzen, den Text darüber umschreiben und Abstände anpassen, während der Rest der Seite sein Auto Layout behält. Wie dieses Layout abgeleitet wird, erfährst du in Auto Layout erklärt.
Ein sauberer Frame von einer bewegten Seite
Moderne Seiten bewegen sich: Karussells drehen sich, Elemente blenden beim Scrollen ein, Cookie-Banner fahren hoch und Hero-Bereiche animieren beim Laden. Eine naive Aufnahme friert ein, was in dieser Millisekunde gerade passierte.
HTML to Frames erfasst die Seite so, wie normale Besucher sie sehen, mit ein paar Stellschrauben für ein vorhersagbares Ergebnis:
Eingefrorene Animationen
Animationen werden eingefroren, sodass die Aufnahme jedes Element in einem ruhenden Zustand zeigt statt mitten in einem Übergang.
Hide cookie banners & popups
Aktiviere diese Option, und Consent-Banner und Pop-ups werden vor der Aufnahme ausgeblendet, damit sie die Seite auf deinem Canvas nicht verdecken.
Extra wait
Langsamen Seiten, die Inhalte spät laden, kannst du vor der Aufnahme mehr Zeit geben. Extra wait ist eine Pro-Option.
Full page
Erfasse die gesamte scrollende Seite oder nur den ersten Bildschirm – je nachdem, was du brauchst.
Diese Optionen gelten, egal ob die Seite von einer URL, aus einer lokalen Datei oder über die Chrome-Erweiterung kommt. Die Erweiterung ist die richtige Wahl, wenn du einen bestimmten Zustand willst, etwa ein geöffnetes Menü, statt der Standardansicht.
Wird trotzdem etwas mitten in einer Animation erfasst oder fehlt etwas, listet der Ergebnisbildschirm Warnungen auf – und ein Re-import per Klick mit einer anderen Option ist meist die schnellste Lösung.
Häufige Fragen
Nein. html2canvas ist eine JavaScript-Bibliothek, die eine Annäherung des DOM in eine Bitmap malt. HTML to Frames ist ein Figma-Plugin, das die Seite auf dem Figma-Canvas als bearbeitbare Ebenen nachbaut: Frames, Texte, Vektoren und Bilder, mit Auto Layout, wo es sich verifizieren lässt.
Ja. Text kommt als native Figma-Textebenen an, inklusive gemischter Stile innerhalb eines Absatzes, Links, Laufweite, Zeilenhöhe und text-transform. Ist eine Schrift nicht verfügbar, kannst du auf dem Bildschirm Missing fonts vor dem Aufbau einen Ersatz wählen, und deine Wahl wird gespeichert.
In ihnen gibt es kein DOM zum Nachbauen, daher kommt jeder solche Bereich als Screenshot-Bild an seiner exakten Position und in seiner exakten Größe an. WebGL wird nach wenigen Frames eingefroren, um ein stabiles Bild zu liefern. Alles rund um den Bereich bleibt als bearbeitbare Ebenen erhalten.
Ja, bei Pro. Die Option Reference screenshot fügt unter dem Import eine versteckte, gesperrte Bildebene hinzu. Blende sie ein, wann immer du die nachgebauten Ebenen mit dem Original-Rendering vergleichen willst, und lass sie sonst ausgeblendet, damit sie nicht stört.
Animationen werden eingefroren und auf Wunsch Cookie-Banner und Pop-ups ausgeblendet, sodass die Aufnahme eine ruhende Seite zeigt. Ein Screenshot hält fest, was in diesem Moment auf dem Bildschirm war. Brauchst du einen bestimmten Zustand, etwa ein geöffnetes Menü, nutze die Chrome-Erweiterung.
Lineare, radiale und konische Verläufe, innere und äußere Schatten, text-shadow, Deckkraft, Mischmodi, Blur und Backdrop-Blur, clip-path, mask-image, Rotation und Skalierung. Noch nicht unterstützt sind Skew- und 3D-Transformationen, path()-Clip-Paths, mehrschichtige Masken und Display-P3-Farben. Die vollständige Liste steht auf der Funktionsseite.
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