So konvertieren Sie jede Website in ein Figma-Design

Figma ist ein großartiges Tool, das sich schnell zu einem Favoriten unter UX/UI- und Webdesignern entwickelt. Mit diesem kostenlosen browserbasierten Tool können Sie schnell und einfach responsive Webdesigns erstellen.

Während die meisten Leute ihre Designs in Figma von Grund auf neu erstellen, können Sie sich von echten Websites inspirieren lassen und ganz einfach ein Figma-Design direkt aus einer vorhandenen HTML-Seite erstellen. Hier ist, wie es geht.

Warum Sie Figma-Designs aus HTML erstellen sollten

Es gibt viele Gründe, warum Sie ein vorhandenes Webdesign als Figma-Design replizieren möchten. Wenn Sie dies über das Figma-Plugin tun, sparen Sie Zeit und können sich auf die Feinabstimmung Ihres Designs konzentrieren.

Das Üben von Webdesign durch die Neuerstellung bestehender Webseiten ist eine großartige Möglichkeit, von den Meistern zu lernen. Sie können auch das HTML to Figma-Designtool verwenden, wenn Sie zuvor eine Webseite entworfen und veröffentlicht haben, auf die Sie keinen Zugriff mehr haben. Anstatt es von Grund auf neu zu gestalten, können Sie Zeit sparen, indem Sie es wieder in Figma konvertieren, um erneut daran zu arbeiten.

Jetzt, da Sie wissen, warum dieses Tool praktisch sein kann, ist es an der Zeit zu lernen, wie es funktioniert.

So konvertieren Sie jede Website in ein Figma-Design

Um mit Figma-basierten Designarbeiten zu beginnen, müssen Sie Figma öffnen und sich anmelden oder registrieren. Sie können die Browserversion Figma verwenden oder die Desktop-App herunterladen ; Beide arbeiten für dieses Projekt auf die gleiche Weise.

Öffnen Sie eine neue Designdatei, um Ihr HTML-to-Figma-Designprojekt zu beginnen.

Schritt 1: Laden Sie das html.to.design-Plugin herunter

Um eine Live-Website direkt in ein Figma-Design umwandeln zu können, benötigen Sie ein Plugin. Es gibt unzählige Plugins auf Figma, die Ihnen bei Ihren Designs helfen, einschließlich Plugins zum Erstellen von Modellen für Telefone und Geräte. Sie können Ihr konvertiertes Website-Design später zu einem Mockup hinzufügen, wenn Sie möchten.

Um das Plugin herunterzuladen, wählen Sie das Figma-Menü (Figma-Logo) > Plugins > Weitere Plugins finden . Alternativ können Sie Ressourcen > Plugins auswählen . Geben Sie bei beiden Optionen in die Suchleiste html.to.design ein .

Suchen Sie die von divRIOTS bereitgestellte Option und wählen Sie Ausführen . Dadurch wird das Plugin als Dialogfeld auf Ihrer Figma-Leinwand geöffnet.

Schritt 2: Fügen Sie die Website-URL ein

Das html.to.design-Plugin ist kostenlos, bietet aber eine Pro-Version an. Mit der kostenlosen Version können Sie Ihren Designprozess vollständig abschließen.

Suchen Sie die Website, für die Sie ein Figma-Design erstellen möchten. Sie sollten eine öffentliche Website verwenden – keine Webseite, auf die nur durch Einloggen zugegriffen werden kann. Wir werden unsere Homepage MakeUseOf.com verwenden.

Kopieren Sie die vollständige URL und fügen Sie sie in das Importfeld auf Figma ein, wobei Sie den Platzhalter der Apple-Website ersetzen.

Schritt 3: Laden Sie Ihr Design

Nachdem Sie die URL der Website eingefügt haben, öffnen Sie die Einstellungen unter dem Importfeld, um die Größe des Designs auszuwählen. Sie können das Design für eine Vielzahl von Geräten importieren, aber Sie werden erfolgreicher sein, wenn Sie ein Desktop-Gerät auswählen, wenn Sie eine Desktop-URL verwendet haben, und einen besseren Erfolg haben, wenn Sie eine mobile URL für mobile Geräte verwenden.

Es gibt auch benutzerdefinierte Optionen für Geräte oder Größen, die nicht als Standardoptionen verfügbar sind. Wir wählen das MacBook Pro 14″ mit einem Light -Design.

Nachdem Sie Ihre Geräte- und Anzeigeeinstellungen festgelegt haben, wählen Sie Importieren aus, um Ihr HTML-Design in Figma zum Leben zu erwecken. Warten Sie, bis die Ladeleiste vollständig ist, damit das Figma-Design ausgefüllt wird.

Je nachdem, welche Website Sie verwendet haben, bemerken Sie möglicherweise ein Popup-Fenster, in dem erklärt wird, dass einige Schriftarten ersetzt werden mussten. Dies ist auf das Urheberrecht für lizenzierte Schriftarten zurückzuführen. Figma ersetzt sie durch Schriftarten, auf die Sie Zugriff haben.

Verlassen Sie alle Pop-ups und verlassen Sie dann den Plugin-Dialog, um Ihr neues Design in seiner vollständigen Form zu sehen.

Schritt 4: Bearbeiten Sie Ihr Figma-Design

Von hier aus können Sie beginnen, Ihre Figma-Webseite nach Belieben zu bearbeiten. Wie bereits erwähnt, können Sie mit dieser HTML-zu-Figma-Funktion erfahren, wie vorhandene Webseiten gestaltet wurden, um Sie dazu zu inspirieren, Ihre eigenen von Grund auf neu zu erstellen. Sie können das Basisdesign der Website verwenden und eine Präsentation mit Übergängen in Figma erstellen oder einfach lernen, wie Webseiten von anderen Designern eingerichtet werden.

Im linken Menü finden Sie die Ebenen. Da dies direkt aus HTML konvertiert wurde, sind die Ebenen möglicherweise detaillierter – oder sogar verwirrend – als das, was Sie beim Selbstdesign gewohnt sind. Wählen Sie einen Abschnitt im Design aus, um die hervorgehobenen Ebenen im linken Menü zu finden.

Sie können Bilder ersetzen, Titel und Fließtext neu eingeben oder Dinge innerhalb des Layouts verschieben, indem Sie auf den Designaspekt doppelklicken. Das html.to.figma-Plugin repliziert keine Animations- oder Übergangseinstellungen, wenn auf Links geklickt oder Seiten gewechselt werden. Sie können diese selbst hinzufügen.

So konvertieren Sie eine private Webseite

Der Großteil des Prozesses zum Erstellen einer privaten Website – einer Website, für deren Zugriff ein Konto erforderlich ist – im Vergleich zu einer öffentlichen Website ist derselbe. Anstatt die URL einzufügen, müssen Sie jedoch stattdessen eine Chrome-Erweiterung verwenden, die eine Datei generiert.

Öffnen Sie zunächst Figma und das html.to.figma-Plugin auf die gleiche Weise wie zuvor.

Schritt 1: Laden Sie die Chrome-Erweiterung herunter und führen Sie sie aus

Sie können diese Erweiterung nur mit Google Chrome verwenden, also öffnen Sie Chrome, um zu beginnen. Wählen Sie im Dialogfeld des Figma-Plugins die Chrome-Erweiterung – oder öffnen Sie die Erweiterung hier in Ihrem Chrome-Browser.

Wählen Sie Zu Chrome hinzufügen > Erweiterung hinzufügen aus, um die Erweiterung zu Ihrem Browser hinzuzufügen.

Navigieren Sie mit der hinzugefügten Erweiterung zu der privaten Website oder Seite, deren Design Sie replizieren möchten – wir verwenden eine Instagram-Seite – und wählen Sie die Erweiterung aus. Eingeblendete Erweiterungen finden Sie unter dem Puzzleteil-Symbol in Ihrem Browser.

Sie werden gefragt, ob Sie die gesamte Seite oder nur das, was angezeigt wird, erfassen möchten. Treffen Sie Ihre Auswahl und die Aufnahme erscheint in Ihren Downloads als. h2d-Datei.

Schritt 2: Ziehen Sie die generierte Datei in das Figma-Plugin

Gehen Sie in Ihrem Browser zu Ihrer Figma-App oder der Figma-Website und ziehen Sie Ihre heruntergeladene Datei. h2d-Datei in die Box. Die Datei wird genauso geladen und generiert wie die Option für öffentliche Websites.

Wie bei der öffentlichen Webseitenversion können Sie auf Aspekte des Designs doppelklicken, um sie zu bearbeiten, oder durch das Menü auf der linken Seite klicken, um zu sehen, wo sie im Layout erscheinen.

Vielleicht möchten Sie dem Webseitendesign neue Designelemente hinzufügen, wie z. B. einen Figma-Milchglaseffekt, oder Sie können sogar Teile des Webseitendesigns als Master-Vorlage für Figma-Präsentationen replizieren. Im Jahr 2022 erwarb Adobe Figma, sodass wir in Zukunft weitere unterhaltsame Möglichkeiten erwarten können, Figma zu verwenden.

Verwenden Sie jede Website als Inspiration für Ihre Figma-Designs

Während Figma hauptsächlich zum Entwerfen von Websites oder UX/UI-Seiten von Grund auf dient, ist es eine großartige Gelegenheit, vorhandene Webseiten zu füllen, um zu sehen, wie sie erstellt wurden. Sie können Ihr Webdesign auch zu einer Nachbildung einer bestehenden Website machen, wenn Sie sich nicht sicher sind, wo Sie mit einer leeren Tafel beginnen sollen.

Ein weiterer guter Grund, warum Sie das html.to.figma-Plugin verwenden sollten, ist, wenn Sie bereits eine Website entworfen haben, zu der Sie den Zugriff verloren haben. Sie können die Seite in Figma füllen und erneut beginnen, ohne tatsächlich von vorne beginnen zu müssen.