Verwendung von 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 Angriff zu nehmen. Mit diesen Kits erhalten Sie Zugriff auf einige nützliche Ressourcen, die Sie ändern und für Ihr Website- oder App-Design verwenden können.

Wenn Sie mit der Software noch nicht vertraut sind und nicht sicher sind, wie Sie UI-Kits in Adobe XD verwenden sollen, sind Sie hier richtig. Ich zeige Ihnen, wie Sie UI-Kits in der Software installieren und dann die enthaltenen Ressourcen für Ihr Projekt verwenden können.

Auch auf

Konvertieren von Fotos im Stapel mit Adobe Bridge

Herunterladen von UI-Kits in Adobe XD

Schauen 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 auf eine der drei verfügbaren Optionen.

Für diesen Artikel werde ich das Google Material UI-Kit auswählen. 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, auf 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 die einzelnen Zeichenflächen zu vergrößern / zu verkleinern.

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

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.

Auf der Website stehen einige großartige Optionen zur Auswahl, einschließlich dieses wirklich coolen Movie Magic-UI-Kits, das aussieht wie ein Heads-up-Display.

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

Verwendung von UI-Kits in Adobe XD

Führen Sie die folgenden einfachen Schritte aus, um UI-Kits in Ihrem Projekt zu verwenden:

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

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

Schritt 3: Öffnen Sie anschließend 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 UI-Kit für Google Material. Das Element enthält Hilfslinien, mit denen Sie weitere Ebenen platzieren können. Wenn Sie diese jedoch nicht verwenden möchten, können Sie sie einfach entfernen, indem Sie den nächsten Schritt ausführen.

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

Schritt 6: Kehren Sie nun zum UI-Kit zurück, um ein anderes 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 grundlegenden Toast für diesen Artikel erstellen, für den ich einen der Dialoge verwenden werde.

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

Schritt 8: Um nun jedes Element im Toast zu bearbeiten, doppelklicken Sie auf das Textfeld und geben Sie den gewünschten Text ein. Zuerst ändern wir den Titel des Toasts.

Ändern Sie als Nächstes den Inhalt des Texts, 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 dem Bearbeiten des Texts fertig sind, können Sie die Farbe und Deckkraft des Texts ändern. Um die Deckkraft zu ändern, bewegen Sie einfach den Schieberegler unter der Option Deckkraft in der Symbolleiste nach rechts.

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

Auf diese Weise können Sie nicht nur den Text bearbeiten. Sie können auch die Farbe und Deckkraft fast aller Elemente im Dialogfeld ändern. Dies ist ideal, wenn Sie ein eindeutiges Farbschema verwenden möchten.

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

Auch auf

#Grafikdesign

Klicken Sie hier, um unsere Seite mit Grafikdesignartikeln anzuzeigen

Vervollkommnen Sie Ihr Design mit UI-Kits

Nachdem Sie nun wissen, wie Sie UI-Kits in Adobe XD herunterladen und verwenden, werden Sie mit Sicherheit in kürzester Zeit erstaunliche Designs hervorbringen. Diese UI-Kits sind auf jeden Fall sehr praktisch und helfen Ihnen, direkt zu Ihrem Projekt zu gelangen, ohne sich um die Gestaltung der einzelnen UI-Elemente kümmern zu müssen.

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