Code zurück ins Design
HTML to Design: Bau die Designdatei neu, von der sich dein Code entfernt hat
Wenn das ausgelieferte Produkt nicht mehr zu den Mockups passt, importier es zurück. HTML to Frames macht aus dem Live-HTML eine Figma-Datei mit Variablen, Styles und Komponenten.
- Farbvariablen aus den CSS Custom Properties deiner Website
- Wiederkehrende Karten und Buttons werden zu Komponenten
- Rastet in dein bestehendes Designsystem ein
Bald in der Figma Community
HTML to Design ist die Umkehrung der üblichen Übergabe: Statt ein Mockup in Code zu verwandeln, verwandelst du ausgelieferten Code zurück in eine Designdatei. Teams greifen dazu, wenn die Figma-Datei hinter der Produktion zurückgeblieben ist, wenn ein Kunde eine Website ohne jegliche Quelldateien übergibt oder wenn ein Redesign bei dem ansetzen muss, was Nutzer heute sehen – nicht bei einem zwei Jahre alten Mockup.
Das Problem der meisten Rückwärts-Workflows: Das Ergebnis ist eine Sackgasse. Du bekommst ein Bild der Seite oder lose Rechtecke mit fest codierten Hex-Werten, und jemand verbringt eine Woche damit, Styles von Hand nachzubauen. HTML to Frames ist darauf ausgelegt, eine Datei zu erzeugen, die du tatsächlich pflegen kannst. Bei Pro extrahiert es Farbvariablen aus Farben, die mindestens zweimal verwendet werden, und aus den CSS Custom Properties der Website – aus --brand-primary wird brand/primary in einer Sammlung Colors · <domain>. Daneben entstehen Textstile und Schatten-Styles, und wiederkehrende Strukturen wie Karten, Buttons und Menüpunkte werden zu Komponenten mit Instanzen.
Hat dein Team bereits ein Designsystem in Figma, konkurriert das Plugin nicht damit. Passende Variablen und Styles werden wiederverwendet, und mit aktiviertem Snap rasten Werte ohne exakte Entsprechung auf die nächstgelegene Farbe oder den nächstgelegenen Textstil deiner eigenen Datei ein. Wer dieselbe Website zweimal importiert, erzeugt nichts Neues.
Das Ergebnis ist eine Designdatei, die von Anfang an aufgeräumt ist. Lies den HTML-to-Design-Workflow-Leitfaden für eine komplette Anleitung, sieh dir unter HTML to Figma an, wie die Basis-Umwandlung funktioniert, oder vergleiche auf der Preisseite, was jeder Plan enthält.
Vom Produktionscode zur nutzbaren Designdatei
- 01
Live-Seiten importieren
Füge eine URL oder bis zu 10 Links ein – oder leg den Website-Ordner ab, wenn du den Build-Output hast.
- 02
Styles & variables aktivieren
Farbvariablen, Textstile und Schatten-Styles werden erstellt, wobei alles wiederverwendet wird, was in deiner Datei schon passt.
- 03
Snap für dein System aktivieren
Werte außerhalb des Systems rasten auf deine nächstgelegene Farbe oder deinen nächstgelegenen Textstil ein, statt Beinahe-Duplikate zu erzeugen.
- 04
Komponenten aufräumen
Wiederkehrende Strukturen kommen als Komponenten und Instanzen in einem Components-Frame an – bereit zum Umbenennen und Dokumentieren.
- 05
Redesign starten
Iteriere auf echten Layouts mit Auto Layout, statt das aktuelle Produkt von Grund auf neu zu zeichnen.
Designsystem als Ergebnis, nicht nur Ebenen
Farbvariablen
Bis zu 96 Farbvariablen aus wiederkehrenden Farben und CSS Custom Properties, gebündelt in einer Sammlung pro Domain.
Text- und Schatten-Styles
Bis zu 48 Textstile plus Schatten-Styles in den Größen sm, md, lg und xl.
An deine Styles einrasten
Nutzt die wahrnehmungsbasierte OKLab-Distanz für Farben und bei Text passende Familie, Schriftstärke und Größe innerhalb von 10%.
Automatische Komponenten
Wiederkehrende Karten, Buttons und Menüpunkte werden zu Komponenten und Instanzen – Text- und Bild-Overrides bleiben erhalten.
Hover-Varianten
Elemente mit Hover-Look werden zu Komponenten-Sets mit Default- und Hover-Varianten und einer On-Hover-Interaktion.
Light- und Dark-Modus
Erfasse beide Farbschemata in einer Variablensammlung mit Light- und Dark-Modus, plus eine dunkle Kopie jedes Screens.
Warum Reverse Engineering von Hand so langsam ist
Eine Produktionsseite nach Augenmaß in Figma nachzubauen heißt: Abstände messen, Farben abgreifen, Schriftgrößen raten und Icons neu zeichnen. Eine einzige Marketingseite kann einen Tag dauern. Ein Produkt mit Dutzenden Screens braucht Wochen – und das Ergebnis weicht trotzdem von den echten Werten ab.
HTML to Frames liest Werte direkt aus dem Browser, daher sind Abstände, Farben und Schriftgrößen exakt statt geschätzt. SVG-Icons werden zu bearbeitbaren Vektoren. Das Layout wird in Auto Layout übersetzt und auf 2 px genau verifiziert; absolute Positionierung bleibt nur dort, wo Auto Layout etwas verschieben würde.
Das verändert den ersten Tag eines Redesigns. Statt ihn mit Rekonstruktion zu verbringen, startet das Team mit einer exakten Kopie des aktuellen Produkts und nutzt die Zeit für Entscheidungen:
- Welche Farben sind tatsächlich im Einsatz, und welche sind versehentliche Beinahe-Duplikate?
- Welche Komponenten wiederholen sich, und wie viele Varianten gibt es in freier Wildbahn?
- Wo weicht das ausgelieferte Layout vom geplanten System ab?
Der Website-to-Figma-Redesign-Leitfaden zeigt, wie Agenturen damit Angebote vorbereiten.
Da jeder Frame seine Quell-URL behält, kannst du eine Seite nach dem nächsten Release neu importieren und mit dem Redesign vergleichen. Die Designdatei bleibt mit der Produktion verbunden, statt zu einem weiteren Schnappschuss zu werden, der langsam veraltet.
Wie Variablen und Styles extrahiert werden
Die Extraktion soll ein kleines, nutzbares Set erzeugen – nicht einen Style pro Element.
Farben
Eine Farbe wird zur Variable, wenn sie mindestens zweimal verwendet wird oder wenn die Website sie als CSS Custom Property definiert. Die Namen der Custom Properties bleiben als Struktur erhalten: Aus --brand-primary wird brand/primary. Bis zu 96 Farbvariablen landen in einer Sammlung Colors · <domain>.
Text und Schatten
Bis zu 48 Textstile werden aus der tatsächlich auf der Seite gerenderten Typografie erstellt. Schatten werden in die Styles sm, md, lg und xl gruppiert.
Wiederverwenden vor Erstellen
Hat deine Datei bereits eine Variable oder einen Style mit demselben Wert, wird er wiederverwendet. Importierst du dieselbe Website zweimal, entsteht nichts Neues – so bleibt eine langlebige Datei aufgeräumt.
Light + Dark
Mit dem Farbschema Light + Dark wird die Seite unter beiden prefers-color-scheme-Einstellungen erfasst, und eine Sammlung erhält zwei Modi. Figma-Free-Dateien erlauben nur einen Modus pro Sammlung; in diesem Fall wird der Dark Mode mit einem Hinweis übersprungen.
Alles hier bleibt optional. Schalte Styles & variables aus, und du bekommst einfache Ebenen mit Rohwerten – manchmal genau das Richtige für eine schnelle Referenz oder eine einmalige Analyse.
Snap: Importe innerhalb deines Designsystems halten
Produktionscode passt selten perfekt zu einem Designsystem. Ein Button nutzt vielleicht #2161E9, wo der Token #2160E8 ist, oder eine Überschrift ist 31 px statt 32 px groß. Diese Werte wörtlich zu importieren, würde deine Datei mit Beinahe-Duplikaten überfluten.
Snap to my file's styles löst das. Gibt es keine exakte Entsprechung, sucht das Plugin per wahrnehmungsbasierter OKLab-Distanz die nächstgelegene Farbe in deiner Datei und den nächstgelegenen Textstil mit gleicher Schriftfamilie und -stärke und einer Größe innerhalb von 10%. Importierte Ebenen werden dann an deine Styles gebunden statt an neue.
Das ist in drei Situationen nützlich:
- Audits, bei denen du das Produkt im offiziellen System ausgedrückt sehen willst.
- Redesigns, die ab dem ersten Frame im System starten sollen.
- Wettbewerbsanalysen, bei denen du ein fremdes Layout mit deinen eigenen Tokens neu gestaltest.
Snap, Styles & variables und Components & hover states sind Pro-Funktionen. Das Plugin liest nie mehr von deinem Dateiinhalt als nötig; es schreibt Ebenen und liest nur die Metadaten seiner eigenen Frames, wie auf der Sicherheitsseite beschrieben.
Snap funktioniert am besten, wenn deine Datei bereits veröffentlichte Farb- und Textstile enthält. Beginne mit einer kleinen, sauberen Bibliothek, importiere eine repräsentative Seite und prüfe, welche Werte eingerastet sind, bevor du einen größeren Multiple-Import über den Rest der Website startest.
Häufige Fragen
Es beschreibt, Live-Code oder eine veröffentlichte Website zurück in eine bearbeitbare Designdatei zu verwandeln. Statt zuerst zu designen und dann zu coden, importierst du, was bereits gebaut ist, damit die Designdatei wieder zur Produktion passt – nützlich für Redesigns, Audits und Websites, die ohne Quelldateien übergeben wurden.
Bei Pro ja. Farben, die mindestens zweimal verwendet werden, und als CSS Custom Properties definierte Farben werden zu Variablen. Eine Property wie --brand-primary wird zu brand/primary in einer Colors-Sammlung, die nach der Domain benannt ist. Pro Import werden bis zu 96 Farbvariablen erstellt.
Nein. Variablen und Styles, die schon in deiner Datei sind, werden bei passenden Werten wiederverwendet, und ein zweiter Import derselben Website erzeugt nichts Neues. Mit aktiviertem Snap werden Werte ohne exakte Entsprechung an deine nächstgelegene bestehende Farbe oder deinen nächstgelegenen Textstil gebunden, statt neue zu erzeugen.
Wiederkehrende Strukturen wie Karten, Buttons und Menüpunkte werden erkannt und zu Komponenten mit Instanzen, wobei Text- und Bild-Overrides erhalten bleiben. Elemente mit eigenem Hover-Look werden zu Komponenten-Sets mit Default- und Hover-Varianten. Hauptkomponenten liegen in einem separaten Components-Frame.
Ja, bei Pro. Wähle Light + Dark als Farbschema, und die Seite wird unter beiden Einstellungen erfasst. Du bekommst eine Variablensammlung mit Light- und Dark-Modus plus eine dunkle Kopie jedes Screens. Figma-Free-Dateien erlauben einen Modus pro Sammlung, daher wird der Dark Mode dort übersprungen.
Nein. Für die meisten Websites reicht eine öffentliche URL. Hast du den Build-Output, kannst du einen Website-Ordner oder eine .zip ablegen, und für Seiten hinter einem Login erfasst die kostenlose Chrome-Erweiterung, was dein Browser anzeigt. Alle Wege liefern dasselbe bearbeitbare Ergebnis.
Verwandte Themen
Schluss mit dem Nachbauen von Webseiten.
Link einfügen und in Sekunden echte, bearbeitbare, responsive Figma-Ebenen erhalten. Kostenlos starten – 10 Importe pro Monat.
Keine Kreditkarte nötig. Pro kaufst du direkt in Figma.
Bald in der Figma Community