HTML to Canvas: Bitmap-Screenshot vs. bearbeitbare Ebenen

„HTML to Canvas“ ist einer dieser Begriffe, die je nach Suchendem zwei verschiedene Dinge bedeuten. Ein Frontend-Entwickler meint meist das Rendern eines DOM-Elements in ein HTML-<canvas> – die Aufgabe von Bibliotheken wie html2canvas. Ein Designer meint meist, eine Webseite auf den Figma-Canvas zu bringen, um daran zu arbeiten.

Beides beginnt mit HTML. Beides endet auf etwas, das Canvas heißt. Aber die Ergebnisse sind grundverschieden: Das eine ist ein flaches Raster aus Pixeln, das andere ein Baum aus bearbeitbaren Ebenen. Die falsche Wahl kostet Zeit – es lohnt sich also, genau zu sein.

Bedeutung 1: HTML in ein HTML-<canvas> (Bitmaps)

So funktioniert es

Das HTML-Element <canvas> ist eine Zeichenfläche: ein Rechteck aus Pixeln, auf das JavaScript malen kann. Bibliotheken wie html2canvas durchlaufen das DOM, lesen berechnete Styles und zeichnen die Seite mit der Canvas-2D-API neu auf ein Canvas. Das Ergebnis ist eine Bitmap, die du als PNG oder JPEG exportieren kannst.

Verwandte Ansätze liefern dieselbe Art von Ergebnis:

• Browser-Screenshots – die eingebaute Screenshot-Funktion des Browsers, „Capture node screenshot“ in den DevTools oder Screenshots per Headless-Browser.
• Tricks mit SVG-foreignObject – HTML in ein SVG einbetten, das in ein Canvas zeichnen, Pixel exportieren.
• Serverseitige Screenshot-Dienste – ein Headless-Browser rendert die Seite und liefert ein Bild zurück.

Wann eine Bitmap die richtige Antwort ist

Bitmaps sind wirklich nützlich, wenn das Bild selbst das Ergebnis ist:

• Buttons zum „Als Bild teilen“ – ein Chart, ein Beleg, eine Zitatkarte.
• Visuelle Regressionstests, die Pixel zwischen Builds vergleichen.
• Thumbnails und Social-Preview-Bilder.
• Bug-Reports, die genau zeigen müssen, was der Nutzer gesehen hat.
• Das Archivieren des Aussehens einer Seite zu einem bestimmten Zeitpunkt.

In all diesen Fällen muss niemand das Ergebnis bearbeiten. Man muss es nur ansehen.

Grenzen von Bitmaps

Sobald du an der erfassten Seite arbeiten willst, stehen dir die Pixel im Weg:

• Keine Bearbeitung. Du kannst keine Überschrift ändern, keinen Abstand anpassen und keine Farbe tauschen. Du kannst nur übermalen.
• Kein Text. Text besteht aus Pixeln. Du kannst ihn nicht auswählen, durchsuchen, seine Schriftgröße prüfen oder in eine Spezifikation kopieren.
• Unscharf beim Skalieren. Eine Bitmap hat eine feste Auflösung. Zoomst du hinein oder legst du eine 1x-Aufnahme auf ein hochauflösendes Display, werden Kanten weich.
• Keine Struktur. Es gibt keine Frames, keine Hierarchie, keine Abstandswerte zum Prüfen. Ein Button und der Hintergrund dahinter sind dieselbe Ebene.
• Nicht responsiv. Ein Screenshot in 1440 bleibt immer 1440. Du brauchst eine eigene Aufnahme pro Breite, und keine davon lässt sich sinnvoll skalieren.
• Kein Designsystem. Farben und Typografie lassen sich nicht in Variablen oder Styles verwandeln, und wiederkehrende Elemente können keine Komponenten werden.
• Lücken in der Detailtreue (bei Neu-Renderern). Bibliotheken, die das DOM auf ein Canvas neu zeichnen, implementieren CSS in JavaScript nach – neuere oder seltenere CSS-Funktionen können daher anders aussehen als im echten Browser.

Bedeutung 2: HTML auf den Figma-Canvas (bearbeitbare Ebenen)

So funktioniert es

In Figma ist „der Canvas“ die unendliche Arbeitsfläche, auf der deine Frames liegen. HTML auf den Figma-Canvas zu bringen heißt, die gerenderte Seite in native Figma-Objekte umzuwandeln: Frames, Textebenen, Vektoren und Bildfüllungen.

Genau das macht HTML to Frames. Eine Seite wird in einem echten Browser gerendert, ihre Geometrie und berechneten Styles werden gemessen, und das Plugin baut sie in Figma nach als:

• verschachtelte Frames, die die Seitenstruktur spiegeln, mit Auto Layout, wo es sich verifizieren lässt,
• echte Textebenen mit gemischten Stilen, Laufweite, Zeilenhöhe und Links,
• SVG als bearbeitbare Vektoren,
• Bilder als Bildfüllungen, unter Berücksichtigung von object-fit und background-size,
• Rahmen, Radien, Schatten, Verläufe, Blur und Mischmodi als native Eigenschaften.

Das Ergebnis ist etwas, das du bearbeiten, umgestalten, skalieren und in Komponenten verwandeln kannst – kein Bild einer Seite, sondern eine Arbeitsdatei. Der HTML-to-Figma-Leitfaden beschreibt den kompletten Importablauf.

Wann bearbeitbare Ebenen die richtige Antwort sind

• Redesigns, die bei einer bestehenden Website ansetzen.
• Audits von Abständen, Typografie und Farbe.
• Extraktion eines Designsystems – Farbvariablen, Textstile und Schatten-Styles (Pro).
• Übergabe und Review von im Code gebauten Seiten, inklusive localhost über die Chrome-Erweiterung.
• Verfeinern von KI-generierter UI, importiert per MCP – siehe AI to Figma.
• Responsive Arbeit – Desktop, Tablet und Mobile aus einem Import.

Im direkten Vergleich

Kurz gesagt: html2canvas liefert dir Pixel; HTML to Frames liefert dir Ebenen auf dem Figma-Canvas.

Warum das Rendern in einem echten Browser zählt

Beide Ansätze hängen davon ab, wie originalgetreu die Seite überhaupt gerendert wird. Neu zeichnende Bibliotheken wie html2canvas laufen in der Seite und implementieren CSS-Layout und -Rendering in JavaScript nach. Bei gängigen Styles funktioniert das gut, aber alles, was die Bibliothek nicht oder etwas anders implementiert, zeigt sich als Abweichung im Bild.

HTML to Frames geht einen anderen Weg. Öffentliche Seiten, lokale Dateien und eingefügter Code werden in einem isolierten Sandbox-Browser gerendert, und mit der Chrome-Erweiterung erfasste Seiten stammen aus deinem eigenen Browser. In beiden Fällen liest das Plugin die Geometrie und die berechneten Styles, die der Browser tatsächlich erzeugt hat, und baut sie als Figma-Objekte nach. Deshalb kommen Details korrekt an, die leicht schiefgehen:

• Listenpunkte wie in Chrome, CSS-Zähler, Hoch- und Tiefstellung.
• Verläufe – linear, radial und konisch, inklusive px-Stopps und sich wiederholender oder gekachelter Verläufe.
• Hochauflösende Bilder aus srcset, unter Berücksichtigung von object-fit, background-size und Kachelung.
• Eine einzelne Rahmenseite in anderer Farbe, innere und äußere Schatten sowie text-shadow.

Die Seite wird außerdem so erfasst, wie normale Besucher sie sehen: Cookie-Banner und Pop-ups lassen sich auf Wunsch ausblenden, und Animationen werden eingefroren, damit der Frame sauber ist und nicht mitten in einem Übergang erwischt wird.

Und was ist mit Dingen, die wirklich Canvases sind?

Hier treffen sich die beiden Bedeutungen. Manche Teile einer Webseite sind von Natur aus Pixel, und kein Konverter kann sie in sinnvolle Vektorebenen verwandeln:

• WebGL- und 3D-Szenen, gezeichnet in ein <canvas>,
• 2D-Canvas-Zeichnungen wie manche Charts oder Spiele,
• iframes, inklusive eingebetteter Karten,
• Videos ohne Posterbild,
• object- und embed-Elemente.

HTML to Frames geht damit pragmatisch um: Jedes davon kommt als Screenshot-Bild nur dieses Bereichs an. Das Bild sitzt an der richtigen Stelle, in der richtigen Größe, inmitten einer ansonsten voll bearbeitbaren Seite. Deine Hero-Überschrift, die Navigation und die Karten bleiben echte Ebenen; nur der 3D-Produktviewer oder die eingebettete Karte ist eine Bitmap.

Bei animierten Inhalten zielt die Aufnahme auf einen sauberen, stabilen Frame: Animationen werden eingefroren, und WebGL wird nach wenigen Frames angehalten, damit die Szene vor der Aufnahme Zeit hat, etwas Sinnvolles zu rendern.

Dieses Hybrid ist meist genau das, was ein Designer will. Du redesignst nicht das Innere einer eingebetteten Karte; du gestaltest die Karte drumherum. Ein Screenshot-Platzhalter für das Embed plus alles andere bearbeitbar – das ist das praktische Ergebnis.

Was noch nicht umgewandelt wird

Der Vollständigkeit halber zu den Grenzen: Skew- und 3D-CSS-Transformationen, path()-Clip-Paths, mehrschichtige Masken und Display-P3-Farben werden noch nicht unterstützt. CSS-Rotation und -Skalierung, einzelne clip-path-Formen, mask-image, Blur und Backdrop-Blur schon. Die Funktionsseite enthält die vollständige Liste.

Den richtigen Ansatz wählen

Stell eine Frage: Wird jemand das Ergebnis bearbeiten?

1. Nein – es ist zum Ansehen, Teilen oder Testen. Nimm eine Bitmap. html2canvas oder ein Browser-Screenshot ist einfacher und schneller.
2. Ja – es ist für Designarbeit. Nimm bearbeitbare Ebenen auf dem Figma-Canvas.
3. Überwiegend ja, aber Teile sind Karten, Video oder 3D. Nimm bearbeitbare Ebenen; diese Bereiche kommen automatisch als Bilder an.

Ein paar praktische Szenarien:

• „Ich brauche ein PNG von diesem Chart für eine Folie.“ Bitmap.
• „Ich muss unsere Preisseite redesignen.“ Bearbeitbare Ebenen – importieren, dann iterieren.
• „Ich will die Produktion mit unserem Mockup vergleichen.“ Bearbeitbare Ebenen, mit dem optionalen Reference screenshot (Pro) – einer versteckten, gesperrten Bildebene, die du für einen Pixelvergleich einblenden kannst. Ein schönes Beispiel dafür, wie beide Bedeutungen zusammenarbeiten: eine Bitmap zum Prüfen, Ebenen zum Arbeiten.
• „Ich brauche das Dashboard mit Login in Figma.“ Bearbeitbare Ebenen über die Chrome-Erweiterung, die Seiten erfasst, die dein Browser sieht – inklusive ihres aktuellen Zustands.

Warum „mach einfach einen Screenshot“ später mehr kostet

Screenshots fühlen sich schneller an, weil die Aufnahme Sekunden dauert. Die Kosten zeigen sich danach: Sobald die eigentliche Designarbeit beginnt, muss jemand jeden Frame von Hand nachbauen. Padding aus Pixeln messen, Schriftgrößen raten, Texte abtippen, Farben nachbauen – das summiert sich auf Stunden pro Seite.

Die Umwandlung in bearbeitbare Ebenen verlagert diese Arbeit ins Tool. Du bekommst gemessene Größen, echten Text und – mit Pro – Variablen, Textstile und Komponenten, die aus der Seite selbst erzeugt werden. Der HTML-to-Design-Workflow zeigt, wie das über ein komplettes Redesign aussieht.

Hinweis zum Datenschutz

Welchen Ansatz du auch wählst, denk darüber nach, wo die Seite gerendert wird. html2canvas läuft in der Seite im Browser des Nutzers. HTML to Frames rendert öffentliche Seiten in einem isolierten Sandbox-Browser, liefert das Ergebnis einmal aus und löscht es aus dem Arbeitsspeicher, ohne es auf die Festplatte zu schreiben; die Chrome-Erweiterung läuft in deinem eigenen Browser und sendet nichts, außer du nutzt Send to Figma. Details stehen auf der Sicherheitsseite.

Zusammenfassung

• HTML to Canvas (Bitmap) verwandelt eine Seite in Pixel. Ideal zum Teilen, Testen und für Vorschauen; nicht bearbeitbar.
• HTML auf den Figma-Canvas verwandelt eine Seite in Frames, Texte und Vektoren, mit denen du arbeiten kannst.
• Inhalte, die wirklich ein Canvas sind – WebGL, Karten, iframes, Videos ohne Poster –, werden als Bild ihres Bereichs erfasst, während der Rest bearbeitbar bleibt.

Um den ebenenbasierten Ansatz an deiner eigenen Seite zu sehen, hol dir das Plugin und starte mit der Doku – oder lies, wie die Auto-Layout-Engine aus Seitenstruktur Frames macht.