Das Figma-Plugin Weblify verlinkt für den Import von Websites auf die kostenlose Weblify-Chrome-Erweiterung. Die Erweiterung arbeitet direkt in deinem Browser, auch auf Seiten, die deine aktuelle Anmeldung oder Browsersitzung nutzen.
Eine Website importieren
- Installiere die Weblify-Chrome-Erweiterung.
- Öffne in Chrome die Webseite, die du kopieren willst.
- Wähle das Symbol der Weblify-Erweiterung, um ihre Symbolleiste auf der Seite zu öffnen.
- Behalte Current Window Size bei oder öffne die Größenauswahl, um eine oder mehrere Aufnahmegrößen zu wählen.
- Wähle Copy page, um die ganze Seite zu kopieren, oder Pick element, um ein einzelnes Element auszuwählen.
- Warte auf die Bestätigung Copied to clipboard. Wenn du eine Seite kopierst, lass Weblify das Scrollen und Vorbereiten der Inhalte abschließen.
- Wechsle zurück zu deiner Figma-Datei und füge mit Command + V unter macOS oder Ctrl + V unter Windows ein.
Du kannst auch im Menü ⋯ des Figma-Plugins Weblify die Option Import website und dann Download the Chrome Extension wählen.
Aufnahmegrößen wählen
Öffne die Größenauswahl neben dem Weblify-Logo, um Capture sizes zu sehen. Die Auswahl zeigt die gewählte Größe oder, wenn mehrere gewählt sind, eine Anzahl wie 2 sizes.
| Größe | Browser-Viewport |
|---|---|
| Current Window Size | Breite und Höhe des Inhaltsbereichs deines aktuellen Browserfensters. Die Maße werden aktualisiert, wenn du die Fenstergröße änderst. |
| Desktop | 1440 × 900 Pixel |
| Tablet | 768 × 1024 Pixel |
| Mobile | 390 × 844 Pixel |
| Custom | Gib eine Breite von 280–2560 Pixeln und eine Höhe von 320–2400 Pixeln ein. |
Aktiviere mehrere Kontrollkästchen, um separate, benannte Frames nebeneinander in Figma zu kopieren. Mindestens eine Größe bleibt immer ausgewählt. Deine Auswahl bleibt erhalten, wenn du Restart nutzt, bis du die Webseite neu lädst.
Copy page übernimmt bei jeder gewählten Breite die volle Seitenhöhe. Die Höhe legt den Viewport fest, in dem die Seite aufgebaut wird; das Ergebnis wird nicht auf diese Höhe zugeschnitten. Pick element kopiert das ausgewählte Element so, wie es in jeder gewählten Größe erscheint.
Nutze Current Window Size allein, um die Live-Seite genau so aufzunehmen, wie sie gerade aufgebaut ist. Bei anderen Größen wird eine Kopie der Seite neu umbrochen, sodass per JavaScript gesteuerte Inhalte, eingebettete Inhalte oder Canvas-Grafiken abweichen können.
Inhalte vor dem Kopieren laden
Copy page scrollt vor der Aufnahme automatisch durch die Seite. So haben per Lazy Loading geladene Bilder und Abschnitte, die erst beim Scrollen erscheinen, Gelegenheit zu laden. Danach stellt Weblify deine ursprüngliche Scrollposition wieder her und nimmt die vorbereitete Seite in den gewählten Größen auf.
Die Vorbereitung ist zeitlich und in der Scrolltiefe begrenzt, damit Seiten mit endlosem Feed nicht ewig weiterladen. Sehr langsame Inhalte, spätere Einträge eines endlosen Feeds oder Inhalte, die eine Website beim Scrollen entfernt, können trotzdem fehlen. Pick element scrollt die Seite vorher nicht automatisch.
Fehlt etwas, scroll selbst dorthin, warte, bis es erscheint, und versuche es mit Pick element, wobei nur Current Window Size ausgewählt ist.
Ein Element auswählen
Wähle Pick element, fahr dann mit der Maus über die Seite und klick auf das Element, das du kopieren willst. Mit den Pfeilen nach oben und unten wechselst du vor dem Kopieren zum übergeordneten oder untergeordneten Element.
Ist das ausgewählte Element in einer der gewählten Größen ausgeblendet, meldet Weblify einen Fehler, statt einen leeren Frame zu kopieren. Wähle eine Größe, in der das Element sichtbar ist, und versuche es erneut.
Nach erfolgreichem Kopieren wählst du Restart, um mit unveränderter Größenauswahl zur Symbolleiste zurückzukehren, oder du schließt die Bestätigung.
Browserinterne Seiten und der Chrome Web Store erlauben Erweiterungen nicht, Steuerelemente in die Seite einzufügen. Öffne einen Tab mit einer normalen Website, bevor du das Symbol der Weblify-Erweiterung wählst.