HTML zu Figma: HTML, CSS und Quellcode in editierbare Figma-Designs umwandeln

Anleitung2026-04-25

Wenn Sie Zugriff auf HTML- und CSS-Quellcode haben - Ihren eigenen Produktionscode, eine Open-Source-UI-Bibliothek, einen Frontend-Prototyp oder einen statischen Export - können Sie ihn direkt in eine editierbare Figma-Datei umwandeln. Das ist die entwicklergetriebene, quellorientierte Schwester des Website-to-Figma-Workflows.

Warum sollte man Quellcode statt einer Live-URL verwenden? Drei Gründe: maximale Treue (berechnete Styles kommen direkt aus CSS, nicht aus Pixeln geschätzt), geeignet für Seiten, die schwer zu erfassen sind (zur Build-Zeit generiert, hinter Auth, in Entwicklung), und ideal für Code-Design-Roundtrips in engineering-getriebenen Workflows.

Passendes Codia-Produkt: Codia HTML to Figma.

Wann HTML zu Figma sinnvoll ist

Dieser Workflow passt, wenn:

Die Seite in einer Entwicklungsumgebung liegt und noch nicht bereitgestellt ist.
Sie einen statischen HTML/CSS-Export haben, aber keine Design-Quelle.
Sie mit einem Open-Source-Designsystem oder einer in Code geschriebenen Komponentenbibliothek arbeiten.
Engineering die Seite besitzt und die Figma-Quelle aus dem Produktions-CSS rückwärts generiert werden soll.
Sie eine Komponentenbibliothek wieder in Figma dokumentieren möchten, um Designabgleich zu ermöglichen.
Ein Designsystem-Team prüfen möchte, wie Produktions-CSS mit Design-Tokens übereinstimmt.

Wenn die Seite als URL erreichbar ist, ist der Website-to-Figma-Workflow meist einfacher. HTML to Figma ist für Situationen gedacht, in denen Sie den Quellcode zur Verfügung haben.

HTML zu Figma vs Website zu Figma vs Screenshot zu Figma

Eingabe	Workflow	Am besten für
Rohes HTML/CSS	HTML zu Figma	Entwicklergetriebene Umwandlung, maximale Treue, unveröffentlichte Seiten.
Live-URL	Website to Figma	Erreichbare Seiten, inklusive Konkurrenz- und Produktionsseiten.
PNG/JPG	Screenshot to Figma	Wenn Sie nur ein Bild haben.

Die drei Workflows führen zum selben Ziel: einer editierbaren Figma-Datei. Sie unterscheiden sich darin, was Sie hineingeben.

Workflow

Quelle vorbereiten. Stellen Sie sicher, dass HTML isoliert sauber rendert - kein fehlendes CSS, keine kaputten Fonts, keine Abhängigkeit von einem laufenden Build-Server.
Umwandeln. Codia AI parst das Markup, wendet berechnete CSS-Styles an, löst Bilder und Schriften auf und rekonstruiert das Visuelle in Figma-Ebenen.
Ergebnis in Figma öffnen. Jeder Umwandlungsjob landet als Frame mit strukturierten Ebenen, Textstilen und Bildfüllungen.
Prüfen - siehe Abschnitt zur Nachbearbeitung unten.
Wiederkehrende Komponenten komponentisieren, damit die Figma-Datei dieselbe Struktur wie der Quellcode widerspiegelt.

Was bei der Umwandlung erhalten bleibt

Meistens sauber

Semantische HTML-Struktur - <section>, <article>, <header>, <footer> und verschachtelte Layouts werden zu gruppierten Figma-Frames.
Textinhalt und Typografie - echte Textebenen, font-family, font-size, font-weight und line-height bleiben erhalten.
Farbwerte - solide Hintergründe und Textfarben werden direkt in Figma-Füllungen überführt.
Flexbox- und Grid-Layouts - dort, wo der Vergleich sauber ist, zu Figma Auto Layout übersetzt.
Rahmen, border-radius, Schatten - als Figma-Effekte angewendet.
Bilder - als Bildfüllungen mit Verweis auf die ursprüngliche Asset-URL platziert.

Muss geprüft werden

Komplexe CSS-only-Effekte - backdrop-filter, komplexe mask-image, mehrstufige Verlaufsüberlagerungen. Werden auf die nächstliegende Figma-Entsprechung angenähert.
Pseudoelemente - ::before/::after-Inhalte werden als separate Frames erfasst; Pseudoklassen-Zustände (:hover) müssen separat aufgenommen werden.
Eigene Font-Hostings - Schriften, die über ein CDN geladen werden, müssen möglicherweise manuell auf lokale Figma-Schriften gemappt werden.
CSS-Variablen und Design-Tokens - werden als Rohwerte erhalten; die Rückabbildung auf Ihr Figma-Designsystem ist ein manueller Schritt.
JS-gesteuertes Layout - alles, was per JavaScript dimensioniert oder positioniert wird, muss vor der Umwandlung gerendert sein.
Web-Animationen - Figma bildet CSS-Keyframes oder Transitions nicht nativ ab. Konvertieren Sie den Ruhezustand.

Anwendungsfälle nach Rolle

Designer, die eine Codebase übernehmen

Sie kommen in ein Unternehmen. Es gibt ein Produktions-Frontend. Es gibt kein Figma. HTML-to-Figma gibt Ihnen einen Ausgangspunkt für Designarbeit, ohne jeden Screen manuell neu aufzubauen.

Designsystem-Teams

Vergleichen Sie, was tatsächlich im Produktions-CSS steckt, mit Ihrer Figma-Bibliothek. Konvertieren Sie repräsentative Komponenten aus der Codebase und legen Sie sie neben die Figma-Gegenstücke. Abweichungen werden sichtbar.

Engineering-Teams, die Komponenten dokumentieren

Wenn Ihre Komponentenbibliothek im Code lebt, das Designteam aber Figma-Dokumentation braucht, ist HTML-to-Figma die Brücke. Konvertieren Sie jede Storybook- oder Demo-Ansicht in einen Figma-Frame.

Agenturen und Freelancer

Ein Kunde übergibt statische HTML-Mockups (oft von einem früheren Dienstleister). HTML-to-Figma ist schneller als ein kompletter manueller Neuaufbau und liefert eine editierbare Basis für das Redesign.

Was nach der Umwandlung bereinigt werden sollte

Konzentrieren Sie sich nach der Konvertierung auf:

Textstile - ersetzen Sie Inline-Styles durch Figma-Typografie-Tokens.
Farb-Tokens - ordnen Sie wiederhergestellte Hex-Werte Ihren Designsystem-Farbstyles zu.
Icons - ersetzen Sie Raster-Icons durch SVG-Komponenten aus Ihrer Bibliothek.
Auto Layout - prüfen Sie, ob Auto Layout für responsive Bereiche korrekt übernommen wurde; wo nötig neu aufbauen.
Komponentenstruktur - verwandeln Sie wiederkehrende Muster (Karten, Buttons, Listenelemente) in Figma-Komponenten.
Benennung - Code-Klassennamen passen selten zu Designnamen. Benennen Sie für Klarheit um.
Drittanbieter-Widgets - entfernen Sie Analytics-, Chat- und Consent-Overlays aus der Designfläche.

Häufige Fehler

Halb kaputte Quelle. Wenn HTML im Browser nicht korrekt rendert, kann die Umwandlung nichts rekonstruieren, was nicht vorhanden ist. Prüfen Sie zuerst, ob die Quelle sauber rendert.

Fehlende CSS oder Fonts. Dasselbe Prinzip - wenn externe CSS-Dateien oder Schriften nicht laden, erfasst die Umwandlung die Fallback-Version. Bündeln Sie alles für die Konvertierung.

JS-gesteuerte Inhalte vergessen. Wenn wichtige Inhalte oder Layouts nach dem Laden durch JavaScript gerendert werden, stellen Sie sicher, dass das JS ausgeführt wurde und die Seite vor der Aufnahme vollständig hydratisiert ist.

Erwarten, dass CSS-Animationen übertragen werden. Figma ist statisch. Konvertieren Sie den ruhenden Zustand und entwerfen Sie bei Bedarf interaktive Varianten in Figma.

Es als Code-Qualitätsprüfung sehen. HTML-to-Figma refaktoriert Ihren Code nicht; es konvertiert, was da ist. Codequalität gehört in den Code-Review, nicht in Figma.

Zusammenspiel mit Figma to Code

Ein hilfreiches Roundtrip-Muster für Engineering-Teams: HTML → Figma (dieser Workflow) → Bereinigung in Figma → Figma to Code → sauberere, refaktorierte Frontend-Implementierung. Nutzen Sie das, wenn Sie inkonsistente Produktions-CSS in eine saubere, am Designsystem ausgerichtete Umsetzung zurückführen möchten.

API-Zugriff

Für die Massenkonvertierung über eine ganze Komponentenbibliothek oder ein Designsystem hinweg akzeptiert die Visual Struct API HTML-Eingaben und gibt strukturiertes JSON zurück, das nachgelagerte Werkzeuge in Figma umwandeln oder in Design-Operations-Pipelines einspeisen können.

FAQ

Kann man rohes HTML/CSS wirklich in editierbares Figma umwandeln?

Ja. Die Umwandlung parst HTML, wendet berechnetes CSS an und baut das Visuelle als Figma-Ebenen neu auf - Text ist echter Text, Farben sind echte Füllungen, Layout ist dort echtes Auto Layout, wo der Vergleich passt.

Worin unterscheidet sich das vom Screenshotten der Seite?

Ein Screenshot verliert den berechneten CSS-Kontext - Schriften, exakte Farben und Layout-Logik müssen aus Pixeln neu geschätzt werden. HTML-to-Figma startet bei den Quellwerten, daher ist die Treue höher und der Nacharbeitsaufwand geringer.

Funktioniert das mit Frameworks wie React oder Vue?

Die Umwandlung arbeitet auf dem gerenderten HTML, nicht auf dem Framework-Quellcode. Rendern Sie die Komponente zu HTML/CSS (Storybook, statischer Export, Browser-DevTools "Copy outerHTML") und geben Sie das weiter.

Was ist mit Tailwind CSS-Klassen?

Tailwind kompiliert zur Laufzeit zu normalem CSS, also sieht die Umwandlung die üblichen CSS-Regeln. Wiederhergestellte Figma-Styles entsprechen dem visuellen Ergebnis, nicht den Klassennamen.

Bleiben Design-Tokens erhalten?

CSS Custom Properties (--brand-primary) bleiben als Rohwerte erhalten. Die Rückabbildung auf Figma-Designsystem-Tokens ist ein manueller Bereinigungsschritt - der Bericht markiert aber jeden unterschiedlichen Tokenwert, damit Sie systematisch mappen können.

Braucht das eine ganze Website oder kann es auch nur eine Komponente?

Beides. Sie können eine ganze Seite oder einen einzelnen Komponenten-Snippet einspeisen. Kleinere, fokussierte Eingaben erzeugen meist sauberere Ergebnisse.

Kann die API eine ganze Komponentenbibliothek verarbeiten?

Ja - sehen Sie sich die Visual Struct API für Batch-Endpunkte an.