HTML to Figma: HTML in Figma umwandeln – Leitfaden 2026

Jedes Designteam stößt irgendwann an dieselbe Wand: Das, woran du arbeiten musst, existiert als HTML im Browser, aber der Ort, an dem du daran arbeiten willst, ist Figma. Vielleicht ist es die Live-Website eines Kunden vor einem Redesign, ein Staging-Build, den ein Entwickler gerade ausgeliefert hat, oder eine Landingpage, die ein KI-Tool in Sekunden generiert hat. Der Nachbau von Hand dauert Stunden. Ein eingefügter Screenshot gibt dir etwas zum Ansehen, aber nicht zum Bearbeiten.

Dieser Leitfaden zeigt, wie du HTML in Figma als echte, bearbeitbare Ebenen umwandelst – Frames, Text, Vektoren und Bilder – mit dem Plugin HTML to Frames. Du lernst die fünf Wege kennen, eine Seite zu importieren, wie du Screens wählst, welche Optionen du aktivieren solltest, was sauber umgewandelt wird und was nicht, und wie du das häufigste Problem löst: fehlende Schriften.

Warum HTML überhaupt in Figma umwandeln?

Browser und Designtool lösen unterschiedliche Probleme. Der Browser ist die Quelle der Wahrheit für das, was ausgeliefert wird; Figma ist der Ort, an dem du explorierst, annotierst, vergleichst und übergibst. Die Umwandlung bringt die aktuelle Realität dorthin, wo du Entscheidungen triffst.

Typische Gründe, warum Teams das tun:

• Redesigns. Starte bei der bestehenden Website statt bei einem leeren Canvas, damit du siehst, was wirklich da ist, bevor du es änderst. Unser Website-to-Figma-Redesign-Leitfaden geht tiefer darauf ein.
• Audits. Prüfe Abstände, Typo-Skala und Farbnutzung Ebene für Ebene, statt in den DevTools zu raten.
• Design-Code-Drift. Hol die ausgelieferte Version zurück in Figma, um sie mit dem ursprünglichen Mockup zu vergleichen.
• Umgekehrte Entwickler-Übergabe. Ein Frontend-Entwickler baut auf localhost, und der Designer prüft und verfeinert es in Figma.
• KI-generierte UI. Tools wie Claude oder Cursor erzeugen schnell HTML; in Figma machst du es produktionsreif.
• Lernen. Studierende und Junior-Designer können gut gebaute Websites Ebene für Ebene studieren.

Das Schlüsselwort ist bei allen bearbeitbar. Eine Bitmap zeigt dir die Seite nur. Ebenen lassen dich sie verändern.

Die 5 Wege, HTML nach Figma zu bringen

HTML to Frames akzeptiert Webseiten aus fünf Arten von Quellen. Wähle die, die zum Ort deines HTML passt.

1. Link (eine einzelne öffentliche URL)

Füge eine beliebige öffentliche URL in den Tab Link ein. Die Seite wird in einem isolierten Browser gerendert, vermessen und als Figma-Ebenen nachgebaut. Das ist der schnellste Weg, wenn die Seite öffentlich erreichbar ist. Mehr zu diesem Ablauf unter URL to Figma.

2. Multiple (bis zu 10 Links)

Der Tab Multiple nimmt bis zu 10 Links auf einmal. Sie werden nacheinander verarbeitet, und jede Seite wird zu einer Reihe auf dem Canvas – Startseite, Preisseite und Blogartikel stehen so zum Vergleich nebeneinander. Multiple-Import ist in jedem Plan verfügbar, auch in Free.

3. Lokale Datei, Ordner, .zip oder eingefügter Code

Ist das HTML noch nicht online, nutze den Tab Local file:

• eine einzelne HTML-Datei,
• einen ganzen Website-Ordner (per Drag-and-drop, dann wählst du die zu importierenden Seiten),
• ein .zip-Archiv oder
• Paste code – rohes HTML und CSS.

Uploads dürfen bis zu 30 MB groß sein. Dateien werden aus dem Arbeitsspeicher in einem isolierten Browser geöffnet (nie über file://) und gelöscht, sobald der Import abgeschlossen ist. Abgebrochene Uploads werden nach 2 Minuten entfernt. Alle Details findest du auf der Sicherheitsseite.

4. Browser (die kostenlose Chrome-Erweiterung)

Manche Seiten kann ein Server nicht erreichen: Dashboards mit Login, localhost, private Netzwerke oder eine Seite in einem bestimmten Zustand – ein geöffnetes Menü, ein ausgefülltes Formular, ein Warenkorb mit Artikeln. Installiere dafür die kostenlose HTML to Frames Chrome-Erweiterung.

Du kannst die ganze Seite erfassen oder ein einzelnes Element auswählen (Hover zum Hervorheben, Pfeiltasten zum Wechsel zum Eltern- oder Kindelement, Enter zum Erfassen, Esc zum Abbrechen). Das Ergebnis landet in deiner Zwischenablage oder in einer .h2f-Datei, und du fügst es im Tab Browser des Plugins ein. Noch einfacher: Verbinde die Erweiterung einmalig per Einmalcode mit dem Plugin und nutze Send to Figma – dann gehen Aufnahmen direkt ins geöffnete Plugin.

5. KI-Tools per MCP

Wenn du UI mit einem KI-Assistenten baust, verbinde Claude Code, Claude Desktop, Cursor oder einen beliebigen MCP-Client über den Tab AI des Plugins. Er liefert dir einen Token und ein Copy-and-paste-Setup. Der Assistent kann dann import_html (HTML bis 2 MB), import_url oder import_status aufrufen, und die Seite landet in deinem geöffneten Plugin – importiert mit deinem eigenen Plan. Web-Connectors für claude.ai werden noch nicht unterstützt. Mehr dazu unter AI to Figma.

Welche Methode solltest du nutzen?

Schritt für Schritt: Eine Seite mit HTML to Frames umwandeln

So sieht der komplette Ablauf für eine typische öffentliche Seite aus.

1. Öffne das Plugin in einer Figma-Designdatei und wähle den Tab Link.
2. Füge die URL der Seite ein, die du umwandeln willst.
3. Wähle deine Screens – Desktop (Site width), Laptop, Tablet, Mobile oder per Klick das Responsive set.
4. Prüfe die Optionen wie Auto Layout, Full page, Images und Hide cookie banners & popups.
5. Starte den Import. Nutzt die Seite Schriften, die du nicht installiert hast, erscheint vor dem Aufbau der Bildschirm Missing fonts.
6. Wähle Ersatzschriften für fehlende Schriften (oder übernimm die Vorschläge).
7. Prüfe den Ergebnisbildschirm. Er listet Frames, Ebenen, den Auto-Layout-Anteil, fehlende Schriften und Warnungen auf.
8. Leg los mit dem Bearbeiten. Deine Seite ist jetzt ein Set verschachtelter Figma-Frames mit echtem Text, Vektoren und Bildern.

Jeder Screen wird zu einem eigenen Frame, benannt wie example.com/pricing — Desktop (1920) – ohne Protokoll, ohne www und auf 60 Zeichen begrenzt –, damit große Importe im Ebenen-Panel übersichtlich bleiben.

Screens wählen: Site width erklärt

Die Wahl des Screens ist wichtiger, als sie aussieht. Eine Seite, die in der falschen Breite gerendert wird, wird entweder unschön gestreckt oder in ein Layout gequetscht, das der Designer nie vorgesehen hat.

Desktop = Site width

HTML to Frames nimmt nicht einfach 1440 und hofft das Beste. Es misst beim Import die echte Designbreite der Seite:

• Full-Bleed-Designs (Hintergründe, die von Rand zu Rand laufen) kommen in 1920 an, mit zentrierter Inhaltsbox.
• Echt geboxte Websites kommen in ihrer Containerbreite an – zum Beispiel 1200, 1280 oder 1440.
• Fluide Websites ohne festen Container kommen in 1440 an.

Gemessen, nicht geraten. Bei einem Mehrseiten-Import erhält eine Website eine Breite für alle ihre Seiten, damit die Frames bündig stehen.

Weitere Screens

• Laptop – 1280
• Tablet – 768
• Mobile – 390
• Custom width – jede Breite, die du brauchst (Pro)

Das Responsive set liefert dir Desktop, Tablet und Mobile mit einem Klick. Screens derselben Seite werden parallel erfasst.

In Free enthält jeder Import einen Screen. Pro und Team erlauben bis zu vier Screens pro Import. Wichtig: Ein Import = eine Seite mit all ihren Screens – ein Responsive set einer Seite zählt also als ein einziger Import. Details zu den Plänen findest du auf der Preisseite.

Optionen, die du kennen solltest

Die Standardeinstellungen funktionieren für die meisten Seiten, aber diese Optionen solltest du verstehen:

• Auto Layout – leitet Stapel, Abstände, Padding und Ausrichtung aus der Geometrie des Browsers ab und verifiziert das Ergebnis, bevor es bleibt. Wie das funktioniert, erklärt Auto Layout erklärt.
• Styles & variables (Pro) – erstellt Farbvariablen, Textstile und Schatten-Styles und verwendet bereits vorhandene aus deiner Datei wieder.
• Snap to my file's styles (Pro) – rastet Farben und Text bei fehlender exakter Entsprechung auf die nächstgelegenen Styles deines eigenen Designsystems ein.
• Full page – erfasst die gesamte scrollende Seite statt nur den ersten Viewport.
• Images – Bildfüllungen einbeziehen oder weglassen.
• Hide cookie banners & popups – erfasst die Seite, wie normale Besucher sie ohne Overlays sehen.
• Color scheme – Light, Dark oder Light + Dark (Pro), das eine Variablensammlung mit beiden Modi erstellt.
• Detailed layers (Pro), Reference screenshot (Pro, eine versteckte, gesperrte Ebene zum Vergleichen) und Extra wait (Pro, für langsam ladende Seiten).
• Accordion text as notes – standardmäßig aus; macht aus eingeklapptem <details>-Text Figma-Annotationen.
• Page language – 15 Sprachen, nützlich für mehrsprachige Websites.

Was umgewandelt wird – und was nicht

Ziel ist eine Designdatei, in der du wirklich arbeiten kannst – daher lohnt es sich, genau zu wissen, was ankommt.

Was zu bearbeitbaren Ebenen wird

• Layout als verschachtelte Frames, mit Auto Layout, wo es sich verifizieren lässt
• Text mit gemischten Stilen, Links, Laufweite, Zeilenhöhe und text-transform
• Farben und Verläufe – linear, radial und konisch, inklusive px-Stopps und sich wiederholender Verläufe
• Bilder mit object-fit, background-size, Kachelung und hochauflösendem srcset
• SVG als bearbeitbare Vektoren
• Rahmen (auch eine einzelne Seite in anderer Farbe), Eckenradius und Schatten (innen, außen und text-shadow)
• Deckkraft, Mischmodi, Blur und Backdrop-Blur
• CSS-Rotation und -Skalierung, filter: grayscale/opacity
• ::before und ::after, clip-path, mask-image
• Formularfelder, Listenpunkte wie in Chrome, CSS-Zähler, Hoch- und Tiefstellung
• Shadow DOM und korrekte z-index-Reihenfolge

Was als Bild ankommt

Manche Inhalte lassen sich nicht als Ebenen darstellen. Iframes (etwa eingebettete Karten), Videos ohne Poster, WebGL- oder 3D-Canvases und object/embed-Elemente werden als Screenshot nur dieses Bereichs erfasst. Der Rest der Seite bleibt bearbeitbar. Der Vergleich HTML to Canvas erklärt, warum.

Noch nicht unterstützt

• Skew- und 3D-Transformationen
• path()-Clip-Paths
• Mehrschichtige Masken
• Display-P3-Farben

Tipps für saubere Ergebnisse

Ein paar Gewohnheiten machen einen spürbaren Unterschied:

1. Aktiviere „Hide cookie banners & popups“ bei Marketing-Websites. Sonst liegt womöglich ein Consent-Dialog über deinem Hero-Bereich.
2. Nutze die Chrome-Erweiterung für Seiten mit Login. Ein Server kann sich nicht als du anmelden; dein Browser ist es bereits.
3. Erfasse Zustände bewusst. Öffne zuerst das Menü oder fülle das Formular in deinem Browser aus und erfasse dann mit der Erweiterung.
4. Wähle ein einzelnes Element, wenn du nur eine Komponente brauchst, etwa eine Preiskarte oder eine Navigationsleiste. Kleinere Aufnahmen sind schneller aufgeräumt.
5. Nutze Extra wait (Pro) bei Seiten, die Inhalte spät laden.
6. Füge einen Reference screenshot hinzu (Pro), wenn du belegen musst, dass der Import der Live-Seite entspricht – es ist eine versteckte, gesperrte Ebene, die du zum Vergleichen einblenden kannst.
7. Importiere ein Responsive set statt drei separater Importe. Es ist ein Import, und die Frames liegen beieinander.
8. Nutze Import linked pages nach dem ersten Import, um weitere Seiten derselben Website auszuwählen – sie kommen als Multiple-Import an.
9. Importiere per Klick neu (Re-import), wenn sich die Live-Seite ändert. Die Quell-URL ist am Frame gespeichert.

Fehlende Schriften beheben

Fehlende Schriften sind der häufigste Grund, warum eine importierte Seite „irgendwie falsch“ aussieht. Die Website nutzt vielleicht eine lizenzierte Schrift oder einen Webfont, den du lokal nicht installiert hast.

HTML to Frames kümmert sich darum, bevor die Ebenen aufgebaut werden:

1. Nach der Aufnahme listet der Bildschirm Missing fonts jede Schriftfamilie der Seite auf, die Figma nicht finden kann.
2. Für jede schlägt das Plugin einen Ersatz vor. Du kannst ihn übernehmen oder eine andere Schrift wählen.
3. Deine Wahl wird pro Website gespeichert – oder auf Wunsch für alle Websites –, sodass der nächste Import von derselben Domain nicht erneut fragt.

Die Font-Zuordnung ist in jedem Plan verfügbar. Schriften werden nur lokal aufgelistet; das Plugin liest den Inhalt deiner Figma-Datei nicht. Wenn du langfristig am Design weiterarbeiten willst, ist die Installation der tatsächlich von der Website genutzten Schrift weiterhin die genaueste Option.

Wie es weitergeht

HTML in Figma umzuwandeln ist der erste Schritt. Der eigentliche Wert liegt in dem, was du mit den Ebenen machst:

• Planst du ein Redesign? Lies den HTML-to-Design-Workflow.
• Arbeitest du mit KI-generierten Seiten? Sieh dir AI to Figma und unseren Leitfaden KI-generierte UI per MCP nach Figma an.
• Brauchst du localhost oder Seiten mit Login? Starte mit der Chrome-Erweiterung.
• Vergleichst du Tools? Unsere Seite mit Alternativen stellt die Optionen fair gegenüber.

Wenn du so weit bist, hol dir das Plugin und teste es an der Seite, an der du gerade arbeitest. Die Doku erklärt jede Option im Detail.