Website to Figma: Ganze Websites in Figma importieren, nicht nur die Startseite

Es gibt drei Wege, viele Seiten einer Website nach Figma zu bringen, und sie lassen sich gut kombinieren.

Mehrere Links

Füge bis zu 10 URLs in den Tab Multiple ein. Das Plugin verarbeitet sie nacheinander und legt jede Seite in eine eigene Reihe – die Desktop-, Tablet- und Mobile-Aufnahme einer Seite liegen zusammen, und die Seiten stapeln sich untereinander.

Import linked pages

Nach einem Import kann das Plugin weitere Seiten derselben Website auflisten, die von ihr aus verlinkt sind. Wähle die gewünschten aus, und sie laufen als Multiple-Import. Ausgehend von der Startseite deckt das die Hauptnavigation meist in ein, zwei Runden ab.

Website-Ordner oder .zip

Hast du den statischen Build, zieh den Ordner in den Tab Local file oder lade eine .zip mit bis zu 30 MB hoch und wähle dann die HTML-Seiten aus. Dateien werden aus dem Arbeitsspeicher in einem isolierten Browser geöffnet und gelöscht, sobald der Import abgeschlossen ist.

Jede Seite zählt als ein Import, egal wie viele Screens. In Free hast du 10 Importe pro Monat; Pro und Team sind im Rahmen eines Fair-Use-Kontingents unbegrenzt. Details findest du auf der Preisseite.

Ein statisches Set von Frames ist nützlich, aber Kunden und Stakeholder verstehen eine Website schneller, wenn sie sich durchklicken können. HTML to Frames behält die vorhandene Navigation bei:

• Links zwischen importierten Seiten werden zu Navigate-Interaktionen – ein Klick auf „Preise“ im Startseiten-Frame führt zum Preis-Frame.
• Andere Links behalten eine Open-link-Aktion und öffnen sich im Browser.
• Fixierte und sticky Header bleiben beim Scrollen im Present-Modus stehen.
• Horizontale Scrollbereiche wie Karussells und Tab-Leisten scrollen seitwärts.

Bei Pro werden Elemente mit Hover-Look zu Komponenten-Sets mit Default- und Hover-Varianten und einer On-Hover-Interaktion – Buttons und Menüpunkte reagieren, wenn du darüberfährst.

So wird die importierte Website zu einer Ausgangsbasis, die du direkt präsentieren kannst. Geh die aktuelle Experience durch, markiere Probleme mit Kommentaren, dupliziere dann die Frames und starte das Redesign neben dem Original. Da jeder Frame seine Quell-URL speichert, kannst du jede Seite später neu importieren und die Live-Website mit dem Vorschlag vergleichen. Mehr zur Struktur der Seiten unter HTML to Frame.

Prototyp-Verbindungen entstehen nur zwischen Seiten, die Teil des Imports sind – wer mit Import linked pages Seiten ergänzt, erweitert also auch den klickbaren Flow.

Bei einer Designagentur fließt die erste Projektwoche oft in den Nachbau der bestehenden Kunden-Website, damit es überhaupt etwas zum Redesignen gibt. Ein Import nimmt den Großteil dieser Arbeit ab und hinterlässt dem Team eine bereits aufgeräumte Datei.

Ein typischer Ablauf sieht so aus:

1. Vor dem Pitch: Importiere die wichtigsten Templates des Kunden und aktiviere Styles & variables, um das tatsächlich genutzte Farb- und Typografiesystem zu sehen.
2. In der Discovery-Phase: Präsentiere dem Kunden den klickbaren Import und markiere Schwachstellen direkt auf den Frames.
3. Während des Redesigns: Dupliziere Frames und ändere sie direkt; aus wiederkehrenden Strukturen extrahierte Komponenten beschleunigen globale Änderungen.
4. Bei der Übergabe: Importiere geänderte Seiten neu, um zu bestätigen, was live gegangen ist.

Der Team-Plan bietet fünf Plätze auf einem gemeinsamen Lizenzschlüssel zum Einführungspreis von $22 pro Monat, mit bis zu vier Screens pro Import. Das passt zu einem kleinen Studio, in dem mehrere Designer parallel Kunden-Websites importieren.

Agenturen, die mit Kundenprojekten arbeiten, fragen meist auch nach Daten. Seiten werden in einem isolierten Browser gerendert, Ergebnisse einmal ausgeliefert und nie auf die Festplatte geschrieben. Das vollständige Bild findest du auf der Sicherheitsseite.