Kostenlose Chrome-Erweiterung
Chrome Extension to Figma: Seiten mit Login und localhost in Figma
Erfasse, was dein eigener Browser anzeigt – inklusive Dashboards, lokaler Builds und geöffneter Menüs – und mach daraus bearbeitbare Figma-Ebenen.
- Funktioniert mit Logins, localhost und privaten Netzwerken
- Die ganze Seite oder ein einzelnes Element erfassen
- Kein Konto, kein Tracking, kein Remote-Code
Bald im Chrome Web Store
Eine Chrome-Erweiterung für Figma löst die Fälle, die ein URL-Import nicht erreicht. Der Capture-Service von HTML to Frames besucht Seiten als anonymer Besucher – er sieht also weder dein Admin-Dashboard noch die App hinter deinem Login, einen localhost-Build auf deinem Laptop oder einen Staging-Server in einem privaten Netzwerk. Die kostenlose HTML to Frames Chrome-Erweiterung erfasst stattdessen aus deinem eigenen Browser, mit der Sitzung, in der du bereits angemeldet bist.
Sie erfasst außerdem den aktuellen Zustand der Seite. Ist ein Dropdown geöffnet, ein Formular halb ausgefüllt, ein Modal sichtbar oder liegen drei Artikel im Warenkorb, landet genau das in Figma. Für Product Manager, die Flows dokumentieren, und Designer, die echte Zustände auditieren, ist das oft der einzig praktikable Weg, diese Screens in eine Designdatei zu bekommen, ohne sie nachzubauen.
Du kannst die ganze Seite erfassen oder zum Element-Picker wechseln, um eine einzelne Komponente zu greifen. Hover zum Hervorheben, mit den Pfeiltasten zum Eltern- oder Kindelement wechseln, Enter zum Erfassen und Esc zum Abbrechen. Die Aufnahme landet in deiner Zwischenablage oder in einer .h2f-Datei, und du fügst sie im Browser-Tab des Plugins ein. Oder du verbindest die Erweiterung einmalig per Einmalcode mit deinem Plugin und nutzt Send to Figma, das Aufnahmen direkt in das geöffnete Plugin liefert.
Die entstehenden Ebenen sind dieselben wie bei jedem anderen Import: bearbeitbarer Text, Vektoren, Bilder und verifiziertes Auto Layout. Eine Aufnahme zählt als ein Import.
Frontend-Entwickler finden eine komplette Anleitung unter localhost to Figma mit der Chrome-Erweiterung. Für öffentliche Seiten braucht URL to Figma gar keine Erweiterung, und die Sicherheitsseite erklärt genau, was die Erweiterung sendet.
Einen Tab mit der Erweiterung erfassen
- 01
Chrome-Erweiterung installieren
Füge die kostenlose HTML to Frames Erweiterung zu Chrome hinzu; sie braucht kein Konto.
- 02
Seite im gewünschten Zustand öffnen
Melde dich an, starte deinen lokalen Server, öffne das Menü oder fülle das Formular genau so aus, wie du es erfassen willst.
- 03
Seite oder Element erfassen
Nimm die ganze Seite oder hebe mit dem Picker ein einzelnes Element hervor und wähle es aus.
- 04
Einfügen oder an Figma senden
Füge die Aufnahme im Browser-Tab des Plugins ein oder nutze Send to Figma nach einmaliger Kopplung per Einmalcode.
Was die Erweiterung erreicht
Seiten mit Login
Dashboards, Admin-Panels und Kontoseiten, erfasst mit der Sitzung, die du bereits hast.
localhost und private Netzwerke
Lokale Dev-Server, Staging- und Intranet-Seiten, die ein externer Service nicht erreichen kann.
Exakte UI-Zustände
Geöffnete Menüs, ausgefüllte Formulare, Modals und Warenkörbe werden so erfasst, wie sie auf dem Bildschirm sind.
Element-Picker
Hover zum Hervorheben, Pfeil hoch oder runter zum Wechsel zwischen Eltern- und Kindelement, Enter zum Erfassen.
Send to Figma
Einmal per Einmalcode koppeln, und Aufnahmen gehen direkt in dein geöffnetes Plugin.
Privat von Grund auf
Kein Konto, kein Tracking, kein Remote-Code; es wird nichts gesendet, außer du nutzt Send to Figma.
localhost to Figma für Frontend-Entwickler
Entwickler müssen Designern oft zeigen, was tatsächlich gebaut wurde, oder einen gecodeten Prototyp für ein Review nach Figma bringen. Die üblichen Optionen sind Screenshots, die niemand bearbeiten kann, oder den Screen von Hand nachbauen. Die Erweiterung bietet eine dritte Option: localhost direkt erfassen.
Da sie in deinem eigenen Browser läuft, sieht die Erweiterung genau das, was dein Dev-Server rendert, inklusive:
- Feature-Branches, die noch nirgends deployt sind
- Seiten, die von lokalen Daten oder gemockten APIs abhängen
- Staging-Umgebungen in einem VPN oder privaten Netzwerk
- Komponenten-Playgrounds und isolierte Story-Seiten
Nutze den Element-Picker, um eine einzelne Komponente statt der ganzen Seite zu erfassen. Hebe sie hervor, drück die Pfeiltaste nach oben, um zu ihrem Container zu wechseln, wenn du das Padding brauchst, und drück Enter. Das Ergebnis ist ein Frame mit Auto Layout, abgeleitet aus dem gerenderten CSS – eine Flexbox-Zeile kommt also als horizontaler Auto-Layout-Frame mit ihren Abständen und ihrem Padding an.
So wird die Übergabe zur Zwei-Wege-Straße: Designer bekommen bearbeitbare Frames der echten Implementierung und können kommentieren oder anpassen, was ausgeliefert wurde. Der Leitfaden CSS Flexbox und Grid zu Auto Layout zeigt, wie Layouts übertragen werden.
Einfügen vs. Send to Figma
Es gibt zwei Wege, eine Aufnahme aus Chrome nach Figma zu bringen, und beide erzeugen dieselben Ebenen.
Einfügen
Nach einer Aufnahme liegt das Ergebnis in deiner Zwischenablage. Wechsle zu Figma, öffne HTML to Frames, geh in den Browser-Tab und füge ein. Wenn du magst, speichere die Aufnahme stattdessen als .h2f-Datei und hol sie später ins Plugin. Bei diesem Ablauf verlässt nichts deinen Computer.
Send to Figma
Verbinde die Erweiterung einmalig per Einmalcode mit deinem Plugin. Danach geht jede Aufnahme ohne Umweg über die Zwischenablage direkt in das geöffnete Plugin – schneller, wenn du mehrere Zustände hintereinander erfasst.
Mit Send to Figma wird die Aufnahme auf unserer Seite im Arbeitsspeicher gehalten, bis dein Plugin sie abholt, maximal 30 Minuten. Sie wird nicht auf die Festplatte geschrieben.
| Einfügen | Send to Figma | |
|---|---|---|
| Einrichtung | Keine | Einmaliger Kopplungscode |
| Daten verlassen deinen Computer | Nein | Bis zu 30 Minuten im Arbeitsspeicher |
| Ideal für | Gelegentliche Aufnahmen | Viele Zustände schnell erfassen |
So oder so zählt eine Aufnahme als ein Import in deinem Plan, und die Ebenen sind identisch.
Was die Erweiterung mit deinen Daten tut – und was nicht
Eine Erweiterung, die Seiten mit Login lesen kann, verdient einen kritischen Blick. Die HTML to Frames Chrome-Erweiterung ist darauf ausgelegt, so wenig wie möglich zu tun:
- Sie läuft in deinem Browser. Aufnahmen entstehen lokal aus der Seite, die du gerade ansiehst.
- Kein Konto. Du musst dich weder registrieren noch anmelden.
- Kein Tracking. Die Erweiterung erfasst keine Nutzungsdaten.
- Kein Remote-Code. Die Erweiterung lädt keinen Code von einem Server herunter und führt ihn aus.
- Standardmäßig wird nichts gesendet. Daten erreichen uns nur, wenn du Send to Figma wählst, und warten dann höchstens 30 Minuten im Arbeitsspeicher auf dein Plugin.
Die Aufnahme enthält nur, was auf der Seite ist, die du erfassen willst. Bevor du eine Seite mit personenbezogenen Daten oder Kundendaten erfasst, überleg, ob diese Daten in einer geteilten Figma-Datei landen sollten, und greif mit dem Element-Picker nur den Teil, den du brauchst.
Auf der Figma-Seite liest das Plugin den Inhalt deiner Datei nicht. Es schreibt die neuen Ebenen und liest nur die Metadaten seiner eigenen Frames. Die Sicherheitsseite beschreibt das vollständige Setup, und die Doku erklärt Installation und Kopplung. Die Erweiterung wird gerade für den Chrome Web Store vorbereitet.
Häufige Fragen
Der URL-Import lädt Seiten als anonymer Besucher über unseren Capture-Service – er erreicht also keine Seiten mit Login, kein localhost und keine privaten Netzwerke und sieht immer den Standardzustand. Die Erweiterung erfasst aus deinem eigenen Browser, mit deiner Sitzung und in dem Zustand, in dem die Seite gerade ist.
Ja. Wechsle zum Element-Picker, fahr mit der Maus über ein Element, um es hervorzuheben, wechsle mit Pfeil hoch zum Eltern- oder mit Pfeil runter zum Kindelement und drück Enter zum Erfassen. Esc bricht ab. Das Element kommt als eigener Frame mit bearbeitbaren Ebenen an.
Kopple die Erweiterung einmalig per Einmalcode mit deinem Plugin. Danach wird jede Aufnahme direkt in das geöffnete Plugin geliefert. Die Aufnahme wartet höchstens 30 Minuten im Arbeitsspeicher, bis das Plugin sie abholt, und wird nie auf die Festplatte geschrieben.
Nein. Sie hat kein Konto, kein Tracking und keinen Remote-Code. Sie sendet nichts an uns, außer du nutzt Send to Figma für eine Aufnahme. Fügst du stattdessen ein, wandert die Aufnahme über deine Zwischenablage oder eine .h2f-Datei und verlässt nie deinen Computer.
Ja. Jede Aufnahme aus der Erweiterung zählt als ein Import in deinem Plan. Der Free-Plan enthält 10 Importe pro Monat, Pro und Team sind im Rahmen eines Fair-Use-Kontingents unbegrenzt. Die Nutzungszähler werden monatlich (UTC) zurückgesetzt, und eine Aufnahme wird nur einmal gezählt.
Ja. Die HTML to Frames Chrome-Erweiterung selbst ist kostenlos und braucht kein Konto. Aufnahmen werden über das Figma-Plugin importiert und zählen auf deinen Plan, der mit der Free-Stufe beginnt. Die Erweiterung wird gerade für die Veröffentlichung im Chrome Web Store vorbereitet.
Verwandte Themen
Schluss mit dem Nachbauen von Webseiten.
Link einfügen und in Sekunden echte, bearbeitbare, responsive Figma-Ebenen erhalten. Kostenlos starten – 10 Importe pro Monat.
Keine Kreditkarte nötig. Pro kaufst du direkt in Figma.
Bald in der Figma Community