Link einfügen
URL to Figma: Link einfügen, bearbeitbare Ebenen erhalten
Der schnellste Weg nach Figma. Füge eine beliebige öffentliche URL ein, und HTML to Frames rendert, misst und baut die Seite auf deinem Canvas nach.
- Gerendert in einem isolierten Sandbox-Browser
- Cookie-Banner und Pop-ups auf Wunsch ausgeblendet
- Ergebnis einmal ausgeliefert, nie auf die Festplatte geschrieben
Bald in der Figma Community

URL to Figma ist der kürzeste Weg von einer Live-Seite zum bearbeitbaren Design: Adresse kopieren, ins HTML to Frames Plugin einfügen, Screen wählen und importieren. Keine Erweiterung installieren, keinen Code exportieren, keine Dateien hochladen. Das ist die richtige Wahl, wann immer die Seite öffentlich ist – also für Wettbewerbsanalysen, Inspirations-Teardowns, Kunden-Websites vor einem Redesign und deine eigenen Produktionsseiten.
Zwischen Einfügen und Ergebnis passiert eine Menge. Der Capture-Service von HTML to Frames lädt die Seite in einem isolierten Sandbox-Browser – genau so, wie normale Besucher sie sehen würden. Auf Wunsch werden zuerst Cookie-Banner und Pop-ups ausgeblendet. Die Seite wird gescrollt, damit nachgeladene Inhalte erscheinen können, Animationen werden für einen sauberen Frame eingefroren, und die echte Designbreite wird gemessen, damit der Desktop-Frame zur Bauweise der Website passt.
Dann liest das Plugin das berechnete Layout und die Styles aus und baut native Figma-Ebenen auf deinem Canvas – mit Auto Layout überall dort, wo es sich verifizieren lässt. Text ist bearbeitbar, SVG wird zu Vektoren, und Bilder behalten ihre Einpassung.
Datenschutz ist Teil des Konzepts. Das Ergebnis wird einmal an dein Plugin ausgeliefert und dann aus dem Arbeitsspeicher gelöscht. Es wird nie auf die Festplatte geschrieben, und der Auftragsdatensatz wird nach 15 Minuten vergessen. Die Sicherheitsseite beschreibt die komplette Architektur.
Für Seiten hinter einem Login oder auf localhost nutze stattdessen die Chrome-Erweiterung. Für viele Seiten siehe Website to Figma. Und für einen ersten Durchgang erklärt die Anleitung HTML in Figma umwandeln jede Option.
URL to Figma in drei Schritten
- 01
Seitenadresse kopieren
Jede öffentliche URL funktioniert: eine Startseite, eine Produktseite, ein Blogartikel oder eine Preistabelle.
- 02
In den Tab Link einfügen
Öffne HTML to Frames in Figma, füge die URL ein und wähle einen Screen wie Desktop oder Mobile.
- 03
Importieren
Die Seite wird gerendert, gemessen und als bearbeitbare Ebenen auf deiner aktuellen Figma-Seite nachgebaut.
Was nach dem Einfügen passiert
Isolierter Browser
Seiten laden in einem Sandbox-Browser in einem eigenen Container, getrennt von API und Bild-Dekodierung.
Pop-ups aus dem Weg
Hide cookie banners & popups entfernt Consent-Overlays vor der Aufnahme.
Lazy-Content geladen
Die Seite wird gescrollt, damit beim Scrollen geladene Inhalte vorhanden sind, und Animationen werden eingefroren.
Gemessene Breite
Der Desktop-Frame nutzt die echte Designbreite der Website statt eines festen Schätzwerts.
Extra wait für langsame Seiten
Gib schweren Seiten bei Pro mehr Zeit, um vor der Aufnahme fertig zu laden.
Re-import per Klick
Die Quell-URL wird am Frame gespeichert, sodass du ihn aktualisieren kannst, wenn sich die Seite ändert.
Hinter den Kulissen eines URL-Imports
Einen Link einzufügen wirkt wie ein Augenblick, aber der Capture-Service erledigt einiges, damit das Ergebnis dem entspricht, was Besucher sehen.
- Isoliertes Laden. Die Seite öffnet sich in einem Chromium-Browser in einer Sandbox, der in einem eigenen Container mit seccomp-Beschränkungen läuft. Jede Anfrage durchläuft den SSRF-Schutz, sodass sich eine URL nicht nutzen lässt, um interne Adressen zu erreichen.
- Aufräumen. Mit aktivierter Option Hide cookie banners & popups werden Consent-Banner und Overlays vor der Aufnahme entfernt.
- Lazy-Content. Die Seite wird gescrollt, damit Bilder und Abschnitte, die beim Scrollen laden, bei der Aufnahme vorhanden sind.
- Stillstand. Animationen werden eingefroren und WebGL nach wenigen Frames angehalten, sodass nichts mitten im Übergang erfasst wird.
- Messung. Die echte Designbreite wird gemessen: 1920 bei Full-Bleed-Designs, die Containerbreite bei geboxten Websites, 1440 bei fluiden.
- Auslieferung. Die erfasste Struktur wird einmal an dein Plugin ausgeliefert und dann aus dem Arbeitsspeicher gelöscht.
Bilder werden von einem separaten Decoder-Container ohne Internetzugang verarbeitet. Das Plugin baut die Ebenen dann lokal in Figma auf und wendet verifiziertes Auto Layout an. Für Seiten in anderen Sprachen kannst du bei mehrsprachigen Websites mit der Option Page language eine von 15 Sprachen wählen. Die Doku erklärt jede Option.
Tempo: die richtigen Optionen wählen
Meistens braucht ein URL-Import nur die Standardoptionen. Wenn du feinjustieren willst, machen ein paar Einstellungen den größten Unterschied:
Screens
Jeder zusätzliche Screen ist eine weitere Aufnahme. Die Screens einer Seite laufen parallel, und ein komplettes Responsive set zählt trotzdem als ein einziger Import. Free erfasst einen Screen pro Import; Pro und Team erlauben bis zu vier.
Full page
Die Aufnahme der gesamten scrollenden Seite liefert dir das komplette Design. Schalte sie aus, wenn du nur den oberen Teil der Seite brauchst.
Images
Lass Bilder für einen fertigen Look aktiviert oder schalte sie aus, wenn es dir nur um Layout und Typografie geht.
Extra wait (Pro)
Manche Seiten laden noch Inhalte nach, nachdem sie fertig wirken. Extra wait gibt ihnen mehr Zeit, damit späte Abschnitte mit drin sind.
Detailed layers (Pro)
Eine Option für den Fall, dass du statt der Standardstruktur einen detaillierteren Ebenenbaum untersuchen willst.
Wird eine Seite durch ein Plan-Limit abgeschnitten, zeigt das Ergebnis einen sichtbaren lila Capture-limit-Streifen – so weißt du immer, ob du die ganze Seite vor dir hast. Wie sich die Pläne unterscheiden, steht auf der Preisseite.
Datenschutz bei URL-Importen
Wenn du eine URL einfügst, besucht unser Capture-Service diese Seite in deinem Auftrag – da ist die Frage berechtigt, was mit den Daten passiert.
- Das Rendering erfolgt in einem isolierten Sandbox-Browser.
- Das Ergebnis wird einmal an dein Plugin ausgeliefert und dann aus dem Arbeitsspeicher gelöscht. Es wird nie auf die Festplatte geschrieben.
- Der Auftragsdatensatz wird nach 15 Minuten vergessen.
- Protokolle sind begrenzt: Das Import-Protokoll wird 180 Tage aufbewahrt, wobei die IP-Adresse nach 30 Tagen entfernt wird, das Sicherheitsprotokoll 90 Tage.
- Kein Tracking: Es gibt keine Cookies, Analysewerkzeuge oder Tracking-Pixel im Plugin, in der Erweiterung oder auf der Website, und Daten werden nie verkauft.
Auch deine Identität bleibt minimal. Die Konto-Kennung wird aus deiner Figma-Nutzer-ID abgeleitet, und wir erhalten von Figma weder deinen Namen noch deine E-Mail-Adresse. Das Plugin liest den Inhalt deiner Figma-Datei nicht. Es schreibt neue Ebenen und liest nur die Metadaten seiner eigenen Frames, etwa Quell-URL und Breite.
Ein URL-Import funktioniert nur für Seiten, die der Capture-Service als anonymer Besucher erreichen kann. Für alles hinter einem Login erfasst die Chrome-Erweiterung stattdessen in deinem eigenen Browser. Alle Details stehen auf der Sicherheitsseite.
Häufige Fragen
Jede öffentliche Webseite, die der Capture-Service als anonymer Besucher öffnen kann. Seiten mit Login, lokale Entwicklungsserver auf localhost und private Netzwerkadressen sind so nicht erreichbar; nutze dafür die kostenlose Chrome-Erweiterung, die aus deinem eigenen Browser heraus erfasst.
Nur, wenn du sie willst. Aktiviere Hide cookie banners & popups, und Consent-Banner und Overlays werden vor der Aufnahme ausgeblendet, damit sie die Seite auf deinem Canvas nicht verdecken. Lass die Option aus, wenn du gerade das Banner selbst gestaltest.
Der Desktop-Frame nutzt die gemessene Designbreite, nicht deinen Monitor. Full-Bleed-Designs erhalten 1920 mit zentriertem Inhalt, geboxte Websites ihre Containerbreite und fluide Websites 1440. Tablet 768, Mobile 390 und Laptop 1280 sind fest, und Pro ergänzt eine Custom width.
Inhalte, die spät laden, können bei sehr langsamen Seiten fehlen. Bei Pro gibt Extra wait der Seite vor der Aufnahme mehr Zeit. Wurde eine Seite durch ein Plan-Limit abgeschnitten, markiert sie ein lila Capture-limit-Streifen. Der Ergebnisbildschirm listet außerdem Warnungen auf.
Nein. Seiten werden in einem isolierten Browser gerendert, und das Ergebnis wird einmal an dein Plugin ausgeliefert und dann aus dem Arbeitsspeicher gelöscht. Es wird nie auf die Festplatte geschrieben, und der Auftragsdatensatz wird nach 15 Minuten vergessen. Es kommen keine Cookies, Analysewerkzeuge oder Tracking zum Einsatz.
Ja. Die Quell-URL ist an jedem Frame gespeichert, sodass du ihn mit einem Klick neu importieren kannst. Das ist praktisch, um eine Seite über mehrere Releases zu verfolgen oder vor einem Design-Review eine Referenz aufzufrischen – ohne die Adresse erneut einzufügen oder deine Import-Einstellungen neu zu setzen.
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