HTML to Design: Redesign-Workflow für Designer & Agenturen

Design fließt meist in eine Richtung: Aus einem Mockup in Figma wird HTML im Browser. Aber viel echte Arbeit läuft in die Gegenrichtung. Ein Kunde übergibt dir eine Live-Website und will ein Redesign. Ein Produkt hat sich in drei Jahren Releases von seinen ursprünglichen Mockups entfernt. Ein Entwickler hat ein Feature direkt im Code gebaut, und jetzt soll das Designteam es übernehmen.

Diese umgekehrte Richtung – HTML to Design – bedeutet, das, was im Browser existiert, wieder in eine bearbeitbare Designdatei zu verwandeln. Gut gemacht, spart das Tage an manuellem Nachbau und liefert dir mehr als ein Moodboard aus Screenshots: eine Arbeitsdatei mit echten Frames, Texten, Styles und Komponenten.

Dieser Artikel beschreibt einen praktischen Workflow für Designer und Agenturen – vom ersten Audit bis zum klickbaren Prototyp – mit HTML to Frames.

Was „HTML to Design“ eigentlich bedeutet

Der Begriff umfasst jeden Prozess, der Live-Code oder eine Website in eine bearbeitbare Designdatei umwandelt. Grob gibt es drei Wege:

1. Manueller Nachbau – die Website öffnen, in den DevTools vermessen, jeden Frame von Hand nachbauen.
2. Screenshots – Bilder jeder Seite aufnehmen und als Referenz in Figma einfügen.
3. Bearbeitbare Ebenen – die gerenderte Seite in echte Figma-Frames, Texte, Vektoren und Bilder umwandeln.

Jeder Weg hat seine Berechtigung, aber sie unterscheiden sich stark im Aufwand und darin, was du danach tun kannst.

Screenshots taugen als Referenz. Manueller Nachbau ergibt weiterhin Sinn für eine einzelne kleine Seite, die du von Grund auf neu strukturieren willst. Für alles Größere sind bearbeitbare Ebenen der Ausgangspunkt, der skaliert.

Für wen dieser Workflow ist

• UI/UX- und Webdesigner, die Redesigns, Audits oder Inspirations-Teardowns machen.
• Designagenturen, die die Website eines Kunden innerhalb von Minuten in Figma brauchen, um ein Redesign-Angebot vorzubereiten. Der Team-Plan teilt fünf Plätze unter einem Lizenzschlüssel.
• Designsystem-Teams, die Farben, Typografie und Komponenten konsolidieren, die in der Produktion auseinandergedriftet sind.
• Frontend-Entwickler, die einen localhost-Build als Figma-Datei an einen Designer übergeben wollen.
• Product Manager und Marketer, die Dashboards mit Login oder bestimmte Zustände zur Planung in Figma brauchen.

Der Workflow Schritt für Schritt

Das ist die Reihenfolge, die wir empfehlen. Du kannst Schritte überspringen, aber die Reihenfolge zählt: Jeder baut auf dem vorherigen auf.

Schritt 1: Bestand auditieren

Bevor du etwas importierst, entscheide, welche Seiten wichtig sind. Bei den meisten Websites ist das eine kurze Liste:

• die Startseite,
• ein oder zwei zentrale Landing- oder Produktseiten,
• Preise oder Checkout,
• ein Content-Template wie ein Blogartikel,
• alle Screens mit Login, die zum Umfang des Redesigns gehören.

Notiere auch, welche Zustände du brauchst – ein geöffnetes Navigationsmenü, ein Formular mit Validierungsfehlern, ein gefüllter Warenkorb. Die erreichst du nicht allein über eine URL; du erfasst sie mit der Chrome-Erweiterung.

Schritt 2: Ein Responsive set importieren

Jetzt holst du die Seiten rein. Für öffentliche Seiten:

1. Öffne HTML to Frames und wähle Multiple.
2. Füge bis zu 10 Links ein. Sie werden nacheinander verarbeitet, und jede Seite wird zu einer Reihe auf dem Canvas.
3. Wähle das Responsive set – Desktop, Tablet und Mobile mit einem Klick (bis zu vier Screens pro Import bei Pro und Team).
4. Aktiviere Hide cookie banners & popups, damit Overlays keine Inhalte verdecken.
5. Aktiviere Styles & variables (Pro), wenn du im nächsten Schritt ein Designsystem extrahieren willst.

Der Desktop-Screen nutzt die Site width: Das Plugin misst die echte Designbreite der Seite, statt zu raten. Full-Bleed-Websites kommen in 1920 mit zentriertem Inhalt an, geboxte Websites in ihrer Containerbreite und fluide Websites in 1440. Eine Website erhält eine Breite für alle Seiten.

Denk an die Zählregel: Ein Import = eine Seite mit all ihren Screens. Ein Responsive set aus fünf Seiten sind fünf Importe, nicht fünfzehn.

Nach dem ersten Import kannst du mit Import linked pages weitere Seiten derselben Website aus einer Liste wählen. Für Seiten mit Login oder localhost nutze die Chrome-Erweiterung und Send to Figma. Für Seiten, die nur als Dateien existieren, importierst du über Local file eine HTML-Datei, einen ganzen Website-Ordner oder eine .zip. Der HTML-to-Figma-Leitfaden erklärt jede Quelle im Detail.

Schritt 3: Das Designsystem extrahieren

Hier hört ein Import auf, ein Bild der Website zu sein, und wird zur Arbeitsgrundlage. Mit aktivierter Option Styles & variables (Pro) erstellt das Plugin:

• Farbvariablen aus Farben, die mindestens zweimal vorkommen, und aus den CSS Custom Properties der Website – aus --brand-primary wird brand/primary – in einer Sammlung Colors · <domain> (bis zu 96).
• Textstile (bis zu 48).
• Schatten-Styles (sm, md, lg, xl).

Zwei Details machen das für echte Projekte praxistauglich:

• Wiederverwendung. Hat deine Datei bereits Variablen oder Styles mit passenden Werten, verwendet das Plugin sie wieder. Ein zweiter Import derselben Website erzeugt nichts Neues.
• Snap to my file's styles (Pro). Hast du bereits ein Designsystem, können importierte Farben und Texte bei fehlender exakter Entsprechung auf den nächstgelegenen Style deiner Datei einrasten – per wahrnehmungsbasierter OKLab-Farbdistanz und bei passender Schriftfamilie, Schriftstärke und Größe innerhalb von 10%.

Unterstützt die Website einen Dark Mode, wähle Light + Dark (Pro). Die Seite wird in beiden Farbschemata erfasst, und du bekommst eine Variablensammlung mit Light- und Dark-Modus plus eine dunkle Kopie jedes Screens. Beachte, dass Figma-Free-Dateien nur einen Modus pro Sammlung erlauben, daher wird der Dark Mode dort mit einem Hinweis übersprungen.

Das Ergebnis ist eine ehrliche Bestandsaufnahme dessen, was die Website tatsächlich nutzt – oft das nützlichste Ergebnis des ganzen Audits. Eine lange Reihe fast identischer Grautöne in einer Sammlung belegt den Konsolidierungsbedarf besser als jede Folie.

Schritt 4: Aus Wiederholung Komponenten machen

Mit Components & hover states (Pro) werden wiederkehrende Strukturen – Karten, Buttons, Menüpunkte – zu Komponenten und Instanzen, wobei Text- und Bild-Overrides erhalten bleiben. Elemente mit Hover-Look werden zu einem Komponenten-Set mit Default- und Hover-Varianten plus On-Hover-Prototyp-Interaktion. Die Hauptkomponenten werden in einem Frame Components · <site> gesammelt.

So bekommst du eine Komponenten-Bestandsliste zum Bereinigen. Typische nächste Schritte:

• fast identische Button-Komponenten zu einem Set mit Varianten zusammenführen,
• Komponenten nach deiner Namenskonvention umbenennen,
• Instanzen gegen Komponenten deiner eigenen Bibliothek tauschen, wo diese bereits existieren.

Schritt 5: Auf echter Struktur iterieren

Jetzt wird designt. Da das Layout als verschachtelte Frames mit Auto Layout ankommt, wo das Plugin es verifizieren konnte, verhalten sich Änderungen wie in einer selbst gebauten Datei:

• Überschriften bearbeiten und zusehen, wie der Stapel neu umbricht,
• einen Abstand oder ein Padding in einem Abschnitt ändern,
• eine Farbvariable tauschen und jede Verwendung aktualisiert sehen,
• einen Frame skalieren und Fill und Center ihre Arbeit machen lassen.

In unseren Tests an echten Websites wurde Auto Layout auf etwa 86–97% der Frames abgeleitet. Frames, die absolut bleiben, erhalten sinnvolle Constraints, und der Ergebnisbildschirm listet auf, warum ein Frame absolut geblieben ist. Auto Layout erklärt geht ins Detail.

Eine nützliche Gewohnheit: Lass den ursprünglichen Import als „Vorher“ auf einer eigenen Seite und dupliziere ihn für dein Redesign. Aktiviere beim Import Reference screenshot (Pro), wenn du eine versteckte, gesperrte Bildebene für den direkten Vergleich mit der Live-Seite willst.

Schritt 6: Prototypen

Importierte Seiten sind bereits teilweise verdrahtet:

• Links bleiben klickbar (Open link).
• Links zwischen importierten Seiten werden zu Navigate-Interaktionen – ein Mehrseiten-Import ist also direkt ein klickbarer Flow.
• Fixierte und sticky Header sowie horizontale Scrollbereiche funktionieren im Present-Modus.
• Die Hover-Varianten aus Schritt 4 bringen On-Hover-Interaktionen mit.

Du kannst in einer Kundenpräsentation also den „Vorher“-Prototyp neben den „Nachher“-Prototyp stellen, ohne einen davon von Grund auf zu verdrahten.

Schritt 7: Synchron bleiben

Websites ändern sich ständig. Jeder importierte Frame speichert seine Quell-URL, daher ist Re-import nur einen Klick entfernt, wenn sich die Live-Seite ändert. Da bestehende Variablen und Styles wiederverwendet werden, flutet ein erneuter Import deine Datei nicht mit Duplikaten.

Anwendungsfälle in der Praxis

Redesign-Angebote von Agenturen

Eine Agentur, die ein Redesign pitcht, braucht die aktuelle Kunden-Website schnell in Figma. Importiere die wichtigsten Seiten als Responsive set, extrahiere das Designsystem, und du hast einen faktenbasierten Abschnitt „Das habt ihr heute“ – mit der echten Farb- und Typo-Bestandsaufnahme –, bevor du eine einzige neue Idee zeigst. Der Team-Plan teilt fünf Plätze, sodass mehrere Designer mit derselben Lizenz arbeiten können. Siehe Website to Figma und den Redesign-Leitfaden.

Audits für Design-Code-Drift

Importiere die Produktionsseite und stell sie neben das ursprüngliche Mockup. Unterschiede in Abständen, Farben und Typografie zeigen sich Ebene für Ebene, und die erzeugten Variablen verraten, wie viele Farben außerhalb der Palette sich eingeschlichen haben.

Von Entwicklern gebaute Features

Ein Entwickler hat ein Feature auf localhost prototypisiert. Erfasse es mit der Chrome-Erweiterung, sende es an Figma, und der Designer verfeinert es in derselben Datei wie den Rest des Produkts.

KI-generierte Seiten

Ist der Ausgangspunkt HTML aus Claude oder Cursor, verbinde den Assistenten per MCP, und die Seite landet in deinem geöffneten Plugin. Siehe AI to Figma.

Lernen und Teardown

Studierende können gut gebaute Websites importieren und Ebene für Ebene studieren, wie Abschnitte strukturiert sind, wie Typografie skaliert und wie sich Abstände wiederholen.

Datenschutz bei Kundenprojekten

Agenturen importieren oft Kunden-Websites, daher zählt, was mit den Daten passiert. Seiten werden in einem isolierten Sandbox-Browser gerendert; das Ergebnis wird einmal ausgeliefert und dann aus dem Arbeitsspeicher gelöscht, nie auf die Festplatte geschrieben. Hochgeladene lokale Dateien werden gelöscht, sobald der Import abgeschlossen ist. Das Plugin liest den Inhalt deiner Figma-Datei nicht. Die Sicherheitsseite enthält alle Details.

Loslegen

Am schnellsten findest du heraus, ob dieser Workflow passt, wenn du ihn an einer echten Seite testest, an der du gerade arbeitest. Free enthält 10 Importe pro Monat; Pro ergänzt die oben beschriebenen Designsystem- und Komponentenfunktionen. Vergleiche die Pläne auf der Preisseite, stöbere in der Doku oder sieh dir auf der Seite mit Alternativen an, wie andere Tools abschneiden.