Nei precedenti tutorial su Adobe XD, abbiamo esaminato la sua posizione sul mercato, le sue applicazioni e gli strumenti di base. Come già anticipato, il software dispone di numerosi strumenti e funzioni avanzate che facilitano il processo creativo e di progettazione. In questo tutorial, esploreremo come impostare un layout, personalizzare gli oggetti, creare componenti e molto altro!
Impostare una griglia di Layout
Selezionando la tavola da disegno, è possibile impostare una griglia attraverso la barra laterale di destra. Adobe XD offre due tipi di griglie: quella classica a quadri e quella di layout. La griglia di layout consente di suddividere la tavola da disegno in sezioni completamente personalizzabili, utile per mantenere distanze e proporzioni uniformi tra le tavole. Ad esempio, è possibile suddividere in 4 sezioni, impostare margini laterali e regolare le distanze tra le sezioni. Le guide sensibili consentono agli oggetti di aderire al layout impostato.
Come personalizzare le forme in Adobe XD
Le forme in XD funzionano come in altri programmi Adobe, ma la personalizzazione presenta alcune leggere differenze, risultando in alcuni casi più facile e intuitiva. Selezionando una forma, comparirà la sezione “Aspetto” nel pannello a destra. Qui è possibile regolare l’opacità, applicare un metodo di fusione, cambiare il colore di riempimento e del bordo, nonché modificare l’angolo e il tratto, a seconda della forma.
Effetti: Ombra e Sfocatura
Il pannello principale del software include anche la sezione “Effetti”. Le ombre interne ed esterne sono particolarmente utili per aumentare il contrasto, soprattutto nei testi, ma possono essere impiegate anche nelle forme per ottenere l’effetto box shadow. È possibile regolare l’intensità dell’ombra e il colore. Per quanto riguarda la sfocatura dello sfondo, essa consente di rendere sfocato lo sfondo dietro la forma a cui viene applicata, creando un effetto simile al vetro se utilizzato correttamente.
Strumenti Avanzati: Griglia di Ripetizione, Scorrimento e Pila
Gli strumenti che andremo a esaminare sono stati introdotti per la prima volta su XD e successivamente importati su altri software Adobe, anche se non sono ancora molto conosciuti e utilizzati.
Griglia di Ripetizione
Questo strumento è estremamente utile, consentendo di duplicare qualsiasi elemento su schermo creando una griglia sia orizzontale che verticale. È possibile regolare la distanza su ciascun elemento duplicato e successivamente separare la griglia per gestirla come desiderato.
Scorrimento Verticale e Orizzontale
Lo scorrimento è un utile strumento solo in fasi avanzate di prototipazione. Attivare l’opzione è semplice e necessario solo se ci sono elementi che vanno oltre la tavola da disegno e con cui l’utente deve interagire.
Per verificarne il funzionamento, è sufficiente attivare l’anteprima del prototipo e azionare la rotella del mouse o spostarsi tenendo premuto.
Strumento Pila
Questo strumento consente di riorganizzare gli elementi selezionati sostituendo la posizione di partenza e mantenendo le stesse proporzioni. Per utilizzarlo, è necessario raggruppare prima gli elementi desiderati e poi attivare l’opzione a seconda delle necessità.
Componenti in Adobe XD: Definizione e Utilizzo
I componenti, simili allo scorrimento, sono opzioni avanzate da utilizzare in fasi avanzate del prototipo. Consentono di creare un oggetto che, in base alle interazioni dell’utente, cambia stato. Ad esempio, utilizzando un componente, è possibile creare un menu a tendina.
Per crearlo, iniziamo con lo scheletro di partenza, che rappresenta la visione predefinita iniziale (ad esempio, una sezione di testo). Successivamente, selezioniamo la casella del tasto e creiamo un componente con un clic destro.
Nel pannello laterale, noteremo la creazione di un componente con lo stato predefinito da noi impostato inizialmente. Per visualizzare il menu a tendina, clicchiamo su “+” e impostiamo lo stato “attiva/disattiva”, inserendo la tabella successiva del menu a tendina.
Completato il processo, riattiviamo lo stato predefinito. Se eseguito correttamente, attiviamo l’anteprima per ottenere un menu a tendina funzionante.
È importante notare che i componenti hanno molteplici utilizzi, e l’esempio fornito riguarda solo uno dei possibili scenari. Possiamo attivare diversi stati, come quello di passaggio per creare un effetto “hover” o crearne uno personalizzato.
Per approfondire i componenti consiglio di leggere la guida di Adobe.
