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 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.


So verwenden Sie Ui-Kits in Adobe Xd Empfohlen

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.


Verwenden Sie Ui-Kits Adobe Xd 1

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


Verwenden Sie Ui-Kits Adobe Xd 2

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.


Verwenden Sie Ui-Kits Adobe Xd 3

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.


Verwenden Sie Ui-Kits Adobe Xd 4

Sie können die Strg-Taste gedrückt halten und das Scrollrad bewegen, um zu vergrößern/verkleinern, um alle einzelnen Zeichenflächen anzuzeigen.


Verwenden Sie Ui-Kits Adobe Xd 5

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


Verwenden Sie Ui-Kits Adobe Xd 8

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.


Verwenden Sie Ui-Kits Adobe Xd 9

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


Verwenden Sie Ui-Kits Adobe Xd 11

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.


Verwenden Sie Ui-Kits Adobe Xd 12

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


Verwenden Sie Ui-Kits Adobe Xd 13

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


Verwenden Sie Ui-Kits Adobe Xd 14

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


Verwenden Sie Ui-Kits Adobe Xd 15

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.


Verwenden Sie Ui-Kits Adobe Xd 16

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.


Verwenden Sie Ui-Kits Adobe Xd 17

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.


Verwenden Sie Ui-Kits Adobe Xd 18

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.


Verwenden Sie Ui-Kits Adobe Xd 19

Als nächstes ändern Sie den Inhalt des Hauptteils, indem Sie auf das Textfeld doppelklicken und eingeben, was Sie hinzufügen möchten.


Verwenden Sie Ui-Kits Adobe Xd 20

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.


Verwenden Sie Ui-Kits Adobe Xd 21

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.


Verwenden Sie Ui-Kits Adobe Xd 23

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.


Verwenden Sie Ui-Kits Adobe Xd 24

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.

Verwandt :  So scannen Sie Dokumente direkt auf iCloud Drive auf dem iPhone
Moyens Staff
Moyens I/O-Personal. motivierte Sie und gab Ratschläge zu Technologie, persönlicher Entwicklung, Lebensstil und Strategien, die Ihnen helfen werden.