Herausgeberbewertungen: Benutzerbewertungen:[Gesamt: 0 Durchschnitt: 0] @media(min-width: 500px) { } @media(min-width: 800px) { }
Haben Sie jemals das Bedürfnis verspürt, eine Website in ein Figma-Design zu konvertieren, um Ihre Webseiten neu zu gestalten oder um Anmerkungen hinzuzufügen? Nun, hier ist eine hervorragende Möglichkeit, dies mit einem kostenlosen Figma-Plugin namens html.to.design zu tun.
html.to.design ermöglicht Ihnen die Konvertierung jeder Website zu einem vollständig bearbeitbaren Figma-Design. Anschließend können Sie Ihre Website neu gestalten, ohne jedes Element von Grund auf neu erstellen zu müssen. Egal, ob Sie gerade eine alte Website neu gestalten, Benchmarks in Figma erstellen oder Design-Assets aus dem Web extrahieren, dieses Plugin erledigt die Arbeit einfach und schnell für Sie.
html.to.design kann sehr praktisch sein, wenn Sie Sie möchten eine Website für ein Moodboard erfassen, ohne Screenshots zu machen. Außerdem können Teammitglieder eine bearbeitbare Webseite laden, um miteinander zusammenzuarbeiten und Kommentare und Feedback abzugeben. UX-Autoren können damit verschiedene Kopien erstellen und sich einen genauen Überblick darüber verschaffen, wie sie aussehen werden. Es gibt viele solcher Anwendungsfälle, wenn es um das Plugin html.to.design geht.
Lassen Sie uns kurz seine Funktionen durchgehen:
Massenimporte: Sie können problemlos mehrere Seiten gleichzeitig in nur wenigen Sekunden importieren. Sobald der Import erfolgreich durchgeführt wurde, können die Seiten mit Anmerkungen versehen oder neu gestaltet werden.
Multi-Ansichtsfenster: Sie können Desktop-, Mobil-, Tablet-oder Laptop-Ansichtsfenster in einem importieren aufgenommen, ohne dass das Plugin mehrmals ausgeführt werden muss.
Multi-Theme: Sie können problemlos helle und dunkle Designs nebeneinander importieren.
Generierung von Text-und Farbstilen: Diese Beta-Funktion entwickelt lokale Figma-Stile für Farbe und Text.
Arbeiten:
1. Klicken Sie hier, um zur Seite mit den Figma-Community-Plugins zu navigieren, und klicken Sie dann Klicken Sie auf „Ausprobieren“ und installieren Sie das html.to.design-Plugin. Sie müssen bei Ihrem Figma-Konto angemeldet sein, um diesen Schritt ausführen zu können.
2. Sie werden nun zu Figma navigiert und ein leeres Design wird erstellt. Klicken Sie anschließend in der Figma-Symbolleiste auf die Schaltfläche „Ressourcen“, wählen Sie die Registerkarte „Plugins“ und klicken Sie neben dem Plugin „html.to.design“ auf „Ausführen“.
3. Fügen Sie die URL der Website ein, die Sie in ein Figma-Design konvertieren möchten. Klicken Sie auf das Dropdown-Menü, um den Ansichtsbereich auszuwählen, z. B. Desktop, Laptop, Telefon usw.
4. Wählen Sie als Nächstes das gewünschte Theme (Hell/Dunkel) aus, indem Sie auf die entsprechende Schaltfläche klicken und dann auf „Importieren“ klicken
5. Warten Sie einige Zeit, während das Plugin Ihre Eingaben analysiert und die Website in ein Figma-Design umwandelt.
6. Sie können nun fortfahren und Anmerkungen und Kommentare hinzufügen oder die gesamte Website in Figma entsprechend Ihren Anforderungen neu gestalten.
Wenn sich die Webseite, die Sie konvertieren möchten, hinter einem Login oder VPN befindet, müssen Sie den HTML-Code installieren. to.design Chrome Extension zusätzlich zum Figma-Plugin. Klicken Sie hier, um die Erweiterung zu installieren. Um mehr darüber zu erfahren, klicken Sie hier.
Abschluss Kommentare:
html.to.design ist ein großartiges Plugin, mit dem Sie ganze Webseiten in vollständig bearbeitbare Figma-Designs konvertieren können, die Sie komplett neu gestalten oder für Kommentare und Anmerkungen verwenden können. Es kann auch sehr praktisch sein, Design-Assets einfach und schnell aus dem Web zu löschen.
