Für diejenigen, die sich für Webdesign interessieren, sind UI-Kits in Adobe XD eine großartige Möglichkeit, ein neues Designprojekt zu starten. 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 noch nicht mit der Software vertraut sind und sich nicht sicher sind, wie Sie UI-Kits in Adobe XD verwenden, sind Sie bei uns 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.
So laden Sie UI-Kits in Adobe XD herunter
Sehen wir uns zunächst an, 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 UI-Kits abrufen 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 zu vergrößern/verkleinern, 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 Adobe-Website nach zusätzlichen UI-Kits suchen, indem Sie im Menü UI-Kits abrufen auf die Option Weitere UI-Kits klicken.
Die Website bietet 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: Vergrößern Sie 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 über das Menü ein neues Adobe XD-Projekt.
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 den nächsten Schritt ausführen.
Schritt 5: Um Anleitungen 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. Ändern wir zunächst den Titel des Toasts.
Als nächstes ändern Sie den Inhalt des Hauptteils, indem Sie auf das Textfeld doppelklicken und eingeben, was Sie hinzufügen möchten.
Auf die gleiche Weise können Sie auch den Text der Schaltflächen ändern. Wenn 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üllen und wählen Sie dann eine neue Farbe aus der Farbauswahl.
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, speichern Sie Ihre Datei einfach, indem Sie im Menü auf die Option Speichern unter klicken oder die Tastenkombination Umschalt+Strg+S verwenden.
Perfektionieren Sie Ihr Design mit UI-Kits
Da Sie jetzt wissen, wie Sie UI-Kits in Adobe XD herunterladen und verwenden, werden Sie in kürzester Zeit mit der Erstellung erstaunlicher Designs beginnen. Diese UI-Kits sind definitiv sehr praktisch und helfen Ihnen, direkt zu Ihrem Projekt zu gelangen, ohne sich um das Design der einzelnen UI-Elemente kümmern zu müssen.
Next Up: Sie haben ein Projekt in Adobe XD abgeschlossen und wissen nicht, wie Sie es in HTML exportieren? Im nächsten Artikel finden Sie eine einfache Schritt-für-Schritt-Anleitung.
