Come usare i kit di interfaccia utente in Adobe XP

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

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

Anche su

Come convertire in serie le foto con Adobe Bridge

Come scaricare i kit di interfaccia utente in Adobe XD

Innanzitutto, diamo un'occhiata a come è possibile scaricare i kit di interfaccia utente in Adobe XD, direttamente dal software. Segui questi passaggi per iniziare:

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

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

Per questo articolo, sceglierò il kit dell'interfaccia utente dei materiali di Google. Tuttavia, a seconda del progetto, è possibile selezionare i kit Apple iOS o Microsoft Windows. Verrà aperta una pagina Web ufficiale da cui è possibile scaricare gratuitamente i kit UI.

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

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

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

Se desideri invece scaricare Wireframe, puoi fare clic sull'opzione Wireframes nel menu Ottieni kit di interfaccia utente.

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

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

Ora che sai come scaricare i kit UI, diamo un'occhiata a come puoi usarli nei tuoi progetti.

Come utilizzare i kit di interfaccia utente in Adobe XD

Per usare i kit UI nel tuo progetto, segui questi semplici passaggi:

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

Passo 2: Ora copia l'elemento usando il collegamento Ctrl + C.

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

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

Per questo articolo, userò l'elemento Mobile Dark dal kit UI materiale di Google. 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, fare clic sull'icona a forma di lucchetto nell'angolo in alto a sinistra, quindi premere Elimina. È possibile saltare questo passaggio se si desidera utilizzare le guide per posizionare con precisione più oggetti nell'elemento.

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

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

Passaggio 7: incollare il nuovo elemento sull'elemento precedente e quindi allinearlo secondo le guide.

Passaggio 8: ora per modificare ciascun elemento nel toast, fai doppio clic sulla casella di testo e inserisci il testo che desideri utilizzare. Innanzitutto, cambiamo il titolo del brindisi.

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

Puoi anche cambiare il testo dei pulsanti nello stesso modo. Una volta terminata la modifica del testo, puoi cambiare il colore e l'opacità del testo. Per modificare l'opacità, basta spostare 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 Riempi, 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 oggetti 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 tuo file facendo clic sull'opzione Salva con nome nel menu o usando il tasto Maiusc + Ctrl + S.

Anche su

#disegno grafico

Clicca qui per vedere la nostra pagina di articoli di grafica

Perfeziona il tuo design usando i kit UI

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

Next up: Hai completato un progetto su Adobe XD e non sai come esportarlo in HTML? Consulta il prossimo articolo per un semplice tutorial passo-passo.