Come utilizzare i kit dellinterfaccia utente in Adobe XD

Per chi è interessato alla progettazione web, i kit dell'interfaccia utente in Adobe XD sono un ottimo modo per avviare un nuovo progetto di design. Con questi kit, hai accesso ad alcune utili risorse che puoi modificare e utilizzare per la progettazione del tuo sito Web o app.

Se non conosci il software e non sei sicuro di come utilizzare i kit dell'interfaccia utente in Adobe XD, sei nel posto giusto. In questo articolo, ti mostrerò come installare i kit dell'interfaccia utente nel software e quindi utilizzare le risorse incluse per il tuo progetto.

Come scaricare i kit dell'interfaccia utente in Adobe XD

Innanzitutto, diamo un'occhiata a come scaricare i kit dell'interfaccia utente in Adobe XD, direttamente dal software. Basta seguire questi passaggi per iniziare:

Passaggio 1: fare clic sul pulsante del menu dell'hamburger nell'angolo in alto a sinistra del software.

Passaggio 2: nel menu, scorri verso il basso fino all'opzione Ottieni kit dell'interfaccia utente e quindi fai clic su una delle tre opzioni disponibili.

Per questo articolo, sceglierò il kit Google Material UI. Tuttavia, a seconda del tuo progetto, puoi selezionare i kit Apple iOS o Microsoft Windows. Si aprirà una pagina Web ufficiale da cui è possibile scaricare gratuitamente i kit dell'interfaccia utente.

Passaggio 3: individua il kit dell'interfaccia utente di Adobe XD nella seguente pagina Web e scaricalo sul tuo sistema.

Passaggio 4: ora apri il file scaricato in Adobe XD e verrai accolto con un sacco di tavole da disegno contenenti risorse dell'interfaccia utente per la rispettiva piattaforma.

Puoi tenere premuto il pulsante Ctrl e spostare la rotellina di scorrimento per ingrandire/ridurre per vedere tutte le singole tavole da disegno.

Se invece desideri scaricare Wireframe, puoi fare clic sull'opzione Wireframe nel menu Ottieni kit UI.

Puoi anche cercare kit UI aggiuntivi sul sito Web di Adobe facendo clic sull'opzione Altri kit UI nel menu Ottieni kit UI.

Il sito Web ha alcune fantastiche opzioni tra cui scegliere, incluso questo fantastico kit per l'interfaccia utente di Movie Magic che sembra un display heads-up.

Ora che sai come scaricare i kit dell'interfaccia utente, diamo un'occhiata a come utilizzarli nei tuoi progetti.

Come utilizzare i kit dell'interfaccia utente in Adobe XD

Per utilizzare i kit dell'interfaccia utente nel tuo progetto, segui questi semplici passaggi:

Passaggio 1: ingrandisci l'elemento dell'interfaccia utente che desideri utilizzare nel progetto e fai clic sul titolo per selezionarlo.

Passaggio 2: ora copia l'elemento usando la scorciatoia Ctrl+C.

Passaggio 3: quindi apri un nuovo progetto Adobe XD dal menu.

Passaggio 4: qui, incolla l'elemento dell'interfaccia utente utilizzando la scorciatoia Ctrl+V.

Per questo articolo, utilizzerò l'elemento Mobile Dark dal kit Google Material UI. L'elemento include guide per aiutarti a posizionare più livelli , ma se non vuoi usarli puoi rimuoverli facilmente seguendo il passaggio successivo.

Passaggio 5: per rimuovere le guide, fai clic sull'icona del lucchetto nell'angolo in alto a sinistra e quindi premi Elimina. Puoi saltare questo passaggio se desideri utilizzare le guide per posizionare più oggetti nell'elemento con precisione.

Passaggio 6: ora torna al kit dell'interfaccia utente per selezionare un altro elemento da aggiungere a questa pagina. Ancora una volta, fai clic sul titolo dell'elemento e copialo usando la scorciatoia Ctrl+C.

Creerò un brindisi di base per questo articolo per il quale userò una delle finestre di dialogo.

Passaggio 7: incolla il nuovo elemento sull'elemento precedente e quindi allinealo secondo le guide.

Passaggio 8: ora per modificare ogni elemento nel brindisi, fai doppio clic sulla casella di testo e quindi inserisci il testo che desideri utilizzare. Per prima cosa, cambiamo il titolo del brindisi.

Quindi, modifica il contenuto del corpo facendo doppio clic sulla casella di testo e digitando ciò che desideri aggiungere.

Allo stesso modo puoi anche modificare il testo dei pulsanti. Una volta che hai finito di modificare il testo, puoi cambiare il colore e l'opacità del testo. Per modificare l'opacità, sposta il cursore sotto l'opzione Opacità nella barra degli strumenti a destra.

Per cambiare il colore del testo, fai clic sul rettangolo accanto all'opzione Riempimento, quindi seleziona un nuovo colore dal selettore colore.

E non è solo il testo che puoi modificare in questo modo. Puoi anche cambiare il colore e l'opacità di quasi tutti gli elementi nella finestra di dialogo, il che è fantastico se stai cercando una combinazione di colori unica.

Una volta che sei soddisfatto del risultato, vai avanti e salva il file facendo clic sull'opzione Salva con nome nel menu o usando la scorciatoia Maiusc+Ctrl+S.

Perfeziona il tuo design utilizzando i kit dell'interfaccia utente

Ora che sai come scaricare e utilizzare i kit dell'interfaccia utente in Adobe XD, sono sicuro che inizierai a sfornare fantastici design in pochissimo tempo. Questi kit dell'interfaccia utente sono decisamente molto utili e ti aiutano ad arrivare direttamente al tuo progetto senza preoccuparti di progettare ogni elemento dell'interfaccia utente.

Prossimo: hai completato un progetto su Adobe XD e non sai come esportarlo in HTML? Dai un'occhiata al prossimo articolo per un semplice tutorial passo-passo.