Eine Seite hinter einem Login für den Figma-Import erfassen

Um eine Seite hinter einem Login zu importieren, melde dich selbst an, speichere die Seite aus diesem Browser als Datei und ziehe die Datei in das Plugin. Gib dem Plugin keine URL in der Hoffnung, dass es sich anmelden kann. Ein Safari Web Archive oder eine eigenständige HTML-Datei enthält die Seite genau so, wie dein Browser sie gerendert hat. Der Import muss also nichts authentifizieren.

Diese Anleitung richtet sich an Designer und Entwickler, die ein Dashboard, einen Admin-Bereich oder einen Staging-Build haben, aber keine Designdatei dazu. Sie behandelt Seiten, die du ansehen darfst, etwa dein eigenes Produkt, die Staging-App eines Kunden oder ein Konto, das du bezahlst. Sie ist kein Weg an einer Login-Sperre vorbei, und nichts hier hilft dabei.

Voraussetzung: ein Konto, das die Seite bereits sehen kann, und entweder Safari auf einem Mac oder eine Möglichkeit, eigenständiges HTML aus deinem Browser zu speichern.

Warum ein URL-Import die Seite nicht sehen kann

Eine frische Anfrage an eine URL mit Anmeldung enthält keine Cookies. Der Server antwortet deshalb mit der Login-Seite oder einer Weiterleitung. Ein Werkzeug, das von dieser Anfrage ausgeht, würde die Login-Seite umwandeln. Das wolltest du nicht.

Die dokumentierte Capture-CLI von UnHTML nimmt eine URL und eine Ausgabe-Option entgegen und nutzt einen echten Headless-Browser, der Assets ohne CORS-Beschränkungen und mit Scrollen über die ganze Seite lädt. Die veröffentlichte Dokumentation erwähnt weder Cookies noch Header noch Anmeldestatus. Deshalb geht dieser Artikel nicht davon aus, dass die CLI oder das Bookmarklet eine Sitzung mitführen können, und du solltest das auch nicht tun. Der verlässliche Weg ist der, bei dem dein eigener Browser die Anmeldung übernimmt.

Ein lokaler Dev-Server ist ein verwandter Fall mit eigenen Schritten. Wenn das deine Situation ist, lies eine Next.js-App von localhost importieren.

Speichere die Seite aus deinem eigenen angemeldeten Safari

Das Web-Archive-Format von Safari speichert eine vollständige Seite samt verlinkter Bilder, CSS und JavaScript in einer Datei, wie Wikipedia beschreibt. Da du es aus dem bereits geöffneten Tab speicherst, enthält die Datei, was dieser Tab angezeigt hat. Eine ausführlichere Anleitung findest du unter eine Seite als Safari Web Archive speichern.

Die Schritte am Mac

1. Melde dich an und öffne die Seite in Safari.
2. Warte, bis sie vollständig geladen ist, auch Inhalte, die beim Scrollen nachladen. Scrolle einmal ganz nach unten.
3. Öffne das Menü Ablage und wähle Sichern unter.
4. Stelle das Format auf Web Archive. Die Formate Seitenquelltext und Webseite, nur HTML bündeln verlinkte Assets nicht auf dieselbe Weise.
5. Speichere die Datei und merke dir den Ablageort.

Was das Archiv enthält

Das Archiv besteht aus einer Hauptressource plus ihren Unterressourcen und den Archiven der Unterframes, sodass verschachtelte iframes ihre eigenen Assets behalten. Es ist ein Schnappschuss der Seite, wie sie beim Speichern gerendert war. Das ist beim Login der nützliche Teil: Der gespeicherte Inhalt hängt nicht mehr von deiner Sitzung ab.

Auf dem iPhone oder iPad

Safari unter iOS oder iPadOS 13 und neuer kann dasselbe Format speichern. Öffne die Seite, tippe auf das Teilen-Symbol, wähle In Dateien sichern und einen Ort, den du von einem Mac aus erreichst, etwa iCloud Drive. Kopiere die Datei auf deinen Mac, bevor du importierst.

Was du in Chrome tun kannst

Wenn Chrome dein Alltagsbrowser ist, nutze stattdessen einen Speichervorgang als eigenständiges HTML. Die Schritte stehen unter eigenständiges HTML aus Chrome exportieren. Eine eigenständige Datei bringt ihre Bilder, Stile und Schriften selbst mit, und genau das braucht das Plugin.

Du stößt vielleicht auch auf die Erweiterungs-API pageCapture von Chrome, die einen Tab als MHTML speichert. Sie richtet sich an Erweiterungsentwickler und ist kein Menüpunkt. Sie braucht die Berechtigung pageCapture im Manifest, und laut Dokumentation kann eine MHTML-Datei nur aus dem Dateisystem und nur im Hauptframe geladen werden. MHTML steht außerdem nicht in der Liste der Dateitypen, die das Plugin dokumentiert. Behandle es also als Experiment, nicht als Schritt dieses Ablaufs.

Bereite die Seite vor dem Speichern vor

Der Schnappschuss behält, was auf dem Bildschirm ist. Richte den Bildschirm also zuerst ein.

• Bring die App in den Zustand, den du gestalten willst. Öffne das Menü, klappe die Tabelle auf, wechsle den Tab. Ein geschlossenes Dropdown ist eine Ebene, die du nie bekommst.
• Ersetze echte Daten durch Testdaten. Nutze ein Testkonto oder Staging-Daten. Kundennamen, E-Mail-Adressen und Zahlen in einer gespeicherten Datei wandern mit ihr in deine Designdatei und überallhin, wo du sie teilst.
• Lass Animationen zu Ende laufen. Inhalte, die nach dem Laden weiter gerendert werden, können in einem gespeicherten Schnappschuss mitten im Rendern einfrieren oder Cross-Origin-Inhalte (CORS) ganz verlieren. Wenn ein Diagramm einläuft, warte vor dem Speichern, bis es fertig ist.
• Prüfe, ob du sie kopieren darfst. Sieh dir die für das Produkt geltenden Bedingungen an, bevor du dessen Bildschirme in eine Designdatei übernimmst.

Warum der Import auf deinem Rechner bleibt

Eine angemeldete Seite enthält oft Daten, die du nirgendwohin senden möchtest. Bei Datei-Importen wird nichts gesendet. Standard-Importe stellen null Netzwerkanfragen, und nichts verlässt deinen Rechner, laut der UnHTML-Website. Das Laden entfernter Assets und das Ausführen von Seiten-Skripten ist eine einzige Opt-in-Option, die ausgeschaltet bleibt, bis du sie aktivierst. Ist sie an, laufen Skripte nur in einem isolierten Frame (Sandbox), und das Markup wird vorher bereinigt: Skripte, Inline-Event-Handler und javascript:-URLs werden entfernt.

Deshalb passt dieser Ablauf zu einer Seite hinter einem Login. Die Sitzung gelangt nie zu einem Dritten, und die gespeicherte Datei ist die einzige Eingabe.

Was du nach dem Import prüfen solltest

Ein Import ist originalgetreu, nicht pixelgenau, und der Importbericht zeigt dir, wo er auf einen Ersatz zurückgefallen ist. Stand 2026 treten bei App-Oberflächen drei Dinge am häufigsten auf:

• Schriften. Jede Schrift, die lokal nicht installiert ist, wird ersetzt, standardmäßig durch Inter, und jeder Austausch steht im Bericht. Produkt-Oberflächen nutzen oft eine lizenzierte Schrift, rechne also mit Ersetzungen.
• Ebenen. Der kostenlose Tarif begrenzt einen Import auf 500 Ebenen und fällt danach auf absolute Positionierung zurück. Eine dichte Datentabelle kann die Grenze schnell erreichen.
• Raster. Komplexe CSS-Grids, die sich nicht auf auto layout abbilden lassen, fallen auf absolute Positionierung zurück.

Links in der gespeicherten Seite funktionieren nur, solange ihre Zielseiten online bleiben, und diese Ziele können erneut eine Anmeldung verlangen.

Fazit

Melde dich selbst an, speichere einen Schnappschuss der Seite, die du verwenden darfst, und importiere die Datei lokal. Der Login bleibt in deinem Browser, die Daten bleiben auf deinem Rechner, und der Import bekommt eine feste Seite zum Umwandeln. Beginne mit einem Testkonto, warte, bis sich die Seite beruhigt hat, und lies den Importbericht, bevor du dem Ergebnis traust.