Webseiten nach Figma exportieren

Wie der lokale Workflow funktioniert

CloneWebsite sendet keine Webseite an einen Konvertierungsserver. Die Chrome-Erweiterung liest die gerenderte Seite in Ihrem aktiven Tab, erstellt eine versionierte .cdesign-Archiv im Speicher und lädt es herunter oder speichert es lokal. Das CloneWebsite Figma-Plugin öffnet diese Datei und erstellt Ebenen im aktuellen Figma-Dokument.

Gerenderte Webseite → Chrome-Erweiterung → lokale .cdesign-Datei → Figma-Plugin → bearbeitbare Ebenen

Die .cdesign-Datei ist ein offener, ZIP-basierter Container. Sie enthält ein Manifest, eine JSON-Szenendatei pro erfasstem Zustand und inhaltsadressierte Bild-Assets.

Seite oder Komponente erfassen

1. Öffnen Sie die Webseite und warten Sie, bis deren Inhalt und Web-Schriften fertig gerendert sind.
2. Öffnen Sie die CloneWebsite-Symbolleiste und ändern Sie die Ausgabe von Website zu Figma.
3. Wählen Sie Seite klonen oder Komponente klonen.
4. Öffnen Sie die Figma-Erfassungsoptionen und wählen Sie Viewport- und Theme-Kombinationen. Die anfängliche Einstellung erfasst den aktuellen Viewport und das aktuelle Theme. Sie können 1440, 768 und 390 Pixel Viewports sowie helle oder dunkle Themes hinzufügen, bis zu sechs Kombinationen.
5. Lassen Sie Erweiterte Erfassung aktiviert, wenn Sie responsive Viewports, Komponenten-Interaktionszustände, Iframe/Filter-Raster-Fallbacks oder genauere Browser-Geometrie benötigen.
6. Wählen Sie Starten. Im Komponentenmodus klicken Sie auf die Komponente auf der Seite und bestätigen die Auswahl.
7. Laden Sie die resultierende .cdesign-Datei herunter oder speichern Sie sie in der lokalen Projektliste der Erweiterung für einen späteren Download.

Chrome-Debugger-Berechtigung

Chrome unterstützt nicht die Deklaration der debugger-Berechtigung als optional, daher wird sie bei der Installation der Erweiterung gewährt. CloneWebsite hängt den Debugger nur an, wenn Sie eine Figma-Erfassung mit aktivierter Erweiterter Erfassung starten. Er wird vorübergehend verwendet, um Viewport/Theme-Kombinationen zu emulieren, unterstützte Pseudo-Zustände von Komponenten zu erzwingen und lokale Screenshots für nicht unterstützte visuelle Teilbäume zu erstellen. Die Erweiterung trennt sich vom Tab, wenn die Erfassung endet oder fehlschlägt.

Wenn die Erweiterte Erfassung deaktiviert ist, hängt die Erweiterung den Debugger nicht an. Der Grundmodus erfasst den aktuellen Viewport, das aktuelle Theme und den Default-Komponentenzustand. Der Erfassungsbericht erläutert, welche erweiterten Szenen oder Fallbacks übersprungen wurden.

Chrome DevTools und ein anderer Debugger-Client können nicht gleichzeitig denselben Tab steuern. Schließen Sie DevTools für diesen Tab, wenn die erweiterte Erfassung einen Anhangsfehler meldet.

In Figma importieren

Während der internen Veröffentlichungsphase:

1. Erstellen Sie das Plugin aus figma_plugin/ mit pnpm install && pnpm build.
2. Wählen Sie in Figma Desktop Plugins → Development → Import plugin from manifest….
3. Wählen Sie figma_plugin/manifest.json.
4. Führen Sie CloneWebsite Design Importer aus.
5. Legen Sie die .cdesign-Datei ab, wählen Sie die zu importierenden Szenen aus und starten Sie den Import.

Das Plugin hat keine Netzwerkberechtigung. Archiv-Parsing, Image-Erstellung, Schriftartenabgleich und Ebenengenerierung erfolgen innerhalb von Figma auf Ihrem Gerät.

Was bearbeitbar bleibt

• Rahmen, Füllungen, Ränder, Eckradien, Schatten und grundlegende Mischmodi
• Textinhalt, Schriftgrad, Zeilenhöhe, Ausrichtung, Dekoration und Farbe
• Bild- und SVG-Ebenen
• Hochkonfidenz-Flexbox-Layouts als Figma Auto Layout
• Ausgewählte Komponenten als Figma-Komponenten
• Default-, Hover-, Focus-, Active- und Disabled-Komponentenzustände als Varianten, wenn die erweiterte Erfassung die ausgewählte Komponente abbilden kann

Grid- und Freiform-Seitenbereiche verwenden absolute Positionierung, um die Geometrie zu erhalten. Komplexe Filter, Masken, Iframes, Video-Oberflächen und nicht unterstützte Browser-Effekte können zu lokalen Raster-Fallback-Ebenen werden.

Schriftarten und Importberichte

Figma-Plugins können eine Web-Schriftart der Seite nicht im Editor installieren. Der Importer sucht zuerst nach der angeforderten Familie und dem Stil unter den für Figma verfügbaren Schriftarten. Wenn er keine genaue Übereinstimmung laden kann, verwendet er ein bearbeitbares lokales Fallback und listet die Ersetzung im Importbericht auf.

Der Bericht listet auch fehlende Assets, Raster-Fallbacks, übersprungenes unsicheres SVG-Markup, Knotenlimits und Erfassungswarnungen auf. Überprüfen Sie ihn, bevor Sie die importierte Datei als Produktions-Designquelle behandeln.

Datenschutz und verantwortungsvolle Nutzung

Seiteninhalte werden nicht an CloneWebsite hochgeladen. Netzwerkanforderungen während der Erfassung beschränken sich auf den Download bereits von der Seite referenzierter Ressourcen, zuzüglich eines optionalen BYOK-KI-Endpunkts, wenn Sie diese Funktion separat konfiguriert haben. Siehe die Datenschutzerklärung der Erweiterung.

Erfassen Sie nur Seiten, auf die Sie zugreifen dürfen. Urheberrechte, Marken, persönliche Daten und Designrechte der ursprünglichen Website verbleiben bei ihren Eigentümern.