Webflow zu Figma: Drei Workflows im Vergleich 2026

Webflow hat keinen nativen Export nach Figma

Es gibt keinen eingebauten Weg, eine Webflow-Seite nach Figma zu schicken. Jeder Workflow erfasst die gerenderte Seite und baut sie als Figma-Ebenen neu auf. Stand 2026-10-20 erledigen das drei Arten von Werkzeugen: Plugins mit URL-Import, eine Chrome-Erweiterung und der dateibasierte Import. In den großen Linien sind sie sich einig. Unterschiede gibt es bei den akzeptierten Eingaben, beim Auto Layout und bei den Kosten.

Dieser Leitfaden richtet sich an Designerinnen und Designer, die eine Webflow-Seite ohne Designdatei erben und sie als bearbeitbare Ebenen in Figma brauchen. Keines dieser Werkzeuge liefert einen pixelgenauen Klon. Du bekommst Ebenen, die du bearbeiten kannst, dazu ein paar Dinge, die zurückfallen oder verloren gehen. Die folgenden Abschnitte sagen genau, welche.

Die offizielle App funktioniert nur in die andere Richtung

Die Figma-to-Webflow-App von Webflow synchronisiert Komponenten, Variablen und Stile von Figma nach Webflow. Ihre Beschreibung nennt nur diese eine Richtung, von Figma nach Webflow, und nichts in Gegenrichtung. Die App ist kostenlos, braucht aber das Figma-Plugin und die Autorisierung deiner Webflow-Workspaces oder -Sites.

Die Gegenrichtung ist schwieriger, weil Webflow keine Design-Quelldateien exportiert. Wie das html.to.design-Team in seiner Webflow-Anleitung schreibt, ist die Live-Seite die einzige Eingabe. Deshalb arbeiten alle folgenden Werkzeuge mit der Seite, so wie ein Browser sie darstellt.

Drei Wege, eine Webflow-Seite nach Figma zu bringen

Plugins mit URL-Import

html.to.design und Vellum laufen direkt in Figma. Du fügst eine veröffentlichte URL oder eine Staging-URL ein, wählst eine Breite und importierst. Die Anleitung von html.to.design nennt die Viewports Desktop, Tablet und Mobil, erlaubt mehrere URLs auf einmal und sagt, dass nur öffentliche Seiten importiert werden können. Für private Seiten verweist sie auf die eigene Browser-Erweiterung. Der Beitrag von Vellum aus 2026 beschreibt denselben Ablauf: Seite veröffentlichen, URL kopieren, URL als Quelle wählen, Breite festlegen.

Das ist der schnellste Weg für eine öffentliche Marketingseite, und du verlässt Figma nie. Wer mehrere Seiten braucht, fügt mehrere URLs ein und importiert sie gemeinsam, statt jede Seite einzeln anzustoßen.

Erfassung per Browser-Erweiterung

Export to Figma ist eine Chrome-Erweiterung. Du öffnest die Webflow-Seite, klickst auf die Erweiterung, wählst die ganze Seite oder ein einzelnes Element und fügst in Figma mit Cmd+V oder Ctrl+V ein. Laut Anbieter dauert eine Erfassung 2 bis 5 Sekunden. Weil die Erweiterung die gerenderte Seite liest, funktionieren auch Seiten hinter einem Login, wenn du in Chrome angemeldet bist. Außerdem kannst du nur einen Abschnitt statt der ganzen Seite erfassen.

Dateibasierter Import mit UnHTML

UnHTML bauen wir selbst, lies diesen Abschnitt also entsprechend. Das Plugin nimmt keine URL an. Es importiert eine eigenständige .html-Datei, ein Safari-.webarchive oder eine scene.json, die mit der Open-Source-CLI oder dem Bookmarklet erfasst wurde. Für eine Live-URL von Webflow führst du zuerst die Erfassung aus, zum Beispiel node capture/cli/capture.js https://example.com, speicherst das Ergebnis als scene.json und importierst dann diese Datei. Du kannst auch eine eigenständige HTML-Datei aus Chrome exportieren.

Das ist ein Schritt mehr als das Einfügen einer URL. Dafür hältst du eine Erfassungsdatei in der Hand, die du später erneut importieren oder an Kolleginnen und Kollegen weitergeben kannst. Mit den Standardeinstellungen stellt der Import keine einzige Netzwerkanfrage, und das Laden entfernter Ressourcen ist eine Option zum Einschalten.

Was ankommt und was zurückfällt

Die Seiten der Anbieter sind sich in der Hauptsache einig: Text bleibt bearbeitbar, Bilder kommen als Füllungen an, und die Struktur wird zu Frames. Sie sind sich auch darin einig, was verloren geht. Die Tabelle gibt wieder, was jeder Anbieter Stand 2026-10-20 auf seiner eigenen Seite angibt. "Nicht angegeben" heißt, dass die Seite schweigt, nicht dass die Funktion fehlt.

Interaktionen und CMS-Inhalte

Webflow Interactions sind Laufzeitverhalten, deshalb bringt kein Werkzeug sie mit. Vellum schreibt, du bekommst "den Ruhezustand, in dem die Seite landet, nicht die Bewegung". Export to Figma empfiehlt, einen Zustand zuerst in Chrome auszulösen, etwa ein geöffnetes Dropdown, und dann zu erfassen. Eine CMS-Collection-Liste kommt als die Einträge an, die zum Zeitpunkt der Erfassung vorhanden waren, nicht als wiederholbare Vorlage, die du neu befüllen könntest.

Video und Lottie werden laut Vellum zu einem einzelnen Standbild, und per Lazy Loading nachgeladene Bilder können leer erscheinen, wenn die Seite sie nicht zuerst lädt. Scrolle die Seite vor der Erfassung einmal von oben nach unten durch, damit alle Bilder nachgeladen sind.

Auto Layout

Die Auto-Layout-Anleitung von Figma definiert drei Größenmodi: hug contents, fill container und fixed. Constraints gelten in der Regel nicht für Kinder eines Frames mit Auto Layout. Ein getreuer Import muss für jedes Kind einen dieser Modi wählen, und genau hier unterscheiden sich die Werkzeuge.

UnHTML bildet das CSS der Seite auf Auto Layout ab, etwa flex-direction, gap und justify-content. Wenn ein Frame die erfasste Geometrie nicht treffen kann, fällt er von selbst auf absolute Positionierung zurück. Der Importbericht listet jede ersetzte Schrift, jeden auf absolut zurückgesetzten Frame und jedes übersprungene Bild auf, damit du siehst, was sich geändert hat. Die Umwandlung in Auto Layout setzt den Pro-Plan voraus. Wie sich CSS Grid auf Ebenen abbildet, zeigt der schwierigste Fall. Export to Figma sagt, dass sein Flex und Grid wo möglich zu Auto Layout werden und dass komplexe Raster mit benannten Template-Bereichen manuell nachbearbeitet werden müssen. Die Seiten von html.to.design und Vellum geben nicht an, wie sie damit umgehen.

Besteht deine Webflow-Seite aus einem Stapel einfacher Flex-Abschnitte, kannst du mit jedem dieser Werkzeuge einen brauchbaren Start erwarten. Ein dichtes Raster ist etwas anderes: Plane bei jedem davon manuelle Nacharbeit ein. Ein Screenshot samt Bildvektorisierung würde dir weder das eine noch das andere liefern.

Kosten, geprüft am 2026-10-20

Die Preise stammen am Tag der Erstellung von der jeweiligen Anbieterseite und können sich ändern.

• UnHTML: Kostenlos bis zu 500 Ebenen pro Import. Pro kostet einmalig $39 pro Editor, ohne Ebenenlimit. Studio kostet einmalig $119 für bis zu fünf Editoren. Die Seite sagt an einer Stelle "pro Seite" und an anderer "pro Import", der genaue Geltungsbereich des 500-Ebenen-Limits ist also unklar.
• Export to Figma: Kostenlos mit 10 Erfassungen pro Monat. Pro kostet $1 pro Monat während einer Einführungsaktion, mit unbegrenzten Erfassungen. Die Seite weist darauf hin, dass der Aktionspreis nicht von Dauer sein muss.
• html.to.design und Vellum: Wir haben ihre aktuellen Preise nicht überprüft und nennen sie deshalb nicht. Der Beitrag von Vellum zeigt einen Button "Add to Figma, free" und keine Preisliste.

Einmalige und monatliche Preise passen zu verschiedenen Aufgaben. Ein einzelner Relaunch spricht für den Einmalkauf. Ein stetiger Strom an Erfassungen, etwa bei einem Team, das jede Woche neue Seiten analysiert, spricht für den günstigeren Monatsplan an dem Tag, an dem du das liest. Prüfe die Anbieterseite deshalb vor dem Kauf noch einmal.

Welcher Workflow zu welcher Aufgabe passt

• Eine öffentliche Webflow-Seite und ein schneller Blick: ein URL-Plugin oder die Erweiterung. Einfügen, importieren, bearbeiten.
• Eine Seite hinter einem Login: die Erweiterung, da sie deinen angemeldeten Browser nutzt, oder die Erweiterung von html.to.design für private Seiten.
• Eine Erfassung zum Aufbewahren, mit einem Bericht darüber, was zurückgefallen ist: der dateibasierte Import, mit dem zusätzlichen Erfassungsschritt.
• Ein Design nach Webflow schicken: die Figma-to-Webflow-App von Webflow.

Teste eine Seite, bevor du dich festlegst

Kein Workflow von Webflow nach Figma ist verlustfrei. Interaktionen und CMS-Vorlagen kommen bei keinem an, und dichte Raster brauchen bei allen Nacharbeit. Wähle eine repräsentative Seite, importiere sie mit zwei Werkzeugen und vergleiche die Ebenen, die du tatsächlich korrigieren musst. Zähle dabei die Handgriffe, nicht nur die Sekunden, die der Import selbst dauert: Entscheidend ist die Zeit, die du danach in Figma aufräumst. Wenn du den dateibasierten Weg ausprobieren willst, findest du UnHTML auf unhtml.pro.