Introduzione alle tavole da disegno in Adobe XD

Scopri come utilizzare le tavole da disegno per creare i tuoi progetti di design in XD.

Ecco Jeanee, una graphic designer che è stata scelta per guidare una progettazione UX. Sta proponendo Adobe XD al suo team, i cui iscritti hanno diversi livelli di esperienza con la progettazione e gli strumenti UX.

 
  • Sta cercando risorse che consentano di iniziare rapidamente con il progetto.

 

  • Per iniziare a lavorare ha bisogno di tutorial e per continuare necessita di file di esempio.

Jeanee si sta formando sulla terminologia di base del progetto e sta lavorando con le tavole da disegno per creare il suo primo prototipo in XD. Continua a leggere per scoprire come possiamo aiutarla a iniziare.

Non hai mai utilizzato Adobe XD?

Ottieni l'app in versione di prova gratuita

Prova da te

Ottieni il file di esempio

.xdc; 142KB

Prima di procedere

Imposta le tavole da disegno in 4 semplici passaggi

Che cosa è una tavola da disegno? Le tavole da disegno rappresentano le schermate della tua applicazione o delle pagine del tuo sito web. Semplifica i processi di progettazione e crea progetti interattivi per più dimensioni dello schermo in un unico documento. Usa le tavole da disegno per creare il tuo progetto XD.

Continua a leggere per scoprire come impostare le tue tavole da disegno.

Crea una nuova tavola da disegno

Adobe XD fornisce tavole da disegno per schermi di dimensioni comuni come quelle per diverse versioni di iPhone, iPad e Web. Se le scelte non soddisfano i tuoi requisiti, puoi creare una tavola da disegno personalizzata.

Schermata Home

Tavole da disegno personalizzate

Usa le dimensioni predefinite della tavola da disegno o crea la tua tavola da disegno personalizzata.

App XD

Proprietà della tavola da disegno

Usa lo strumento Tavola da disegno tool  per creare altre tavole da disegno. Seleziona e applica i valori predefiniti della tavola da disegno dalla finestra Ispezione proprietà.

Usa una tavola da disegno esistente di Photoshop e Illustrator

Puoi importare tavole da disegno esistenti da Photoshop o Illustrator in XD senza doverle ricreare. 

Usa una tavola da disegno esistente di Photoshop e Illustrator

Usa File > Importa da XD per aprire le tavole da disegno di Photoshop o Illustrator in XD con ogni tavola da disegno e livello intatti e modificabili.

Dai un'occhiata a questo articolo che descrive i 5 modi migliori per utilizzare le risorse di Photoshop in XD.

Gestisci tavole da disegno

Hai cambiato idea sulla dimensione della tavola da disegno? Ridimensionale. Puoi anche rinominarle in base alle tue esigenze di progettazione. Desideri creare più tavole da disegno e gestirne il posizionamento? Duplicale e riorganizzale.

Rinomina

Riordina

Fai doppio clic sul titolo della tavola da disegno.

Ridimensiona

Ridimensiona

Trascina la maniglia circolare che appare sui bordi di una tavola da disegno.

Duplica

Copia e incolla le tavole da disegno

Seleziona la tavola da disegno e premi Ctrl/Cmd + D.

Funzione Allinea e distribuisci

Funzione Allinea e distribuisci

Seleziona più tavole da disegno e fai clic su Allinea e distribuisci nella finestra Ispezione proprietà. Trascina la tavola da disegno per riorganizzarla.

Applica griglie di layout o quadrate

Desideri definire la struttura sottostante del contenuto del tuo progetto aggiunto nelle tavole da disegno? Applica le griglie di layout. Vuoi avere un'idea su come misurare rapidamente e allineare il contenuto del tuo progetto mentre disponi oggetti o testo sulle tue tavole da disegno? Usa le griglie quadrate.

Griglie layout

Griglie layout

Seleziona una o più tavole da disegno e nella sezione Griglia della finestra Ispezione proprietà, scegli Layout.

Griglie quadrate

Griglie layout

Seleziona una o più tavole da disegno e nella sezione Griglia della finestra Ispezione proprietà, scegli Quadrato.

Tavole da disegno del progetto

Ora che hai creato la tua prima tavola da disegno, scopri come aggiungere elementi visivi e di testo, cambiare lo sfondo e creare effetti di scorrimento.

Aggiungi elementi visivi e di testo

Creazione di tavole da disegno scorrevoli

Aggiungi elementi visivi e di testo

Ora che la tua tavola da disegno di base è a posto, puoi creare o modificare il colore di sfondo, aggiungere elementi grafici e creare o formattare stili di testo in risorse riutilizzabili. Desideri creare una griglia modificabile di elementi ripetuti? Usa le griglie di ripetizione.

Aggiungi elementi visivi e di testo

Aggiungi elementi

Usa gli strumenti Disegno per creare elementi personalizzati oppure seleziona File > Importa per importare elementi esistenti come immagini e icone dalla cartella del dispositivo. Usa gli strumenti Testo per creare, formattare e acquisire stili di testo in risorse riutilizzabili. 

Per modificare il colore di sfondo della tavola da disegno, dalla finestra Ispezione proprietà, seleziona Riempi e applica il colore dal selettore colore.

Crea elementi ripetibili

Ripeti gli elementi

Usa le griglie di ripetizione per creare oggetti con elementi ripetibili come elenchi e layout basati su carte.

Creazione di tavole da disegno scorrevoli

Desideri aggiungere effetti di scorrimento verticale e orizzontale nel tuo progetto? Usa i gruppi di scorrimento per prototipare una finestra di contenuto.

Vuoi ottenere una simulazione realistica di scorrimento su desktop e dispositivi mobili? Impostare la posizione fissa di un elemento sulla tavola da disegno per consentire agli altri elementi di scorrere al di sotto. 

Scorrimento verticale

Linea tratteggiata e contenuto scorrevole

Per estendere la tavola da disegno oltre l'altezza della finestra, utilizza il marcatore. Il marcatore indica la posizione fino alla quale è necessario scorrere per accedere al contenuto.

Posizione fissa durante scorrimento

Linea tratteggiata e contenuto scorrevole

Per bloccare gli elementi del progetto in una posizione fissa, seleziona Posizione fissa durante scorrimento nella finestra Ispezione proprietà.

Il progetto finale

Ora che ne sai abbastanza sulle tavole da disegno, puoi giocare con ciò che hai imparato finora e creare tavole da disegno più sorprendenti per i tuoi progetti.

Soggetto a modifiche

Vai avanti e scarica il progetto finale per vedere come appare il tuo progetto.

Ulteriori informazioni

Ecco un video di esempio di 4 minuti per iniziare. Puoi anche scaricare i file di esempio per provare insieme ai video

File di esempio

Consigli e suggerimenti

Ora che hai le basi delle tavole da disegno in XD, ecco alcuni suggerimenti e trucchi utili:

  • Per misurare la distanza di un oggetto dai bordi di una tavola da disegno, fai clic sull'oggetto e premi il tasto Opzione (su macOS) o Alt (su Windows).
  • Per disattivare l'opzione di scorrimento in una tavola da disegno, seleziona la tavola da disegno e nella finestra Ispezione proprietà, modifica Scorrimento su Nessuno.

Per ulteriori suggerimenti professionali su come lavorare con le tavole da disegno, segui @Elainecchao, XD Product Manager su Twitter.

Passaggi successivi

Ti abbiamo illustrato come creare, gestire e condividere le tavole da disegno. Fai un passo avanti e impara a creare guide di tavole da disegno personalizzate e posizionare la tavola da disegno utilizzando le griglie.

Hai una domanda o un'idea?

Chiedi alla community

Se hai domande o un'idea da condividere, partecipa nella community di Adobe XD. Desideriamo ricevere il tuo feedback e vedere le tue creazioni.

Logo Adobe

Accedi al tuo account