Von Framer zu Figma: UnHTML im Vergleich zum Web-Import von Framer

Kurze Antwort: Sie arbeiten in entgegengesetzte Richtungen

Der Web-Import von Framer und UnHTML konkurrieren nicht direkt, denn sie bewegen Inhalte in entgegengesetzte Richtungen. Die Browser-Erweiterung von Framer kopiert Teile einer Webseite und fügt sie in Framer ein. UnHTML ist ein Figma-Plugin, das eine Webseite als Ebenen innerhalb von Figma nachbaut.

Wenn du nach "framer zu figma" gesucht hast, hast du wahrscheinlich eine veröffentlichte Framer-Seite und brauchst sie in Figma als etwas Bearbeitbares. In der Framer-Dokumentation, die wir gefunden haben, wird diese Richtung nicht behandelt. Dieser Artikel erklärt, was jedes Werkzeug tut, zeigt einen praktischen Weg von einer veröffentlichten Framer-Seite nach Figma und stellt beide nebeneinander. Preise und Funktionen wurden am 2026-10-13 geprüft.

In welche Richtung welches Werkzeug arbeitet

Framer dokumentiert zwei Wege, fremdes Material in ein Framer-Projekt zu holen. Der eine ist eine Browser-Erweiterung, die Abschnitte einer Live-Webseite kopiert, damit du sie in ein Framer-Projekt einfügen kannst. Der andere ist ein separates offizielles Figma-Plugin, das ausgewählte Figma-Ebenen nach Framer importiert. Beide enden in Framer.

UnHTML endet in Figma. Es ist ein Plugin, das eine Webseite in native Frames, Text, Bilder, Vektoren und Auto Layout umwandelt. Die nützliche Frage lautet daher nicht "welches ist besser", sondern "wo soll das Ergebnis leben?"

Wenn du bei anderen Werkzeugen schon über die Richtung, in die eine Umwandlung tatsächlich läuft gelesen hast, gilt hier dieselbe Logik. Prüfe das Ziel, bevor du Funktionen vergleichst.

Was der Web-Import von Framer macht

Das Werkzeug von Framer ist eine Chrome-Erweiterung namens HTML to Framer. Installiere sie, öffne deine Seite, fahre mit der Maus über ein Element und kopiere es. Mit gedrückter Shift-Taste kopierst du mehrere Elemente auf einmal, oder du drückst beim Überfahren Esc, um das übergeordnete Element auszuwählen. In Framer fügst du mit Cmd+V auf dem Mac oder Strg+V unter Windows ein.

Framer gibt an, dass beim Einfügen eines Abschnitts mit mehreren Elementen leere Divs verworfen werden, sodass eine saubere Ebenenhierarchie entsteht. Sobald die Elemente auf der Arbeitsfläche liegen, kannst du sie bearbeiten, Breakpoints hinzufügen und veröffentlichen.

Framer ist auch ehrlich darüber, was danach kommt. Die Lektion rät, das Eingefügte als Ausgangspunkt zu nutzen und danach Layout, Assets und responsives Verhalten auf der Arbeitsfläche zu prüfen. Das ist eine vernünftige Erwartung an jede Konvertierung.

Zwei Vorbehalte zu den Quellen. Die Seite zur Erweiterung stammt vom 5. September 2023 und nennt weder Grenzen noch Preise. Die Framer-Lektion weist darauf hin, dass sie vor dem Update vom 16. Juni 2026 (Agents, Branching und das CMS) entstanden ist, sodass sich Teile der Oberfläche inzwischen geändert haben können. Die aktuellen Tarifvoraussetzungen von Framer haben wir nicht geprüft, deshalb nennt dieser Artikel sie nicht.

Für ein Team, das in Framer bauen will, ist das ein schneller Weg, Abschnitte einer bestehenden Seite zu übernehmen. Es ist nicht dafür gebaut, dir Figma-Ebenen zu liefern.

Das ist keine Schwäche des Werkzeugs, sondern eine Frage des Zwecks. Wer eine Framer-Seite weiterbauen will, braucht keine Figma-Ebenen, und wer in Figma arbeitet, braucht keine Framer-Ebenen. Wichtig ist nur, dass du das Ziel kennst, bevor du Zeit in einen Import steckst.

Was du in Figma bekommst

UnHTML überträgt das CSS der Seite auf Figma-Struktur. Abstände, Padding, Wrap und Stretch stammen aus dem Flex- und Grid-CSS der Seite und werden zu Auto Layout. Das Figma-Hilfecenter definiert die Bausteine, die du sehen wirst: Richtung (vertikal, horizontal oder Grid), Gap, Padding, Wrap und die Größenmodi Hug contents, Fill container und Fixed. Figma dokumentiert diese Auto-Layout-Eigenschaften im Detail, und unsere Referenz dazu, wie Flexbox auf Auto Layout abgebildet wird, deckt die CSS-Seite ab.

Wenn ein Frame die erfasste Geometrie nicht nachbilden kann, greift das Plugin auf absolute Positionierung zurück. Schriften, die auf deinem Rechner nicht installiert sind, werden ersetzt, und jeder Austausch steht im Importbericht. Es ist ein bearbeitbarer Ausgangspunkt, kein pixelgenauer Klon.

Erfassungsmethoden und Datenschutz

Du kannst eine eigenständige .html-Datei oder ein Safari-.webarchive direkt ins Plugin ziehen. Bei Live-Seiten, entfernten Assets oder mit JavaScript gebauten Seiten erfasst du zuerst eine scene.json mit der CLI oder einem Bookmarklet. Mit den Standardeinstellungen stellt der Import keine Netzwerkanfragen, und das Nachladen entfernter Inhalte ist eine Option, die du aktiv einschalten musst.

Preise (Stand 2026-10-13)

Die Seite des Plugins selbst nennt drei Einmalpreise ohne Abonnement:

Die Seite weist darauf hin, dass sich die Einführungspreise ändern können und ein abgeschlossener Kauf den bezahlten Preis behält.

Eine veröffentlichte Framer-Seite nach Figma bringen

Dieser Weg behandelt deine veröffentlichte Framer-Seite wie jede andere Website. Voraussetzung ist, dass die Seite veröffentlicht ist, weil du erfasst, was ein Browser sieht.

1. Öffne die veröffentlichte Seite in Chrome oder Safari.
2. Speichere sie als eigenständige HTML-Datei (siehe, wie du eigenständiges HTML aus Chrome exportierst), oder erfasse mit der CLI eine scene.json, wenn die Seite von Skripten oder entfernten Assets abhängt.
3. Öffne Figma, starte das Plugin und ziehe die Datei hinein.
4. Lies den Importbericht. Achte auf ersetzte Schriften und Frames, die auf absolute Positionierung zurückgefallen sind.
5. Räume auf und baue Komponenten aus dem, was du weiter bearbeiten willst.

Rechne mit Abweichungen. Framer-Seiten sind oft animiert und stark responsiv, und eine Erfassung hält nur den Zustand eines Viewports fest. Prüfe die Breakpoints, die dir wichtig sind, und baue Interaktionen von Hand nach, denn eine statische Erfassung enthält kein Verhalten.

Es gibt weitere Werkzeuge in dieser Kategorie. Wenn du ein anderes Web-zu-Figma-Plugin abwägst, vergleiche Preise, Ebenengrenzen und Ergebnis auf derselben Seite, bevor du dich entscheidest. Für diesen Artikel haben wir keine Export-Werkzeuge auf der Framer-Seite geprüft, deshalb behandeln wir sie nicht.

Nebeneinander

Die Tabelle zeigt einen Unterschied im Ziel, nicht in der Qualität. Das Werkzeug von Framer ist der kürzere Weg, wenn die fertige Seite in Framer leben soll. Das Figma-Plugin ist der kürzere Weg, wenn die fertige Arbeit in Figma lebt, wo die Ebenen nativ sind und das Auto Layout echt ist.

Welches du nutzen solltest

Wähle nach dem Ziel. Wenn du eine Seite in ein Framer-Projekt holst, nutze die Erweiterung von Framer und prüfe das Ergebnis auf der Arbeitsfläche, wie Framer es rät. Wenn du eine veröffentlichte Framer-Seite nach Figma holst, erfasse die Seite und importiere sie mit einem Werkzeug auf der Figma-Seite, und lies den Importbericht, bevor du den Ebenen traust. In beiden Fällen gilt: Behandle das Ergebnis als Ausgangspunkt und plane Zeit für das Aufräumen ein. Das gilt auch für eine Seite, die auf den ersten Blick sauber aussieht: Vergleiche den Import mit dem Original, bevor du darauf aufbaust, und halte fest, was du von Hand korrigieren musstest.

Häufige Fragen

Kann Framer eine Seite nach Figma exportieren?

Die Framer-Dokumentation, die wir gefunden haben, deckt die Gegenrichtung ab: ein Figma-Plugin, um Figma-Ebenen nach Framer zu holen, und eine Browser-Erweiterung, um Webseitenabschnitte nach Framer zu holen. Einen offiziellen Export von Framer nach Figma haben wir nicht gefunden. Der praktische Weg ist daher, die veröffentlichte Seite zu erfassen und in Figma zu importieren.

Erzeugt der Web-Import von Framer Figma-Ebenen?

Nein. Die Erweiterung kopiert Elemente von einer Live-Seite, und du fügst sie in ein Framer-Projekt ein. Das Ergebnis sind also Framer-Ebenen.

Was kostet UnHTML?

Laut unhtml.pro am 2026-10-13: Free für $0 mit einer Grenze von 500 Ebenen pro Import, Pro für $39 pro Editor einmalig und Studio für $119 für bis zu fünf Editoren.

Entspricht das Figma-Ergebnis genau der Framer-Seite?

Nein. Nicht installierte Schriften werden ersetzt, und komplexe Geometrie kann auf absolute Positionierung zurückfallen. Betrachte den Import als bearbeitbaren Ausgangspunkt, nicht als Klon.