Website to Figma: Redesign-Angebote für Agenturen

Jedes Redesign beginnt mit derselben unspektakulären Aufgabe: die aktuelle Website des Kunden ins Designtool zu bekommen. Screenshots sind schnell, aber von Anfang an tot. Seiten von Hand nachzubauen ist genau, frisst aber Tage, die du lieber ins eigentliche Redesign stecken würdest.

Dieser Leitfaden zeigt, wie du eine Website in Figma als echte, bearbeitbare Ebenen bringst – mit HTML to Frames – und wie aus diesem Import ein Redesign-Angebot wird, das dein Kunde auf einen Blick versteht. Er richtet sich an Agenturen und freiberufliche Designer, aber der Workflow funktioniert genauso gut für Inhouse-Teams, die ihre eigene Produkt-Website auditieren.

Warum die aktuelle Website überhaupt nach Figma holen?

Ein Redesign-Angebot ist eine Argumentation. Du sagst dem Kunden: „Das hast du, so sollte es sein, und deshalb.“ Diese Argumentation ist viel stärker, wenn der Teil „das hast du“ exakt und bearbeitbar ist.

• Du auditierst das Original. Abstände, Typo-Skala, Farbnutzung und Komponenten-Drift sind im Ebenen-Panel sichtbar, nicht aus einem Screenshot geraten.
• Du redesignst auf der bestehenden Struktur. Ändere einen Hero, tausche einen Kartenstil, überarbeite die Navigation – der Rest der Seite bleibt als Kontext erhalten.
• Du zeigst Vorher und Nachher nebeneinander. Gleiche Frame-Größe, gleicher Inhalt, anderes Design. Kunden verstehen es sofort.
• Du sparst die Nachbauzeit. Die Stunden, die du mit dem Nachzeichnen der aktuellen Website verbringen würdest, fließen ins Erkunden von Optionen.

HTML to Frames wandelt eine Seite in echte Figma-Frames, Texte, Vektoren und Bilder um, nicht in ein flaches Bild. Hintergründe zu diesem Unterschied liest du in HTML to Canvas vs. bearbeitbare Ebenen.

Website to Figma vs. URL to Figma: Was ist der Unterschied?

Beides wird gesucht, und in der Praxis ist derselbe Workflow gemeint. URL to Figma beschreibt meist die Mechanik: einen Link einfügen, ein Design erhalten. Website to Figma beschreibt den Umfang: mehrere Seiten einer Website, oft über mehrere Bildschirmgrößen. HTML to Frames deckt beides ab – vom einzelnen URL-to-Figma-Import bis zur kompletten Website-to-Figma-Aufnahme mit verlinkten Seiten.

Schritt 1: Planen, welche Seiten erfasst werden

Bevor du Figma öffnest, liste die Seiten auf, die die Redesign-Geschichte tragen. Bei den meisten Marketing-Websites sind das:

1. Startseite
2. Eine zentrale Landing- oder Produktseite
3. Preise
4. Über uns oder Team
5. Blog-Übersicht und ein Artikel
6. Kontakt oder eine wichtige Formularseite

Die komplette Sitemap brauchst du selten. Du brauchst eine Seite pro Template, denn Templates sind das, was du redesignst. Sechs bis zehn Seiten reichen meist – das passt genau in einen Multiple-Import.

Schritt 2: Mehrere Seiten auf einmal importieren

Öffne das Plugin und nutze die Quelle Multiple. Füge bis zu 10 Links ein; sie werden nacheinander verarbeitet, und jede Seite wird zu einer Reihe auf dem Canvas. Multiple-Import ist in jedem Plan verfügbar, auch in Free.

Für Agenturarbeit sind ein paar Details wichtig:

• Eine Website = eine Breite. Desktop nutzt die Site width: Das Plugin misst beim Import die echte Designbreite der Seite. Full-Bleed-Designs kommen in 1920 mit zentrierter Inhaltsbox an, geboxte Websites in ihrer Containerbreite (zum Beispiel 1200, 1280 oder 1440), fluide Websites in 1440. Bei einem Mehrseiten-Import teilen sich alle Seiten der Website diese Breite, damit deine Reihen bündig stehen.
• Frame-Namen sind lesbar. Frames heißen etwa domain/path — Desktop (1920), ohne Protokoll oder www, sodass du Seiten im Ebenen-Panel auseinanderhalten kannst.
• Cookie-Banner und Pop-ups lassen sich ausblenden, und Animationen werden für einen sauberen Frame eingefroren. Die Website wird so erfasst, wie normale Besucher sie sehen.

Verlinkte Seiten importieren, statt URLs zu suchen

Hast du noch keine Seitenliste, importiere zuerst die Startseite. Nutze nach dem Import Import linked pages: Wähle weitere Seiten derselben Website aus einer Liste, und sie werden als Multiple-Import importiert. Das ist der schnellste Weg, die Hauptziele der Navigation zu erfassen, ohne URLs aus dem Browser zu kopieren.

Schritt 3: Das Responsive set erfassen

Kunden fragen immer öfter zuerst: „Wie sieht das auf meinem Handy aus?“ Beantworte das mit echten Frames.

Aktiviere das Responsive set, um Desktop + Tablet + Mobile mit einem Klick zu erfassen. Tablet ist 768, Mobile 390, und es gibt außerdem Laptop mit 1280. Bei Pro und Team kannst du bis zu 4 Screens pro Import erfassen und eine Custom width setzen, wenn die Analytics des Kunden einen ungewöhnlichen Breakpoint zeigen. Die Screens einer Seite werden parallel erfasst.

Die Abrechnung bleibt einfach: 1 Import = 1 Seite mit all ihren Screens. Desktop, Tablet und Mobile der Startseite zählen als ein einziger Import.

Schritt 4: Light + Dark ergänzen, wenn die Website es unterstützt

Reagiert die Website des Kunden auf prefers-color-scheme, erfasst die Option Light + Dark (Pro) die Seite in beiden Modi. Du bekommst eine Variablensammlung mit Light- und Dark-Modus plus eine dunkle Kopie jedes Screens. Das ist ein starker Ausgangspunkt, wenn Dark Mode Teil des Redesign-Briefings ist, und zeigt dir sofort, welche Komponenten nie für dunkle Hintergründe gestaltet wurden.

Beachte, dass Figma-Free-Dateien nur einen Modus pro Sammlung erlauben – in einer Free-Datei wird der Dark Mode daher mit einem Hinweis übersprungen.

Schritt 5: Aus dem Import ein Audit machen

Jetzt wird der Import zur Arbeitsdatei. Bevor du irgendetwas redesignst, nimm dir eine Stunde fürs Audit.

Das bereits vorhandene Designsystem lesen

Mit Styles & variables (Pro) erstellt das Plugin Farbvariablen aus Farben, die zwei- oder mehrmals vorkommen, und aus den CSS Custom Properties der Website – aus --brand-primary wird brand/primary. Außerdem bekommst du Textstile und Schatten-Styles. Importierst du dieselbe Website zweimal, entsteht nichts Neues, weil bestehende Variablen und Styles bei passenden Werten wiederverwendet werden.

Diese Sammlung ist eine ehrliche Bestandsaufnahme. Dreißig fast identische Grautöne oder elf Fließtextgrößen erzählen in deinem Angebot ihre eigene Geschichte.

Wiederkehrende Komponenten erkennen

Mit Components & hover states (Pro) werden wiederkehrende Strukturen wie Karten, Buttons und Menüpunkte zu Komponenten und Instanzen, und Elemente mit Hover-Look werden zu Komponenten-Sets mit Default- und Hover-Varianten. Die Hauptkomponenten landen in einem Frame „Components · site“. Für ein Audit ist dieser Frame eine fertige Bestandsliste dessen, was die aktuelle Website tatsächlich nutzt.

Die Layoutstruktur prüfen

Die meisten Frames kommen mit Auto Layout an, sodass du skalieren und umstellen kannst. Das Plugin baut die Seite zuerst pixelgenau auf, leitet dann Stapel, Abstände, Padding und Ausrichtung ab und verifiziert die Position jedes Kindelements, bevor es das Ergebnis behält. Lässt sich ein Frame nicht sauber ausdrücken, behält er absolute Positionen mit sinnvollen Constraints, und der Ergebnisbildschirm sagt dir, warum. Den vollständigen Mechanismus erklärt Auto Layout erklärt.

Eine Referenzebene behalten

Aktiviere Reference screenshot, um eine versteckte, gesperrte Ebene hinzuzufügen, die du zum Vergleich von Import und Live-Seite einblenden kannst. Praktisch, wenn ein Kunde fragt: „Ist das wirklich, was wir heute haben?“

Schritt 6: Das Redesign-Angebot aufbauen

Mit einem exakten, bearbeitbaren „Vorher“ setzt sich das Angebot fast von selbst zusammen.

Duplizieren, dann redesignen

Dupliziere jede importierte Reihe. Behalte das Original als Vorher, beschrifte die Kopie mit Nachher und redesigne auf der Kopie. Da der Inhalt echter Text und echte Bilder ist, redesignst du mit den eigenen Texten und Fotos des Kunden, nicht mit Lorem ipsum.

Vorher/Nachher-Boards präsentieren

Platziere Vorher- und Nachher-Frames in gleicher Breite nebeneinander. Ergänze für jedes Template zwei oder drei Anmerkungen, die die Änderung erklären: klarere Hierarchie, kürzere Formulare, besserer Kontrast, zusammengeführte Komponenten.

Den Flow prototypen

Links zwischen importierten Seiten werden zu Navigate-Interaktionen, und fixierte oder sticky Header funktionieren im Present-Modus weiter. So kannst du dich im selben Prototyp erst durch die aktuelle Website und dann durch das Angebot klicken – ein überzeugender Walkthrough im Call.

Vorher und nachher: Was sich in deinem Workflow ändert

Team-Plan und Lizenzierung für Agenturen

In Agenturen arbeitet meist mehr als ein Designer an einem Redesign. So passen die Pläne dazu:

• Free: $0, 10 Importe pro Monat, 1 Screen pro Import, Multiple-Import mit 10 Links. Gut, um den Workflow an einer kleinen Website auszuprobieren.
• Pro: $7 pro Monat zum Start (regulär $9), unbegrenzte Importe im Rahmen von Fair Use, bis zu 4 Screens pro Import, dazu Styles und Variablen, Snap, Komponenten und Hover, Light + Dark, Custom width, Detailed layers, Reference screenshot und Extra wait. Gekauft über Figmas eigenen Checkout.
• Team: $22 pro Monat zum Start (regulär $29), dieselben Funktionen wie Pro, 5 Plätze über einen gemeinsamen Lizenzschlüssel.

Für eine Agentur mit ein paar Redesigns im Monat hält Team alle auf demselben Funktionsumfang, ohne dass jeder Designer einzeln kauft. Details auf der Preisseite.

Beispiel-Zeitplan: ein zweiwöchiger Redesign-Sprint

So kann ein typischer Sprint aussehen, wenn das Plugin den Import übernimmt. Passe ihn an deinen Prozess an.

Der Importschritt, der früher ein, zwei Tage Nachbau kostete, schrumpft auf den ersten Vormittag.

Tipps, die bei Kunden-Websites Zeit sparen

• Nutze Extra wait (Pro) bei Websites, die Inhalte spät laden, etwa Slider oder Lazy-Abschnitte.
• Wähle die Seitensprache (Page language) bei mehrsprachigen Websites; das Plugin unterstützt 15 Sprachen.
• Kläre zuerst die Schriften. Der Bildschirm Missing fonts schlägt vor dem Aufbau Ersatzschriften vor und merkt sich deine Wahl pro Website.
• Importiere per Klick neu (Re-import), wenn der Kunde mitten im Projekt eine Änderung ausliefert. Die Quell-URL ist am Frame gespeichert.
• Achte auf eingebettete Inhalte. Karten, Videos ohne Poster und WebGL-Canvases kommen als Screenshot-Bild des jeweiligen Bereichs an, da sie keine Ebenen sein können.
• Seiten mit Login brauchen den Browser-Weg. Für Kundenportale oder Dashboards hinter einem Login nutze die Chrome-Erweiterung; siehe unseren Leitfaden zu localhost und Seiten mit Login.

Kundendaten und Datenschutz

Agenturen werden oft gefragt, wie Kundenmaterial behandelt wird. Seiten werden in einem isolierten Sandbox-Browser gerendert, einmal ausgeliefert, dann aus dem Arbeitsspeicher gelöscht und nie auf die Festplatte geschrieben. Das Plugin liest den Inhalt deiner Figma-Datei nicht; es schreibt nur Ebenen. Die Sicherheitsseite enthält die Details, die du an einen Kunden weiterleiten kannst.

Fazit

Die Website eines Kunden als bearbeitbare Ebenen in Figma zu bringen, macht aus dem ersten, mühsamsten Schritt eines Redesigns einen kurzen Import. Du bekommst ein exaktes „Vorher“, ein Audit aus dem echten CSS der Website und eine Datei, in der das Angebot ganz natürlich neben dem Original wächst. Starte mit einem Template, prüfe das Ergebnis und hol dann mit Multiple und Import linked pages den Rest der Website dazu.

Bereit zum Ausprobieren? Sieh dir alle Funktionen an, lies die Doku oder hol dir das Plugin und starte deinen ersten Import.