Eine Seite hinter dem Login nach Figma importieren

Die Seite, die du in Figma brauchst, ist meist die, auf die du keinen Link setzen kannst. Warum das Einfügen der URL ein Anmeldeformular zurückgibt, und was du an den Werkzeugen prüfen solltest, die daran vorbeikommen.

Die Seite, die du wirklich in Figma brauchst, ist meist die, auf die du keinen Link setzen kannst. Ein internes Admin-Tool. Ein Dashboard, das sich erst nach dem Anmelden mit Daten füllt. Ein Staging-Build, der noch nicht öffentlich ist. Du fügst die URL in einen Konverter ein und bekommst den Login-Bildschirm zurück, denn genau den hat er gesehen.

Es gibt einen Weg daran vorbei, und er ist kein Trick, sondern eine andere Architektur. Dieser Text erklärt, warum URL-basierte Umwandlung hier scheitert, was die Alternativen tatsächlich tun, und was du prüfen solltest, bevor du eine private Seite durch irgendeines dieser Werkzeuge schickst.

Warum das Einfügen einer URL nicht funktionieren kann

Wenn ein Werkzeug nach einer URL fragt, öffnet etwas auf der Seite des Werkzeugs diese URL. Ein Server, oder ein Headless-Browser auf einem Server. Diese Maschine hat ihre eigene Netzwerkposition und ihren eigenen leeren Cookie-Speicher. Sie ist nicht du.

Also kommt sie als anonyme Besucherin an deinem Dashboard an und bekommt genau das, was anonyme Besucher bekommen: ein Anmeldeformular. Wiederholen ändert nichts, denn was fehlt, ist deine Session, und die liegt in deinem Browser.

Deshalb ist dieses Scheitern auch so verlässlich. Es ist kein Fehler, den jemand beheben könnte — ein Server kann eine Seite nicht sehen, die verlangt, dass man du ist.

Umgehungen, die nicht funktionieren

• Das Session-Cookie ins Werkzeug einfügen. Manche Werkzeuge akzeptieren Header. Abgesehen davon, wie unangenehm es ist, ein Session-Token an Dritte zu geben: Moderne Authentifizierung ist meist kurzlebig und nicht nur an ein Cookie gebunden, also scheitert es ohnehin oft.
• Die Seite kurz öffentlich machen. Bei Staging gelegentlich möglich. Bei echten Systemen selten, und es ändert, was die Seite überhaupt rendert.
• Screenshot machen und nachbauen. Ergibt ein Bild. Der ganze Grund für den Import nach Figma sind bearbeitbare Ebenen, und die hat ein Screenshot nicht.

Was funktioniert: im Browser aufnehmen, in dem du ohnehin schon bist

Passiert die Umwandlung in deinem eigenen Tab, verschwindet das Session-Problem — nicht weil es gelöst wurde, sondern weil es nie auftrat. Die Seite ist bereits vor dir gerendert, angemeldet, mit geladenen Daten und mit den Menüs in dem Zustand, in dem du sie gelassen hast. Ein Konverter, der dort läuft, liest, was du siehst.

Das ist der Ansatz hinter Importern auf Basis von Browser-Erweiterungen, und mehrere Werkzeuge bieten inzwischen eine an. Sagen wir es deutlich: Eine angemeldete Seite aufzunehmen ist kein Alleinstellungsmerkmal. html.to.design liefert eine Erweiterung für Seiten hinter Login oder VPN. Andere ebenfalls. Liest du irgendwo, jemand könne das als Einziger, dann prüf das nach.

Was sich zwischen ihnen unterscheidet, ist, was mit der Aufnahme danach passiert.

Die Frage, die stattdessen zählt: Wohin geht die Aufnahme?

Sobald dein Browser die Seite gelesen hat, müssen die Daten nach Figma. Es gibt zwei Wege, und dieser Unterschied wiegt schwerer als der Aufnahmeschritt.

Über einen Server. Die Erweiterung lädt die Aufnahme hoch, das Figma-Plugin lädt sie herunter. Bequem, und es bedeutet, dass der Inhalt einer privaten Seite — die Texte, die Kundennamen, die Zahlen im Dashboard — durch Infrastruktur läuft, die du nicht kontrollierst. Werkzeuge dieser Bauart bieten in der Regel auch eine Datei-Option an, bei der du die Aufnahme herunterlädst und dem Plugin selbst übergibst. Diese Option ist meist nicht die Voreinstellung, und du musst von ihr wissen, um sie zu wählen.

Nie über einen Server. Die Aufnahme geht in deine Zwischenablage oder auf deine Festplatte, und das Figma-Plugin liest sie von dort. Nichts wird hochgeladen, weil es nirgendwo hinzuladen gibt.

Wenn du eine Seite unter NDA aufnimmst, eine mit Kundendaten, oder irgendetwas aus einer regulierten Umgebung, dann ist das die Unterscheidung, die deine Sicherheitsabteilung interessiert. Nicht „funktioniert es hinter einem Login" — das tut in dieser Kategorie alles — sondern „verlässt der Inhalt den Rechner, und kann ich das überprüfen".

Wie du es überprüfst, statt es zu glauben

Zwei Prüfungen, beide schnell.

Das Manifest des Figma-Plugins lesen

Jedes Figma-Plugin deklariert seinen Netzwerkzugriff im Manifest, und Figma setzt die Deklaration durch — ein Plugin, das keinen deklariert, kann keine Anfrage stellen, egal was sein Code versucht. Snapture Import deklariert:

"networkAccess": { "allowedDomains": ["none"] }

Das ist eine Fähigkeit, die das Plugin nicht hat, keine Richtlinie, die jemand einzuhalten verspricht. Du kannst das Manifest jedes installierten Plugins lesen.

Den Netzwerk-Tab beobachten

DevTools öffnen, auf Netzwerk wechseln, eine Aufnahme starten. Du siehst die Anfragen, die die Erweiterung stellt. Bei Snapture sind das die Bilder der Seite selbst, damit sie in deiner Datei landen, und eine Lizenzprüfung, falls du einen bezahlten Plan hast. Lädt ein Werkzeug den Seiteninhalt hoch, wird es hier sichtbar.

Was ankommt und was nicht

Die gerenderte Seite aufzunehmen heißt, du bekommst den Zustand, den du gerade ansiehst — inklusive Dingen, die ein URL-basiertes Werkzeug selbst auf einer öffentlichen Seite nicht erreichen könnte.

• Offene Menüs, Modals und Popover bleiben offen, weil die Aufnahme das DOM liest, wie es ist, statt neu zu laden.
• Daten, die erst nach dem Login existieren — Tabellenzeilen, Diagrammwerte, der eigene Name in der Ecke — kommen als echter Text an.
• Passwortfelder sollte das Werkzeug beim Aufnehmen maskieren. Snapture ersetzt den Wert durch Punkte, bevor etwas geschrieben wird; prüf, ob dein Werkzeug dasselbe tut, bevor du ein ausgefülltes Formular aufnimmst.

Was in keinem Werkzeug als Ebenen ankommt: WebGL-Canvases, Cross-Origin-iframes und Videobilder. Nichts kann daraus Vektoren machen, weil die Pixel nicht vom DOM beschrieben werden. Das vernünftige Verhalten ist ein scharfer Screenshot genau dieses Bereichs statt eines grauen Platzhalters, und genau das tut Snapture.

Ein praktischer Ablauf für ein internes Dashboard

1. Anmelden und die Seite in den gewünschten Zustand bringen, inklusive aller Panels oder Modals, die mit aufgenommen werden sollen.
2. Einmal bis nach unten und zurück scrollen. Dashboards laden Zeilen und Diagramme nach, und was nicht gerendert ist, kann nicht aufgenommen werden.
3. Die ganze Seite aufnehmen, oder einen Bereich ziehen, wenn nur ein Panel gebraucht wird.
4. In Figma einfügen. Werden Schriften ersetzt, installiere die, die die Seite verwendet hat, und importiere neu — eine ersetzte Schrift vermisst Text neu und verschiebt alles dahinter.

Ist das Dashboard sehr groß, nimm lieber den Abschnitt auf, den du brauchst, als die ganze Seite. Jedes Werkzeug hat ein Budget, und eine Bereichsaufnahme des Teils, den du wirklich willst, ist schneller und genauer als eine ganze Seite, die auf halbem Weg an ein Limit gestoßen ist.

Kurz gesagt

URL-basierte Konverter können nicht hinter einen Login sehen, und das ist strukturell, keine Lücke, die jemand schließen wird. Aufnahme per Browser-Erweiterung löst es, und mehrere Werkzeuge bieten das an. Die Frage, die sich lohnt, ist nicht, ob ein Werkzeug eine angemeldete Seite aufnehmen kann, sondern ob der Inhalt der Seite danach deinen Rechner verlässt — und das kannst du in etwa einer Minute selbst überprüfen.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia