So erstellen Sie Mockups und fügen sie Ihren Figma-Designs mit Plugins hinzu

Wenn Sie ein Designer sind, der seine Designs gerne mithilfe von Modellen präsentiert, kann es einfach sein, sie in Figma zu erstellen.

Anstatt Ihre Figma-Designs zu speichern und zu einem anderen Programm zu wechseln, um ein Mockup zu erstellen, können Sie ganz einfach Mockup-Plugins in Figma herunterladen. Es gibt viele Plugin-Optionen in verschiedenen Stilen, aber sie sind alle einfach zu verwenden und in größere Designs zu integrieren.

So finden und laden Sie Figma-Plugins herunter

Das Herunterladen und Installieren eines Plugins in Figma ist dasselbe, unabhängig davon, ob Sie die App oder die Browserversion verwenden. Aus Die Browser-Startseite von Figma, klicken Community > Plugins und Widgets, und durchsuchen Sie die Liste oder verwenden Sie die Suchleiste.

Aus Figmas App, bietet die Homepage die gleiche Option wie der Browser, um auf die Community-Seite zu gelangen. Wenn Sie sich jedoch auf einer Designseite befinden, können Sie auf das Figma-Logo klicken Plugins. Wenn Sie bereits Plugins installiert haben, werden sie hier aufgelistet.

Um mehr zu finden, wählen Sie Durchsuchen Sie Plugins in der Community. Dadurch gelangen Sie zur Community-Seite innerhalb der App, wo Sie nach anderen Plugins suchen können.

Auf der Community-Seite finden Sie für jedes Plugin einen kleinen Klappentext, das Datum der letzten Aktualisierung und wie oft jedes Plugin heruntergeladen wurde. Für weitere Informationen zu jedem Plugin – wie z. B. Kommentare von Benutzern und Gebrauchsanleitungen – gelangen Sie durch Klicken auf den Namen auf die Informationsseite dieses Plugins.

Wenn Sie ein Plugin gefunden haben, das Sie herunterladen möchten, klicken Sie auf das blaue Installieren Taste.

Wenn Sie sich nicht sicher sind, wonach Sie suchen sollen, finden Sie hier unsere fünf beliebtesten Mockup-Plugins. Es gibt noch viele mehr, aber es ist gut, irgendwo anzufangen.

• Tonmodelle 3D
• Winkel-Mockups
• MockRocket - 3D-Modelle
• Attrappe, Lehrmodell, Simulation
• Vectary 3D-Elemente

So verwenden Sie Mockup-Plugins in Figma

Der Prozess zum Installieren von Plugins ist unabhängig von der Art des Plugins, das Sie verwenden, gleich, aber es kann einige Unterschiede in der Art und Weise geben, wie sie verwendet werden. Aus diesem Grund ist es immer am besten, die Community-Seite des jeweiligen Plugins für zusätzliche Details zu lesen.

In Figma können Sie vorgefertigte Rahmengrößen für bestimmte Bildschirme wie das iPhone 13 oder ein großes oder kleines Android auswählen. Sie sollten Ihr Design für die beabsichtigte Gerätegröße erstellen, anstatt zu versuchen, die Größe der Designs zu ändern später an Ihr Mockup anpassen, aber einige Mockups erlauben leicht unterschiedliche Größen ohne Verzerrung.

Sie können sogar einen Screenshot von Ihrem Gerät verwenden, der die perfekte Größe für ein Mockup desselben Geräts hat.

Mockups sind normalerweise für statische Bildschirmdesigns gedacht, obwohl Sie dies können Erstellen Sie ein Videomodell in Photoshop. Wir werden uns auf Figma-Mockups für Handheld-Geräte konzentrieren, aber Sie können Erstellen Sie ein Mockup von Grund auf neu in Photoshop für andere Geräte. Wenn Ihr Bildschirmdesign fertig ist, können Sie mit der Erstellung des Produktmodells fortfahren.

Wir zeigen Ihnen, wie Sie drei unserer vorgeschlagenen Plugins verwenden: Clay Mockups 3D, Angle Mockups und Vectory 3D Elements. Lassen Sie uns gleich einsteigen.

Tonmodelle 3D

Wählen Sie bei geöffnetem Design den Rahmen aus und gehen Sie dann zu Plugins und wähle Tonmodelle 3D. Dies öffnet ein Fenster, in dem Sie das Gerät für das Mockup auswählen können. Ihr Design sollte auf dem Bildschirm des Modells in diesem Fenster angezeigt werden.

Sie können den Winkel des Modells sowie die Farbe in diesem Fenster ändern. Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie Als Bild speichern.

Sie können jederzeit durch Klicken zurückgehen und die Farbe oder andere Aspekte ändern Modell bearbeiten unter Plugin im rechten Menü. Jetzt können Sie Ihr Plugin zu größeren Designs wie Präsentationen oder Ihrem Portfolio hinzufügen.

Winkel-Mockups

Um Angle Mockups zu verwenden, müssen Sie ein Angle-Konto erstellen, um die Mockup-Bibliothek von ihrer Website herunterzuladen. An Angles Website, klicken Einloggen, wodurch ein Popup angezeigt wird, auf das Sie klicken können Anmeldung und fügen Sie Ihre Daten hinzu, um ein kostenloses Konto zu erstellen.

Klicken Sie nach der Anmeldung auf, um die Mockups herunterzuladen Modelle > Beispiel herunterladen. Für einen umfassenderen Satz von Modellen können Sie für den Premium-Zugang bezahlen, aber das mit dem kostenlosen Konto angebotene Beispiel ist gut genug.

Entpacken Sie die Datei nach dem Herunterladen. Diese enthält Beispiele, die Sie in Figma, Sketch und Adobe XD verwenden können, sowie einige kostenlose Hintergrundbilder. Offen WinkelFigma. Sie finden zwei Videos, die Ihnen bei der Verwendung der Mockups helfen, sowie vier Sätze von Figma-Dateien mit verschiedenen Mockups.

Um die Dateien in Ihr Figma-Konto zu importieren, gehen Sie zum Figma-Browser und klicken Sie auf Ihr Profil. Sie können über die App darauf zugreifen, indem Sie zu gehen Datei > Dateibrowser öffnen. Ziehen Sie jede Angle-Datei per Drag-and-Drop in Figma. Öffnen Sie dann die Angle-Datei, indem Sie auf der Figma-Browserseite darauf doppelklicken.

Suchen Sie den Gerätewinkel, den Sie für Ihr Mockup verwenden möchten, und kopieren Sie ihn (Cmd + C für Mac bzw CTrl + C für Windows). Füge es ein (CMD + V für Mac bzw Ctrl + V für Windows) in dieselbe Zeichenfläche wie Ihr Hauptdesign.

Erweitern Sie in der Ebenenpalette die Ebenen des Mockup-Bildschirms, bis Sie die Ebene mit einem Bildsymbol mit dem Titel sehen Zeichenfläche hier platzieren. Wählen Sie diese Ebene aus. Dann geh zu Plugins > Angle Mockups und wählen Sie Ihr Originaldesign im Popup-Fenster aus.

Dies sollte im Vorschaufenster im Winkel Ihres Mockups angezeigt werden, aber es zeigt nicht das Gerät des Mockups. Klicken Sich bewerben und Ihr Bildschirm sollte sich jetzt im richtigen Winkel auf dem Gerätemodell befinden.

Vectary 3D-Elemente

Vectary 3D funktioniert ähnlich wie Clay Mockups 3D, obwohl es weniger Optionen für Gerätemodelle bietet, da es auch eine Vielzahl von 3D-Assets bietet. Öffnen Sie Ihr Design, wählen Sie den Rahmen aus und gehen Sie zu Plugins > Vectary 3D-Elemente.

Suchen Sie das Mockup, das Sie verwenden möchten, in der Popup-Bibliothek und klicken Sie dann darauf Rahmen laden. Sobald Ihr Design auf dem Bildschirm des Geräts erscheint, klicken Sie darauf Bild exportieren.

Jetzt haben Sie ein 3D-Modell Ihres Designs auf dem Gerät Ihrer Wahl. Sie können es einfach zu einem anderen Design hinzufügen.

Sobald Ihr Modell fertig ist, können Sie es als PNG-Datei speichern, um es einfach in einem anderen Design zu verwenden. Klicken Datei > Exportieren. Wählen Sie das gewünschte Bild zum Exportieren aus und klicken Sie dann auf Export für Ihr endgültiges PNG.

Verleihen Sie Ihren Designs Realismus mit Figma Mockups

Es gibt unzählige Verwendungsmöglichkeiten zum Erstellen von Mockups für Ihre Designs. Mit verschiedenen Figma-Plugins finden Sie eine große Auswahl an Stilen, mit denen Sie arbeiten können, die Sie zu Ihren Präsentationen, Ihrem Portfolio hinzufügen oder einfach nur zum Spaß erstellen können, um Ihre Designarbeit zu präsentieren.

Mit ein paar Unterschieden in der Anwendung sind Figma-Mockup-Plugins einfach zugänglich und zu verwenden, also warum nicht ausprobieren?

So erstellen Sie Master-Vorlagen für Präsentationen in Figma

Lesen Sie weiter