Che cos’è Adobe Xd e come impararlo in meno di un’ora

Adobe Xd è probabilmente uno tra i software attualmente più interessanti in circolazione per realizzare prototipi interattivi ad alta e bassa fedeltà.

In questo articolo ti vado a spiegare che cos’è e quali sono le sue funzioni base, seguendo e approfondendo il tutorial inserito all’interno del programma stesso.

Ok, pronto? Allora partiamo!

Iniziamo, ovviamente dalle basi: che cos’è Adobe Xd e a che cosa serve?

Che cos’è Adobe Xd?

Adobe Xd, o eXperience Design (il suo nome completo) fa parte di Adobe Creative Cloud ed è il programma Adobe pensato per fare UX/UI Design.

Se non hai idea di che cosa sia la UX (o User Experience), ti consiglio di andare a leggere questo articolo su Grafigata.

Il UI, User Interface, Design invece, è semplicemente il design delle interfacce grafiche.

Si tratta di un programma estremamente semplice da imparare grazie ad un flusso semplificato e intuitivo, accompagnato da un’interfaccia di immediata lettura.

La cosa davvero interessante di questo strumento è la possibilità di creare dei veri prototipi interattivi per simulare e testare l’esperienza digitale che si sta progettando.

La funzione che ha davvero rivoluzionato il modo di lavorare, a mio avviso, è la possibilità di condividere un mockup responsive in tempo reale con un cliente, un utente specifico o con uno sviluppatore, attraverso la generazione di un web link fruibile da qualsiasi dispositivo dotato di una connessione internet.

Prima del suo arrivo, i Designer più fedeli alla Suite Adobe passavano obbligatoriamente da Illustrator (i più masochisti da Photoshop), con lo sconforto di rallentare le prestazioni del pc e appesantire notevolmente il file, investendo molte ore di lavoro per ottenere un bel file PDF statico.

Chi invece lavora già nel settore della UX/UI, ha sempre dovuto usare diversi software alternativi come Sketch, Invision o Figma che, però, non sono integrati all’interno della suite Adobe.

Un’altra particolarità di Xd è la possibilità di rimodellare l’interfaccia grafica da un formato all’altro (da desktop a tablet, per esempio), in modo snello e immediato.

N.B.: Se stai pensando di passare da desktop a smartphone, fermati subito. Non basta ridimensionare ?

Ok. Abbiamo visto che cos’è Adobe Xd, ora impariamo ad usarlo!

Come imparare ad usare Adobe Xd (in meno di un’ora)

Di seguito, utilizzerò come esempio il progetto offerto da Adobe, in modo da poter avere una panoramica completa delle funzioni principali.

Se seguirai i miei consigli, grazie a questo tutorial, non impiegherai più di un’ora per imparare a mettere in moto e sfruttare questo gioiellino.

Sei pronto/a? Bene, partiamo!

Prima di tutto: scarica Adobe Xd ?‍?

Per iniziare, devi adoperarti della versione gratuita di Xd al sito web di Adobe, che mette a disposizione la creazione di 1 prototipo e 2 GB di spazio cloud, con una buona selezione di font gratuiti.

Una volta installato e aperto il software, ti troverai di fronte ad una schermata con diversi formati preimpostati per specifici device presenti sul mercato (smartphone, tablet o desktop), oppure avrai la possibilità di definire delle dimensioni personalizzate.

Se proprio non sai da dove partire, Adobe ti propone un breve tutorial che spiega passo passo come iniziare, ma dopo aver letto questo articolo su Grafigata non ne avrai bisogno.

Le funzioni base di Adobe Xd

Capisco che tu non veda l’ora di provare forme e colori, ma ci sono alcuni passaggi che è bene conoscere per capire come muoverti all’interno di questo programma.

Potrebbe sembrare banale, ma è bene ricordare che:

• Per spostarti all’interno dello spazio di lavoro: barra spaziatrice + click sinistro del mouse o trackpad, oppure tieni premuta la rotellina del mouse;
• Per zoommare: Ctrl (Cmd) + scroll del mouse (o trackpad) oppure Ctrl (Cmd) + (+/-);
• Ctrl (Cmd) + 3 per zoommare su un oggetto che hai selezionato.

Click sinistro sugli oggetti per selezionarli. Click sinistro + Alt per selezione multipla.

Per selezionare e spostare le tavole di lavoro, click sinistro sul nome della tavola (in alto a sinistra)

UI e UX: le due modalità che governano Xd

L’area di lavoro di Xd si suddivide in 2 modalità:

1. Design
2. Prototype

In alto a sinistra puoi trovare queste due sezioni, tra le quali puoi spostarti liberamente.

Per impostazione predefinita, l’area di lavoro si apre sempre nella modalità Design, quella in cui puoi creare e gestire tutti gli aspetti legati all’interfaccia grafica.

Spostandoti in modalità Prototype, puoi invece controllare il flusso di interazione tra gli elementi grafici e le modalità di transizione delle schermate.

Se vogliamo, possiamo dire che Design ci permette di definire la UI, mentre Prototype la UX.

La modalità Design propone un’ulteriore divisione del pannello di sinistra (dove sono raccolti gli strumenti di lavoro, per intenderci), che puoi gestire in basso a sinistra attraverso due pulsanti:

1. Asset (Alt+cmd+Y): per selezionare gli strumenti grafici
2. Layers (cmd+Y): per gestire le artboard, i livelli e i raggruppamenti.

Come potrai immaginare, per comprendere davvero il funzionamento di un software, non basta leggere un tutorial. Alla fine ci si annoia e basta, lo sappiamo tutti.

Come imparare Adobe Xd in meno di un’ora: esercitiamoci insieme!

Proprio per questo motivo, vorrei presentarti i primi passi, partendo da un piccolo esercizio che possiamo fare insieme.

Come traccia utilizziamo quindi l’esempio Campvibe di Adobe, un’applicazione mobile per il campeggio.

Primo passo: Crea una nuova Artboard (A)

Seleziona lo strumento Artboard dal pannello degli strumenti a sinistra (oppure usa la scorciatoia da tastiera “A”).

Una volta selezionato, nel pannello delle opzioni a destra appariranno diversi modelli di artboard corrispondenti ai dispositivi più utilizzati. Ti basta selezionare il formato e immediatamente apparirà una nuova tavola sullo spazio lavoro.

Se hai necessità di lavorare su formati diversi per lo stesso progetto, non devi fare altro che selezionarli e aggiungerli allo spazio lavoro.

Suggerimento: ti consiglio di rinominare le tue artboard, soprattutto in vista di una fase più avanzata del progetto, che ti porterà ad avere molte tavole.

Per organizzare bene il tuo spazio, ti basta cliccare subito sopra la tavola (in alto a sinistra) dove potrai modificarne il titolo.

Questo passaggio tornerà utile anche in una eventuale fase di esportazione delle tavole (nei vari formati che ti potranno servire): se hanno già un loro titolo ben definito, non dovrai rinominarle successivamente una ad una ?

Secondo passo: Inserisci gli elementi grafici sulla tua tavola

Quello che devi fare ora è inserire gli elementi grafici sulla tua tavola.

In questo caso, dovendo creare una schermata d’avvio, ciò che devi inserire sono: un logo, uno sfondo e, a volte, qualche informazione testuale. Per prima cosa, inserisci il logo trascinando sulla tavola quello di Campvives che ti propone il tutorial Adobe.

Per inserire qualsiasi altro elemento (jpeg, png, svg, PDF), come generalmente vale per gli altri programmi Adobe, ti basta selezionarlo e trascinarlo dalla cartella di riferimento allo spazio di lavoro.

Oppure, dal menù File > import… / (Alt+cmd+I).

Terzo passo: Imposta le linee guida

Nella tab di sinistra, in modalità “Assets”, trovi 3 sezioni principali che fanno parte di quegli strumenti che permettono di salvare davvero un sacco di tempo: Colors (colori), Character styles (stili di carattere) e Symbols (simboli).

Permettono, in sostanza, di creare delle scorciatoie per le regole di stile che si definiscono all’inizio del progetto.

Per fare un esempio, se definisco l’azzurro come colore primario dell’interfaccia grafica, posso salvarlo nella sezione Colors e assegnarlo a qualsiasi altro elemento con un semplice click.

1. Seleziona l’elemento del colore che vuoi salvare e premi sul segno +  della sezione Colors. Per eliminare un colore tasto destro + Delete;
2. Crea e definisci un nuovo stile di testo. Selezionalo e poi premi sul + della sezione Character Styles. Per eliminarlo, tasto destro + Delete;
3. Seleziona elementi grafici ricorrenti (icone, loghi, ecc) e premi su + della sezione Symbols.

Dovresti ottenere una cosa simile a questa.

La cosa davvero interessante di questa scorciatoia è la possibilità di applicare delle modifiche in contemporanea a tutti quegli elementi a cui è stata assegnata una regola di stile.

Quarto: Personalizza lo sfondo

Per modificare lo sfondo di una pagina, puoi seguire due strade:

1. Selezionare la tavola che vuoi modificare e, dalla tab di destra, gestire i valore della sezione “Appearance” (Aspetto).
   Potrai scegliere un colore pieno, oppure inserire una sfumatura;
2. Creare un oggetto forma delle dimensioni della tavola, selezionando “rettangolo” (R) dalla tab di sinistra.
   Creata la forma che ricopre l’area della tavola, selezionala e gestisci il colore (o la sfumatura) dalla tab di destra.

Quale strada scegliere? È indifferente.

La prima ti permette di “risparmiare” un livello nella tua area di lavoro.

La seconda, invece, nasconde un grande vantaggio. Se decidi di avere come sfondo un’immagine e non un colore pieno (o una sfumatura), dovrai passare necessariamente da questa strada.

1. Crea l’oggetto forma delle dimensioni della tavola;
2. Seleziona e trascina l’immagine che vuoi come sfondo (oppure Alt+cmd+I);
3. Posizionati sull’oggetto forma che vuoi “riempire”;
4. Rilascia l’immagine.

Magia ?

Quinto passo: Inserisci le immagini

Per inserire delle immagini nel progetto, puoi semplicemente trascinare dalla cartella di riferimento, oppure cmd+I.

Esiste un’altra strada che permette di fare lo stesso direttamente all’interno di forme geometriche, ottenendo delle maschere di ritaglio.

Come fare? niente di più semplice.

1. Seleziona l’immagine e trascinala fin sopra alla forma entro la quale vuole iscrivere l’immagine.
2. Rilascia l’immagine.

L’immagine sarà riadattata in automatico e con un doppio click sinistro puoi isolarla e apportare delle modifiche (ridimensionare, ruotare… mi raccomando, senza stretchare ?)

E se volessi cambiare immagine? anche stavolta, niente di più veloce. Ti basterà trascinare una nuova immagine all’interno della precedente e XD sostituirà il contenuto della forma, senza stravolgere nulla.

Suggerimento: se selezioni la forma contenitore, noterai delle piccole “maniglie” ai vertici che puoi trascinare verso il centro per smussarne gli angoli. Puoi gestire la stessa operazione nella sezione appearance della tab di destra.

Ti basta selezionare la forma con doppio click destro e indicare un valore numerico da assegnare.

La differenza? Gestendo l’operazione in quest’ultimo modo, puoi controllare il valore di smussamento in maniera indipendente per ogni angolo.

Sesto passo: Text, click… REPEAT!

A questo punto, dopo aver inserito le aree di testo e tutti gli elementi utili, potresti aver necessità di simulare griglie di oggetti identici che si ripetono, come ad esempio menù, post di blog, elenchi di card, ecc.

Ctrl+C / Crtl+V? nemmeno per idea!

Adobe XD ha pensato ad uno strumento utilissimo: repeat grip.

Lo trovi in alto nella tab di destra. Seleziona la struttura da ripetere, attiva il pulsante Repeat Grid e vedrai comparire una griglia verde tratteggiata che potrai estendere in verticale e/o orizzontale attraverso due maniglie.

Se fin qui è tutto chiaro, non ti resta che continua a dare forma alle tue schermate finché avrai un flusso sufficiente di tavole da poter animare e testare.

È ora di attivare la modalità Prototype

Come ti spiegavo all’inizio, è arrivato il momento di passare alla modalità Prototype. Per rinfrescare la memoria, trovi il pulsante in alto a sinistra, oppure Cmd+Y. Il tuo spazio lavoro non cambierà di molto, ma vedrai scomparire le tab laterali perché tutto ciò che dovrai fare è lavorare direttamente sulle artboard.

1. Definire l’homepage. La prima cosa che dovrai gestire è definire l’homepage. Di default, XD considera home la prima artboard creata. Per cambiare questa impostazione, dovrai selezionare la tavola che vuoi abilitare e premere sulla linguetta alla sua estremità sinistra con l’icona di una casetta.
2. Collegare le tavole. Per dare vita al flusso che hai studiato, dovrai collegare le artboard o abilitare gli elementi grafici alla transizione da una videata all’altra.

Seleziona l’elemento che vuoi animare. Alla sua estremità destra comparirà un’etichetta azzurra con l’icona di un indicatore che dovrai premere e trascinare fin sopra alla schermata che vuoi “agganciare”.

Un menù a tendina ti permetterà di definire alcune modalità di transizione e il lasso di tempo in cui dovrà avvenire. A questo punto non ti resta che divertiti a provarle tutte, scegliendo il tipo di transizione che ritieni più opportuna all’esperienza che hai in mente.

Suggerimento: ti consiglio di utilizzare una o due modalità di animazione. Inserirne troppe diverse tra loro potrebbe “appesantire” l’interazione dell’utente.

Testa il tuo mockup

Ora che hai dato vita al tuo prototipo, ciò che rimane da fare è testarlo… prima di condividerlo ☝?

In alto a destra del tuo spazio lavoro, trovi l’icona play ▶️

Premila e si avvierà una nuova finestra interattiva con l’anteprima del progetto.

Su questa finestra puoi testare in tempo reale il prototipo, controllando il corretto collegamento fra le schermate, le transizioni e i vari flussi di interazione.

Suggerimento: la schermata di anteprima si aggiorna in tempo reale mentre apporti delle modifiche al progetto.

Può essere utile, se lavori su due schermi, mantenere l’anteprima sempre attiva sullo schermo secondario.

Piccolo segreto: puoi testare il mockup direttamente sul dispositivo per cui stai progettando.

Adobe XD ha sviluppato anche un’applicazione per i dispositivi mobili, gratuita e disponibile per iOS e Android.

1. Scarica l’app sul dispositivo che ti interessa testare;
2. Avvia l’app;
3. Collega il dispositivo al tuo pc attraverso il suo cavo di ricarica;
4. Inizia a testare (in automatico sul dispositivo verrà avviata l’anteprima del mockup).

Condividilo

Se sei arrivato fin qua, significa che stai muovendo i primi passi per diventare un vero ninja Xd.

L’ultima cosa che ti rimane da fare è condividere il tuo lavoro con il cliente, un collega, il tuo intero team o gli sviluppatori che dovranno mettere mano al codice. ??‍?

In alto a destra dello spazio lavoro trovi un’icona “share” che ti permette di generare un link (pubblico o privato) di condivisione.

Controlla l’orologio… Quanto ci hai messo?

Se hai letto con cura questo tutorial, dovresti sentirti pronto a iniziare un tuo progetto personale per fare un po’ di esercizio e allenare quello che hai appena imparato. Quanto ci abbiamo messo? poco meno di un’ora, come promesso!

Se hai dubbi o curiosità, scrivilo nei commenti. Noi di Grafigata! saremo felici di risponderti con qualche approfondimento.

Hai suggerimenti su contenuti che vorresti approfondire nei prossimi tutorial? Non vediamo l’ora di leggerli qui sotto ??

Alla prossima,

Lorenzo.