So verwenden Sie UI-Kits in Adobe XD

Für diejenigen, die sich für Webdesign interessieren, sind UI-Kits in Adobe XD eine großartige Möglichkeit, ein neues Designprojekt in Gang zu bringen. Mit diesen Kits erhalten Sie Zugriff auf einige praktische Ressourcen, die Sie ändern und für Ihr Website- oder App-Design verwenden können.

Wenn Sie neu in der Software sind und sich nicht sicher sind, wie Sie UI-Kits in Adobe XD verwenden, sind Sie hier genau richtig. In diesem Artikel zeige ich Ihnen, wie Sie UI-Kits in der Software installieren und dann die enthaltenen Ressourcen für Ihr Projekt verwenden können.

So laden Sie UI-Kits in Adobe XD herunter

Lassen Sie uns zunächst einen Blick darauf werfen, wie Sie UI-Kits in Adobe XD direkt aus der Software herunterladen können. Befolgen Sie einfach diese Schritte, um loszulegen:

Schritt 1: Klicken Sie auf die Hamburger-Menüschaltfläche in der oberen linken Ecke der Software.

Schritt 2: Scrollen Sie im Menü nach unten zur Option Get UI Kits und klicken Sie dann auf eine der drei verfügbaren Optionen.

Für diesen Artikel wähle ich das Google Material UI-Kit. Abhängig von Ihrem Projekt können Sie jedoch entweder das Apple iOS- oder das Microsoft Windows-Kit auswählen. Dadurch wird eine offizielle Webseite geöffnet, von der Sie die UI-Kits kostenlos herunterladen können.

Schritt 3: Suchen Sie das Adobe XD UI-Kit auf der folgenden Webseite und laden Sie es auf Ihr System herunter.

Schritt 4: Öffnen Sie nun die heruntergeladene Datei in Adobe XD und Sie werden mit einer Reihe von Zeichenflächen begrüßt, die UI-Ressourcen für die jeweilige Plattform enthalten.

Sie können die Strg-Taste gedrückt halten und das Scrollrad bewegen, um hinein- oder herauszuzoomen, um alle einzelnen Zeichenflächen anzuzeigen.

Wenn Sie stattdessen Wireframes herunterladen möchten, können Sie im Menü Get UI Kits auf die Option Wireframes klicken.

Sie können auch auf der Website von Adobe nach weiteren UI-Kits suchen, indem Sie im Menü „UI-Kits abrufen“ auf die Option „Mehr UI-Kits“ klicken.

Auf der Website stehen einige großartige Optionen zur Auswahl, darunter dieses wirklich coole Movie Magic UI-Kit, das wie ein Heads-up-Display aussieht.

Nachdem Sie nun wissen, wie Sie UI-Kits herunterladen, sehen wir uns an, wie Sie sie in Ihren Projekten verwenden können.

So verwenden Sie UI-Kits in Adobe XD

Um UI-Kits in Ihrem Projekt zu verwenden, folgen Sie einfach diesen einfachen Schritten:

Schritt 1: Zoomen Sie auf das UI-Element, das Sie in Ihrem Projekt verwenden möchten, und klicken Sie auf seinen Titel, um es auszuwählen.

Schritt 2: Kopieren Sie nun das Element mit der Tastenkombination Strg+C.

Schritt 3: Öffnen Sie dann ein neues Adobe XD-Projekt über das Menü.

Schritt 4: Fügen Sie hier das UI-Element mit der Tastenkombination Strg+V ein.

Für diesen Artikel verwende ich das Mobile Dark-Element aus dem Google Material UI-Kit. Das Element enthält Hilfslinien, die Ihnen beim Platzieren weiterer Ebenen helfen . Wenn Sie sie jedoch nicht verwenden möchten, können Sie sie einfach entfernen, indem Sie dem nächsten Schritt folgen.

Schritt 5: Um Hilfslinien zu entfernen, klicken Sie auf das Schlosssymbol in der oberen linken Ecke und dann auf Löschen. Sie können diesen Schritt überspringen, wenn Sie die Hilfslinien verwenden möchten, um mehr Objekte genau im Element zu platzieren.

Schritt 6: Gehen Sie nun zurück zum UI-Kit, um ein weiteres Element auszuwählen, das dieser Seite hinzugefügt werden soll. Klicken Sie erneut auf den Titel des Elements und kopieren Sie es mit der Tastenkombination Strg+C.

Ich werde einen einfachen Toast für diesen Artikel erstellen, für den ich einen der Dialoge verwenden werde.

Schritt 7: Fügen Sie das neue Element auf das vorherige Element ein und richten Sie es dann gemäß den Hilfslinien aus.

Schritt 8: Um nun jedes Element im Toast zu bearbeiten, doppelklicken Sie auf das Textfeld und geben Sie dann den Text ein, den Sie verwenden möchten. Lassen Sie uns zuerst den Titel des Toasts ändern.

Ändern Sie als Nächstes den Inhalt des Körpers, indem Sie auf das Textfeld doppelklicken und alles eingeben, was Sie hinzufügen möchten.

Auf die gleiche Weise können Sie auch den Text der Schaltflächen ändern. Sobald Sie mit der Bearbeitung des Textes fertig sind, können Sie die Farbe und Deckkraft des Textes ändern. Um die Deckkraft zu ändern, bewegen Sie einfach den Schieberegler unter der Option Deckkraft in der Symbolleiste nach rechts.

Um die Farbe des Textes zu ändern, klicken Sie auf das Rechteck neben der Option „Füllung“ und wählen Sie dann eine neue Farbe aus der Farbauswahl aus.

Und es ist nicht nur der Text, den Sie auf diese Weise bearbeiten können. Sie können auch die Farbe und Deckkraft fast aller Elemente im Dialogfeld ändern, was großartig ist, wenn Sie ein einzigartiges Farbschema wünschen.

Wenn Sie mit dem Ergebnis zufrieden sind, können Sie Ihre Datei einfach speichern, indem Sie im Menü auf die Option Speichern unter klicken oder die Tastenkombination Umschalt+Strg+S verwenden.

Perfektionieren Sie Ihr Design mit UI-Kits

Jetzt, da Sie wissen, wie man UI-Kits in Adobe XD herunterlädt und verwendet, bin ich sicher, dass Sie im Handumdrehen erstaunliche Designs erstellen werden. Diese UI-Kits sind definitiv sehr praktisch und helfen Ihnen, direkt zu Ihrem Projekt zu gelangen, ohne sich Gedanken über das Entwerfen der einzelnen UI-Elemente machen zu müssen.

Als nächstes: Sie haben ein Projekt auf Adobe XD abgeschlossen und wissen nicht, wie Sie es in HTML exportieren können? Im nächsten Artikel finden Sie eine einfache Schritt-für-Schritt-Anleitung.