Español 
Français 
日本語 
한국어 
Polski 
Português 
Weblify vs CSS Scan
CSS-Scan-Alternative. Bring die Website-Referenz in eine bearbeitbare Figma-Datei.
Weblify ist eine CSS-Scan-Alternative, wenn du eine Website-Referenz als bearbeitbare Ebenen in Figma kopieren willst. Kopiere mit der kostenlosen Chrome-Erweiterung eine ganze Seite oder ein einzelnes Element und füge das Ergebnis in die Designdatei ein.
Kostenlose Weblify-Erweiterung für Google Chrome
Thanks so much, Adam!... saved me many, many hours of manual work.
CSS Scan oder Weblify?
Vergleiche die Workflows und wähle das Tool, das zu deinem nächsten Projekt passt.
| CSS Scan |  Mit Weblify |
|---|---|
| CSS-Inspektion von Websites CSS Scan bietet Werkzeuge, um das Styling von Webseiten zu inspizieren. | Chrome-Erweiterung: Website zu Figma Kopiere eine ganze Webseite oder wähle ein einzelnes Element in Chrome aus und füge es mit der kostenlosen Weblify-Erweiterung als bearbeitbare Ebenen in Figma ein. Lies den Weblify-Leitfaden |
| CSS kopieren Das Produkt konzentriert sich darauf, CSS aus bestehenden Seitenelementen zu holen. | Figma zu HTML, Tailwind, React und Vue Wähle eine Figma-Ebene aus, sieh dir das erzeugte HTML, Tailwind, React oder Vue neben dem Design an und kopiere oder lade die Umsetzung herunter. Lies den Weblify-Leitfaden |
| Auf Entwickler ausgerichteter Workflow Der Workflow dient der Inspektion umgesetzter Websites. | Live-Code-Vorschau in Figma Rendere den erzeugten Web-Code in Weblify in verschiedenen Viewport-Größen und prüfe das Ergebnis vor der Übergabe oder dem Download. Lies den Weblify-Leitfaden |
Kostenlose Erweiterung für Google Chrome. Kopiere deine erste Seite oder dein erstes Element nach Figma.
Kostenlose Chrome-Erweiterung holenWähle deinen Workflow
Wähle das Tool, das zur Aufgabe passt.
So sieht es in der Praxis aus
Was du mit Weblify machen kannst.
Entdecke die Funktionen hinter dem Workflow, mit Demos und Anleitungen zur Einrichtung.
Kopiere jede Website mit der kostenlosen Chrome-Erweiterung in Figma.
Kopiere in Chrome eine ganze Webseite oder wähle ein einzelnes Element und füge es mit der kostenlosen Weblify-Erweiterung als bearbeitbare Ebenen in Figma ein.
- Ganze Websites kopieren
- Einzelne Elemente auswählen
- Bearbeitbare Figma-Ebenen
Sieh dir jede Figma-Ebene als HTML, Tailwind, React oder Vue an.
Wähle eine Figma-Ebene, prüfe erzeugtes HTML, Tailwind, React oder Vue neben dem Design und kopiere die Umsetzung oder lade sie herunter.
- HTML- und CSS-Inspektion
- Tailwind-Ausgabe
- React- und Vue-Ausgabe
Sieh das gerenderte Ergebnis, während du den Code in Figma prüfst.
Rendere den erzeugten Web-Code in Weblify in verschiedenen Viewport-Größen und prüfe das Ergebnis vor Übergabe oder Download.
- Live-Rendering im Browser
- Responsive Viewport-Vorschauen
- Vorschau neben dem Figma-Design
Teste ein echtes Projekt
Bring den Workflow in Weblify.
Starte mit einer repräsentativen Datei, bevor du den Arbeitsablauf im Team umstellst.
Weblify ProWas du vor dem Wechsel prüfen solltest.
CSS-Inspektion und das Erfassen einer bearbeitbaren Website sind unterschiedliche Aufgaben. Die kostenlose Weblify-Chrome-Erweiterung ist von der Pro-Code-Inspektion getrennt, und erfasste Ebenen stellen weder die ursprünglichen Figma-Komponenten noch die Anwendungslogik der Website wieder her.
Lies den Workflow-Leitfaden- Starte mit einem Abschnitt einer öffentlichen Webseite, den du als bearbeitbare Designreferenz brauchst. Öffne die Website, die du kopieren willst, in Chrome.
- Kopiere die Seite oder wähle ein einzelnes Element aus.
- Füge das Ergebnis in eine neue oder bestehende Figma-Datei ein. CSS-Inspektion und das Erfassen einer bearbeitbaren Website sind unterschiedliche Aufgaben.
Häufige Fragen
Was du vor dem Start wissen solltest.
Wann sollte ich Weblify statt CSS Scan wählen?
Designer, die eine bearbeitbare Website-Referenz in Figma brauchen statt nur des inspizierten CSS.
Wann passt CSS Scan besser?
Entwickler, die CSS von einer umgesetzten Webseite inspizieren und kopieren müssen.
Was sollte ich vor dem Wechsel prüfen?
CSS-Inspektion und das Erfassen einer bearbeitbaren Website sind unterschiedliche Aufgaben. Die kostenlose Weblify-Chrome-Erweiterung ist von der Pro-Code-Inspektion getrennt, und erfasste Ebenen stellen weder die ursprünglichen Figma-Komponenten noch die Anwendungslogik der Website wieder her.
Stellt das Kopieren einer Website ihr ursprüngliches Designsystem wieder her?
Nein. Weblify rekonstruiert unterstützte bearbeitbare Ebenen aus der Seite. Prüfe das Ergebnis und baue wiederverwendbare Designsystem-Strukturen bei Bedarf neu auf; Anwendungslogik und ursprüngliche Quellkomponenten sind davon getrennt.
Kann ich Weblify vor dem Upgrade testen?
Kostenlose Weblify-Erweiterung für Google Chrome. Die Chrome-Erweiterung ist unabhängig von der Code-Inspektion in Weblify Pro.
Angebot als PDF ↗ 
