Website zu Figma: Der vollständige Leitfaden für die Umwandlung von Live-Webseiten in editierbare Designs

Anleitung2026-04-25

Teams müssen oft Websites neu gestalten, deren ursprüngliche Designquelle fehlt, veraltet ist oder nie existiert hat. Die Produktionsseite ist häufig die einzige verlässliche Version der UI, und sie manuell in Figma nachzuzeichnen kostet pro Screen Tage.

Website-to-Figma löst dieses Problem. Sie geben Codia AI eine Live-URL (oder fügen HTML/CSS ein) und erhalten eine editierbare Figma-Datei - Frames, Textebenen, Komponenten, Design-Tokens. Designer können eine Produktionsseite prüfen, neu gestalten, dokumentieren oder ein Designsystem daraus extrahieren, statt alles von Grund auf neu aufzubauen.

Passendes Codia-Produkt: Codia HTML to Figma.

Dieser Leitfaden behandelt alles: wann Sie Website-to-Figma statt Screenshot-to-Figma oder HTML-to-Figma nutzen sollten, Tipps je Szenario für Landing Pages / SaaS-Apps / E-Commerce / Marketing-Seiten, Vorbereitungen für den Capture und die Nachbearbeitung.

Wann Website-to-Figma sinnvoll ist

Greifen Sie zu diesem Workflow, wenn:

Die ursprüngliche Figma-Datei fehlt oder ist veraltet, und die Produktion ist die Quelle der Wahrheit.
Sie mit einem Redesign starten und eine editierbare Basis der aktuellen Seite brauchen.
Sie die Abweichung zwischen Figma-Quelle und Produktions-Drift prüfen.
Sie Wettbewerbsrecherche machen und editierbare Referenzen statt Screenshots benötigen.
Sie eine Live-Produkt-UI wieder in Figma dokumentieren, um an einem Designsystem zu arbeiten.
Sie ein Designsystem aus bestehenden Seiten extrahieren.
Sie eine Marketing-Seite übernommen haben und sie in Design-Operations kontrollieren möchten.

Website-to-Figma vs Screenshot-to-Figma vs HTML-to-Figma

Die drei Workflows haben überlappende Ziele, aber unterschiedliche Eingaben und Kompromisse:

Workflow	Eingabe	Am besten für
Website to Figma	Live-URL	Die Seite ist im Browser erreichbar. Sie möchten Layout-Hinweise auf Quellniveau (berechnetes CSS, echte Schriftnamen).
Screenshot to Figma	PNG/JPG	Sie haben keinen Zugriff auf die Live-Seite (hinter Paywall, intern, gelöscht oder nur als Bild vorhanden).
HTML to Figma	Rohes HTML/CSS	Sie haben den Quellcode und möchten maximale Treue. Häufig in entwicklergetriebenen Workflows.

In der Praxis verwenden die meisten Teams eine Mischung: Live-URLs für aktuelle oder konkurrierende Seiten, Screenshots für Inspirationsboards und nicht erreichbare Referenzen, rohes HTML für engineering-getriebene Konvertierungen.

Workflow

URL und Viewport wählen. Entscheiden Sie, ob Sie Desktop, Tablet oder Mobile erfassen - nehmen Sie jeden Breakpoint separat auf, wenn Sie responsive Abdeckung brauchen.
Seite vorbereiten. Cookie-Banner schließen, Popups und Chat-Widgets schließen, falls nötig ein- oder ausloggen und auf Fonts sowie lazy geladene Bilder warten.
Wichtige Zustände separat erfassen. Eine konvertierte Seite zeigt nur, was sichtbar war. Erfassen Sie Navigation offen, Modal offen, Empty State, Pricing-Toggle, Hover-Card, Mobile-Menü und eingeloggten Zustand als separate Jobs.
Umwandlung ausführen. Codia AI analysiert Layout, Typografie, Farben, Icons, Bilder und Komponentenstruktur.
Ergebnis in Figma öffnen. Jeder erfasste Viewport wird zu einem eigenen Frame.
Prüfen (siehe Checkliste unten).
Wiederkehrende Abschnitte komponentisieren - Navs, Hero, Feature Cards, Footer, CTA-Blöcke.

Tipps je Szenario

Marketing-Landing-Pages

Konvertieren Sie lange Seiten abschnittsweise (Hero, Features, Social Proof, Pricing, FAQ, Footer). So erhalten Sie pro Abschnitt eine sauberere Auto-Layout-Struktur als mit einem einzigen riesigen Capture.
Hero-Illustrationen und dekorative Verläufe kommen oft als Rastergrafik an - ersetzen Sie sie durch Ihre Vektor- oder Design-System-Assets, wenn sie editierbar bleiben sollen.
Pricing-Tabellen profitieren von einem fokussierten Capture: Scrollen Sie zur Tabelle und konvertieren Sie nur diesen Abschnitt.
Für A/B-Test-Varianten konvertieren Sie jede Variante separat und legen sie in Figma nebeneinander.

SaaS-App-Screens

Echte Produktscreens enthalten oft personalisierte oder sensible Daten - verwenden Sie ein Demo-Konto oder einen Empty State für den Capture.
Sidebars, Top-Navigation und Modals wiederholen sich über Screens hinweg. Konvertieren Sie einen Screen, komponentisieren Sie den Chrome und konvertieren Sie dann weitere Screens mit denselben Komponenten.
Empty States, Fehlerzustände und Ladezustände fehlen in der Figma-Quelle oft und sollten gezielt erfasst werden.
Für dichte Datengitter und Tabellen siehe die Dashboard-Tipps in Screenshot to Figma.

E-Commerce-Seiten

Produktgalerien erscheinen als Bildplatzhalter - tauschen Sie sie gegen echte Produktfotos.
Variantenwähler, Größenfelder und Mengen-Steppers sind gute Kandidaten für Komponenten.
Konvertieren Sie PDP, Warenkorb und Checkout zusammen, damit das Designsystem den gesamten Kaufprozess widerspiegelt.

Wettbewerbsrecherche

Konvertieren Sie Konkurrenz-Landing-Pages in editierbare Figma-Referenzen, damit Ihr Team Struktur, Copy, Layout und visuelle Hierarchie analysieren kann - nicht nur flache Screenshots.
Gruppieren Sie mehrere konkurrierende Captures in einer Figma-Datei für den direkten Vergleich.
Nutzen Sie die Captures als Inspiration und Analyse, nicht als 1:1-Kopien. Arbeiten Sie sie vor der Veröffentlichung immer in Ihre eigene Marke um.

Produktions-UI wieder in Figma dokumentieren

Konvertieren Sie alle stark frequentierten Seiten des Produktionsprodukts Seite für Seite.
Ordnen Sie wiederhergestellte Farben und Typografiestile beim Import Ihrer Figma-Bibliothek zu; der Bericht markiert alle Farben/Stile, die nicht zum System passen.
Das ist die Grundlage, um die Drift zwischen "Figma-Quelle und Produktion" zu schließen.

Was nach der Umwandlung zu bereinigen ist

Behandeln Sie den Import als starken editierbaren Entwurf. Gehen Sie diese Punkte durch:

Schriften. Webfonts werden beim ersten Öffnen in Figma ersetzt. Ordnen Sie sie Ihren Designsystem-Schriften zu.
Textstile. Ersetzen Sie ad-hoc-Typografie durch Ihre Designsystem-Tokens.
Icons. Ersetzen Sie Raster-Icons durch passende SVG-Assets aus Ihrer Bibliothek.
Hintergrundbilder. Korrigieren Sie Zuschnitte; ersetzen Sie dekorative Hintergründe bei Bedarf durch Design-System-Assets.
Wiederkehrende Abschnitte. Gruppieren Sie Karten, Navigationselemente, Buttons und Footer in Figma-Komponenten.
Responsive Constraints. Bauen Sie Auto Layout für Frames neu auf, die über Breakpoints skalieren sollen.
Drittanbieter-Widgets. Chat-Bubbles, Cookie-Banner und Analytics-Overlays gehören nicht in Ihr Designsystem - entfernen Sie sie.
Farb-Tokens. Ordnen Sie wiederhergestellte Farben Ihren Designsystem-Farb-Tokens zu.

Häufige Stolperfallen

Den falschen Viewport erfassen. Ein 1440px-Capture sagt nichts darüber aus, wie die Seite bei 375px aussieht. Erfassen Sie jeden Breakpoint, der für Sie relevant ist.

Overlays nicht schließen. Cookie-Banner, Chat-Widgets und Hotjar-Umfragen werden sonst mit erfasst und erzeugen Nacharbeit. Schließen Sie sie vorher.

Personalisierte Zustände aufnehmen. Echte Nutzerdaten, Namen, interne Tools - loggen Sie sich aus oder nutzen Sie ein Demo-Konto vor dem Capture.

Einen einzigen langen Scroll-Capture. Lange Seiten konvertieren besser, wenn sie abschnittsweise aufgenommen werden.

Interaktive Zustände überspringen. Menüs, Modals, Hover-Cards und Empty States sind nicht im Standard-Capture enthalten. Erfassen Sie sie als separate Jobs.

Konvertierung mit Design verwechseln. Das Ergebnis ist eine Basis. Die eigentliche Designarbeit passiert in der Nachbearbeitung, Komponentenbildung und den Redesign-Entscheidungen danach.

API und Batch-Konvertierung

Für einmalige Designarbeit reichen Plugin und Web-App. Für Teams, die ganze Seitensammlungen konvertieren - eine Agentur, die 200 Kundenseiten neu aufbaut, ein internes Team, das eine ganze Produktfläche dokumentiert, oder Design Ops, die einen Marken-Audit über mehrere Märkte durchführen - akzeptiert die Visual Struct API URLs, erfasst Seiten und gibt strukturiertes JSON zurück, das Ihre Werkzeuge in Figma umwandeln oder in nachgelagerte Design-Pipelines einspeisen können.

Batch-Endpunkte verarbeiten große URL-Mengen mit Webhook-Callbacks, sobald die Verarbeitung abgeschlossen ist.

FAQ

Kann jede Website in Figma umgewandelt werden?

Die meisten sichtbaren Webseiten lassen sich zu nützlichen, editierbaren Entwürfen machen. Hochdynamische Apps, canvas-lastige Seiten (3D, WebGL) und personalisierte Bildschirme brauchen eventuell mehr Nacharbeit. Seiten, die automatisierte Erfassung blockieren, benötigen stattdessen einen Screenshot-basierten Workflow.

Werden responsive Layouts erfasst?

Erfasst wird der von Ihnen angegebene Viewport. Nehmen Sie Desktop, Tablet und Mobile separat auf, wenn Sie responsive Abdeckung brauchen.

Werden interaktive Zustände erfasst?

Nur der sichtbare Zustand. Menüs, Modals, Hover-Cards und Empty States sollten als separate Jobs erfasst werden.

Enthält die konvertierte Datei echten Code?

Nein - Figma ist ein Designwerkzeug, keine Codequelle. Wenn Sie von einer Website zum Code wollen, können Sie Website → Figma → Figma to Code machen oder direkt einen Screenshot mit Screenshot to Code verwenden.

Ist das für Wettbewerbsrecherche nützlich?

Ja. Editierbare Referenzen in Figma sind für Analyse und Redesign-Planung viel nützlicher als flache Screenshots - aber behandeln Sie sie immer als Inspiration, nicht als 1:1-Kopie.

Wie sieht es mit auth-geschützten Seiten aus?

Nutzen Sie eine eingeloggte Browser-Session oder ein temporäres Demo-Konto. Sensible Kundendaten sollten niemals in den Capture-Eingaben enthalten sein.

Kann die Konvertierung eine ganze Website auf einmal verarbeiten?

Für Solo-Designarbeit erfassen Sie Seite für Seite. Für Full-Site-Captures (Dutzende oder Hunderte Seiten) verwenden Sie die Visual Struct API mit Batch-Endpunkten.