Localhost to Figma: Jede Seite mit der Chrome-Erweiterung

Ein URL-Import funktioniert, wenn die Seite öffentlich ist. Viele der Screens, die du tatsächlich in Figma brauchst, sind es nicht: der Feature-Branch auf localhost:3000, ein Admin-Dashboard hinter einem Login, ein Staging-Server im Büronetz oder ein Checkout mit Artikeln im Warenkorb.

Dafür hat HTML to Frames eine kostenlose Chrome-Erweiterung. Sie erfasst die Seite aus deinem eigenen Browser, genau so, wie du sie siehst, und übergibt sie an das Figma-Plugin, das daraus bearbeitbare Frames, Texte, Vektoren und Bilder mit Auto Layout macht. Dieser Leitfaden zeigt, wie du localhost nach Figma bekommst, wie du Seiten mit Login und bestimmte Zustände erfasst und was zu tun ist, wenn etwas schiefgeht.

Wann du die Chrome-Erweiterung statt einer URL nutzt

Die Quelle Link des Plugins rendert Seiten in einem isolierten Browser auf dem Capture-Service von HTML to Frames. Dieser Browser sieht, was ein anonymer Besucher im öffentlichen Internet sieht. Er erreicht weder deinen Rechner noch dein privates Netzwerk oder deine angemeldete Sitzung.

Nutze die Erweiterung, wenn die Seite:

• lokal läuft, etwa auf localhost, 127.0.0.1 oder einem Dev-Server in deinem Netzwerk.
• hinter einem Login liegt, wie SaaS-Dashboards, Admin-Panels, Kontoeinstellungen oder Kundenportale.
• in einem privaten Netzwerk liegt, wie Staging-Umgebungen in einem VPN oder Intranet-Tools.
• in einem bestimmten Zustand ist, etwa ein geöffnetes Dropdown, ein ausgefülltes Formular, ein Modal, ein Warenkorb mit Produkten oder eine Fehlermeldung nach dem Absenden.

Für öffentliche Seiten ist ein URL-to-Figma-Import weiterhin der einfachste Weg – und er unterstützt Responsive sets mit einem Klick.

Was die Erweiterung ist (und was nicht)

Die Erweiterung läuft in deinem Browser. Sie braucht kein Konto, enthält kein Tracking und lädt keinen Remote-Code. Sie sendet nichts an HTML to Frames, außer du wählst Send to Figma. Selbst dann wird die Aufnahme nur so lange im Arbeitsspeicher gehalten, bis dein Plugin sie abholt, maximal 30 Minuten.

Eine Aufnahme zählt als ein Import in deinem Plan. Die Erweiterung selbst ist kostenlos. Mehr dazu auf der Seite zur Chrome-Erweiterung.

Schritt für Schritt: localhost nach Figma

1. Installiere die HTML to Frames Chrome-Erweiterung und pinne sie an die Symbolleiste.
2. Starte deinen Dev-Server und öffne die Seite in Chrome, zum Beispiel http://localhost:3000/settings.
3. Stell die Fensterbreite auf den gewünschten Screen ein (mehr dazu unten).
4. Bring die Seite in den gewünschten Zustand: angemeldet, Daten geladen, Menü geöffnet.
5. Klick auf das Erweiterungssymbol und wähle, ob du die ganze Seite erfassen oder ein Element auswählen willst.
6. Liefere die Aufnahme an Figma – über die Zwischenablage, eine .h2f-Datei oder mit Send to Figma.
7. In Figma baut das Plugin die Ebenen auf und zeigt den Ergebnisbildschirm mit Frames, Ebenen, Auto-Layout-Anteil und eventuellen Warnungen.

Ganze Seite vs. einzelnes Element

Die Erweiterung bietet zwei Aufnahmemodi.

Die ganze Seite erfassen

Das ist der Standard für Screens, die du komplett reviewen oder redesignen willst: ein Dashboard, eine Einstellungsseite, eine Landingpage in Entwicklung. Du bekommst einen Frame für die Seite mit verschachtelten Frames, die das DOM spiegeln.

Ein einzelnes Element auswählen

Oft brauchst du nur eine Komponente: eine Preiskarte, die Navigationsleiste, eine Datentabelle, ein Modal. Wähle die Elementauswahl und:

• Fahr mit der Maus über die Seite; das Element unter dem Cursor wird hervorgehoben.
• Drück ↑, um zum Elternelement zu wechseln, ↓ für ein Kindelement.
• Drück Enter, um das hervorgehobene Element zu erfassen.
• Drück Esc, um abzubrechen.

Die Elementaufnahme ist der schnellste Weg, eine Komponentenreferenz aus einem Live-Produkt aufzubauen oder ein einzelnes Widget ohne den Rest der Seite zum Review an einen Designer zu schicken.

Zwei Lieferwege: Zwischenablage/.h2f oder Send to Figma

Zwischenablage und .h2f

Die Aufnahme wird in deine Zwischenablage kopiert oder als .h2f-Datei gespeichert. Öffne in Figma das Plugin, geh in den Tab Browser und füge ein. Eine .h2f-Datei ist praktisch, wenn jemand anderes die Seite erfasst (etwa ein PM mit Zugang zu einem Kunden-Dashboard) und ein Designer sie später importiert.

Send to Figma

Wenn du oft erfasst, verbinde die Erweiterung einmalig per Einmalcode mit deinem Plugin. Danach gehen Aufnahmen ohne Einfügeschritt direkt ins geöffnete Plugin. Lass das Plugin in Figma geöffnet, während du arbeitest.

Eine Aufnahme = ein Screen in der aktuellen Fensterbreite

Die Erweiterung erfasst, was dein Browser rendert – eine Aufnahme ist also ein Screen in der aktuellen Fensterbreite. Ist dein Fenster 1440 px breit, bekommst du einen 1440er-Desktop-Frame.

Für andere Breakpoints änderst du die Fenstergröße und erfasst erneut:

• Tablet: auf etwa 768 px Breite verkleinern und erfassen.
• Mobile: auf etwa 390 px Breite verkleinern und erfassen.

Die Gerätesymbolleiste der Chrome DevTools ist ein bequemer Weg, exakte Breiten einzustellen. Jede Aufnahme zählt als ein Import. Ist die Seite öffentlich, kann die Quelle Link des Plugins stattdessen das komplette Responsive set (Desktop + Tablet + Mobile) in einem einzigen Import erzeugen.

Zustände erfassen, die eine URL nicht reproduzieren kann

Die Erweiterung erfasst den aktuellen Zustand der Seite und erschließt damit Screens, die sonst mühsam nachzubauen sind:

• Geöffnete Menüs und Dropdowns. Öffne das Menü und erfasse dann die Seite oder wähle das Menü-Element.
• Ausgefüllte Formulare und Validierungsfehler. Fülle die Felder aus, sende ab, um Fehler auszulösen, und erfasse dann.
• Warenkörbe und Checkouts. Lege Produkte in den Warenkorb und erfasse ihn mit echten Positionen.
• Leere, ladende und gefüllte Zustände. Erfasse dasselbe Dashboard mit und ohne Daten für eine Zustandsübersicht.
• Modals und Toasts. Löse sie aus und erfasse, solange sie auf dem Bildschirm sind.

Für Produktteams ist das der schnellste Weg, jeden Zustand eines Flows vor einem Redesign oder einem Usability-Review in Figma zu dokumentieren.

Was ankommt

Die Erweiterung speist dieselbe Konvertierungs-Engine wie jede andere Quelle – du bekommst also den vollen Funktionsumfang von der Funktionsseite: Layout, Text mit gemischten Stilen, Verläufe, Bilder, SVG als bearbeitbare Vektoren, Rahmen, Schatten, Blur, ::before/::after, Formularfelder, Shadow DOM und z-index-Reihenfolge.

Auto Layout wird aus der vom Browser gemessenen Geometrie abgeleitet und verifiziert: Die Position jedes Kindelements wird auf 2 px genau geprüft, und hält sie nicht, wird ein einfacherer Plan probiert oder der Frame behält absolute Positionen mit sinnvollen Constraints. In unseren Tests wurde Auto Layout je nach Website auf etwa 86 bis 97 Prozent der Frames abgeleitet. Wenn du das Frontend selbst schreibst, zeigt dieser Leitfaden zur Zuordnung, wie du CSS schreibst, das sich sauber importieren lässt.

Eingebettete Inhalte, die keine Ebenen werden können – etwa iframes mit Karten, Videos ohne Poster oder WebGL-Canvases –, kommen als Screenshot-Bild dieses Bereichs an.

Eine kurze Checkliste vor der Aufnahme

Geh diese Liste vor jeder Aufnahmesitzung durch, um doppelte Arbeit zu vermeiden:

• Breite: Hat das Fenster den gewünschten Breakpoint, bei 100% Browser-Zoom?
• Daten: Ist die Seite vollständig geladen, inklusive Charts, Bildern und Lazy-Abschnitten?
• Zustand: Sind Menüs, Modals oder Formularfehler genau so sichtbar, wie du sie in Figma haben willst?
• Inhalt: Bist du auf ein Testkonto oder Seed-Daten umgestiegen, wo sonst echte Kundendaten erscheinen würden?
• Umfang: Brauchst du die ganze Seite, oder wäre ein einzelnes Element fürs Review klarer?
• Lieferung: Ist das Plugin in Figma geöffnet, wenn du Send to Figma nutzt?

Zwei Minuten hier ersparen dir mehrere Runden, denselben Screen erneut zu erfassen.

Datenschutz bei Seiten mit Login und internen Seiten

Ein Dashboard zu erfassen heißt, alles zu erfassen, was darauf steht. Ein paar praktische Regeln:

• Die Aufnahme passiert in deinem Browser. Nichts verlässt ihn, außer du fügst es in Figma ein oder nutzt Send to Figma.
• Send to Figma ist flüchtig. Die Aufnahme wartet im Arbeitsspeicher, bis dein Plugin sie abholt, höchstens 30 Minuten, und wird nicht auf die Festplatte geschrieben.
• Maskiere sensible Daten vorher. Nutze wenn möglich Testkonten oder Seed-Daten, denn was auf dem Bildschirm steht, landet als Textebenen in deiner Figma-Datei.
• Deine Figma-Datei wird nicht gelesen. Das Plugin schreibt nur Ebenen und liest die Metadaten seiner eigenen Frames.

Die vollständigen Richtlinien findest du auf der Sicherheitsseite.

Fehlerbehebung

In der Aufnahme fehlen spät geladene Inhalte

Warte, bis die Seite vollständig geladen ist, inklusive Lazy-Abschnitten und Charts, bevor du erfasst. Scroll einmal durch die Seite, wenn Inhalte beim Scrollen laden.

Das Layout sieht anders aus als bei mir

Prüfe die Fensterbreite; die Aufnahme spiegelt die aktuelle Breite exakt wider. Stell außerdem sicher, dass kein Browser-Zoom aktiv ist.

Send to Figma tut nichts

Stell sicher, dass das Plugin in Figma geöffnet ist. Hast du vor längerer Zeit gekoppelt oder den Rechner gewechselt, kopple erneut mit einem neuen Einmalcode. Aufnahmen warten bis zu 30 Minuten – öffnest du das Plugin innerhalb dieses Zeitfensters, werden sie trotzdem geliefert.

Einfügen im Browser-Tab funktioniert nicht

Deine Zwischenablage wurde vielleicht durch einen anderen Kopiervorgang überschrieben. Erfasse erneut oder speichere als .h2f-Datei und lade diese stattdessen.

Schriften sehen falsch aus

Lokale oder lizenzierte Webfonts sind möglicherweise nicht auf deinem Rechner installiert. Der Bildschirm Missing fonts des Plugins schlägt vor dem Aufbau Ersatzschriften vor und merkt sich deine Wahl pro Website.

Manche Frames haben kein Auto Layout

Der Ergebnisbildschirm listet auf, warum ein Frame absolut geblieben ist. Oft sind es überlappende Inhalte oder negative Margins. Der Frame entspricht trotzdem der Seite; er behält nur absolute Positionen mit Constraints.

Localhost to Figma im Entwickler-Workflow

Für Frontend-Entwickler macht die Erweiterung die Design-Übergabe zur Zwei-Wege-Straße:

1. Das Feature lokal bauen.
2. Die neuen Screens in Desktop- und Mobile-Breite erfassen.
3. Sie neben dem ursprünglichen Design an Figma senden.
4. Designer prüfen die echte Implementierung, kommentieren und passen an.
5. Du korrigierst, erfasst erneut und vergleichst.

Wenn du mit KI-Tools baust, gibt es auch einen direkten Weg: Claude Code, Claude Desktop oder Cursor können per MCP HTML an das Plugin senden. Siehe AI to Figma per MCP.

Loslegen

Installiere die Chrome-Erweiterung, öffne deinen lokalen Build und erfasse zuerst ein Element – eine Karte oder einen Button –, um zu sehen, wie es ankommt. Erfasse dann die ganze Seite in Desktop- und Mobile-Breite. Die Doku erklärt Kopplung und Browser-Tab im Detail, und die Preisseite erklärt, wie Aufnahmen auf deine Importe angerechnet werden.