Utilizzo degli strumenti di disegno e testo

In Adobe XD puoi disegnare rapidamente icone e grafica semplici utilizzando gli strumenti di disegno disponibili sulla barra degli strumenti di sinistra: rettangolo, ellisse, poligono, linea e penna. Lo strumento di selezione ti consente di selezionare linee, forme o oggetti specifici per modificarli.

Puoi quindi combinare queste forme in modi diversi per creare forme e oggetti composti o mascherare una parte della forma. Per ulteriori informazioni sulle tecniche di combinazione e utilizzo delle maschere, consulta Modifica degli oggetti usando operazioni booleane e tecniche di mascheramento.

Disegno di rettangoli e quadrati

Disegno di ellissi e cerchi

Disegno di poligoni

Lo strumento Poligono ti consente di creare una gamma di nuove forme quali triangoli, rombi, pentagoni, stelle e cuori.

Disegno di linee

Disegno con lo strumento Penna

Il tracciato più semplice da disegnare con lo strumento Penna è una linea dritta, creata facendo clic per creare i due punti di ancoraggio. Continuando a fare clic, puoi creare un tracciato formato da segmenti dritti collegati da punti angolo.

Disegno di curve

Puoi creare una curva aggiungendo un punto di ancoraggio nella posizione in cui la curva cambia direzione e trascinando le linee di direzione che definiscono la forma della curva. La lunghezza e l’inclinazione delle linee di direzione determinano la forma del segmento.

Le curve risultano più facili da modificare e più veloci da visualizzare e stampare se sono disegnate con il minor numero possibile di punti di ancoraggio. Troppi punti di ancoraggio possono inoltre provocare irregolarità indesiderate in una curva. Disegna i punti di ancoraggio ben distanziati tra loro e prova a cambiare la forma delle curve regolando lunghezza e angolazione delle linee di direzione.

Disegno di linee dritte seguite da curve

Disegno di curve seguite da linee dritte

Disegno di due segmenti curvi collegati da un angolo

Modalità disegno e modifica

Per passare dalla modalità disegno alla modalità modifica e viceversa, premi il tasto Esc.

Puoi anche accedere alla “modalità di modifica del tracciato” facendo doppio clic sulla forma o sul tracciato. In questa modalità, i punti di ancoraggio della forma sono visibili, ma lo spostamento del mouse non disegna nulla. Puoi manipolare i punti di ancoraggio/controllo esistenti o inserire nuovi punti di ancoraggio sui segmenti esistenti del tracciato.

Quando disegni con lo strumento Penna, puoi eseguire tutte le modifiche sopra descritte oltre a disegnare nuovi segmenti.

Estensione di percorsi esistenti

Quando selezioni lo strumento Penna, su tutti i tracciati presenti nella tavola da disegno sono visualizzate le maniglie sul punto di inizio e di fine al passaggio del puntatore del mouse. Per continuare a disegnare il tracciato da un punto in particolare, fai clic su una delle maniglie.

L’estensione di un tracciato chiuso lo riapre e attiva la modalità disegno dello strumento Penna per quel tracciato.

Selezione dei punti di ancoraggio

Fai doppio clic sul disegno per visualizzare i punti di ancoraggio. Puoi quindi fare clic su un punto di ancoraggio per selezionarlo. Per selezionare più punti di ancoraggio, tieni premuto il tasto Maiusc e seleziona i punti di ancoraggio oppure selezionali utilizzando lo strumento Selezione.

Sposta i punti di ancoraggio selezionati usando la tastiera, trascinali con il mouse o modifica le loro proprietà (coordinate x e y) nella finestra di Ispezione proprietà.

Disattivazione dell’aggancio del punto di ancoraggio

Le linee di ancoraggio sono visualizzate mentre posizioni un nuovo punto di ancoraggio o ne trascini uno esistente che si trova vicino, in verticale o orizzontale, a un altro punto di ancoraggio. Tieni premuto il tasto Comando /Ctrl per disattivare l’aggancio per i punti di ancoraggio.

Aggiunta e modifica di punti di ancoraggio

Fai doppio clic sul disegno per selezionarlo e visualizzare i punti di ancoraggio esistenti. Fai clic sul tracciato per aggiungere nuovi punti di ancoraggio nella posizione del cursore.

Eliminazione dei punti di ancoraggio

Seleziona i punti di ancoraggio e premi il tasto Canc.

Scelte rapide da tastiera per il disegno

Misurazione delle distanze

Misura le distanze tra un oggetto e la tavola da disegno o un oggetto e altri oggetti circostanti facendo clic sull’oggetto e premendo il tasto Opzione (Mac) o il tasto Alt (Windows). 

 Se l’oggetto selezionato non è un quadrato o un rettangolo, XD disegna un rettangolo di selezione attorno ad esso. Visualizza quindi le misurazioni dai bordi del rettangolo di selezione.

Per misurare la distanza di un oggetto dai bordi della tavola da disegno:

Fai clic sull’oggetto e premi il tasto Opzione (Mac) o Alt (Windows).

Adobe XD misura le distanze e visualizza le misurazioni fintanto che tieni premuto il tasto Opzione o Alt.

Per misurare la distanza di un oggetto da un altro oggetto nella tavola da disegno:

Fai clic sull’oggetto, premi il tasto Opzione (Mac) o Alt (Windows) e passa il mouse sopra altri oggetti.

Adobe XD misura le distanze tra i bordi più vicini di entrambi gli oggetti e visualizza le misurazioni finché tieni premuto il tasto Opzione o Alt.

Strumenti di testo

Inserimento di testo indipendente

Seleziona lo strumento Testo e fai clic nel punto in cui vuoi far iniziare il testo. Digita il testo e premi Esc per confermare le modifiche al testo o Invio per passare alla riga successiva.

Quando digiti il testo selezionando un punto sull’area di lavoro, ottieni una riga di testo orizzontale che inizia da dove fai clic e si espande con l’immissione dei caratteri. Ogni riga di testo è indipendente e si espande o contrae mentre la modifichi, ma non manda a capo il testo. L’immissione di testo con questa modalità risulta utile per aggiungere al disegno poche parole.

Puoi digitare il testo su altri oggetti e disporlo in modo che appaia in primo piano utilizzando le opzioni Oggetto > Ordina.

Immissione del testo in un’area

Seleziona lo strumento Testo, fai clic nella posizione in cui inserire il testo sull’area di lavoro e trascina per definire l’area di testo. Fai quindi clic all’interno dell’area per iniziare a digitare il testo.

Quando definisci un’area di testo, i bordi di un oggetto controllano il flusso dei caratteri, in orizzontale o in verticale. Quando raggiunge un bordo, il testo va a capo automaticamente restando entro l’area definita. Questo metodo è utile quando vuoi creare uno o più paragrafi di testo, ad esempio, per una brochure.

Controllo ortografico

Dal menu Modifica, seleziona l’opzione Ortografia e grammatica. La funzione di controllo ortografico funziona solo sul testo errato nel contenitore di testo. Le parole errate sono sottolineate in rosso e le parole corrette automaticamente sono sottolineate in blu. Gli errori grammaticali sono evidenziati con una sottolineatura verde.

Fai clic con il tasto destro del mouse sulla parola errata e seleziona dall’elenco di suggerimenti l’ortografia accurata nel contesto.

Per ripristinare l’ortografia corretta automaticamente con la parola immessa inizialmente, premi Comando+Z (Mac OS) e Ctrl+Z (Windows).

Importazione del testo da file di testo

Puoi includere testo preparato precedentemente nella tavola da disegno usando uno dei metodi seguenti:

• Trascina il file di testo sulla tavola da disegno.
  

Puoi includere testo preparato precedentemente nella tavola da disegno semplicemente trascinando un file di testo sulla tavola da disegno. Questa azione crea un’area di testo sulla tavola da disegno con il contenuto del file di testo.          

• Trascina un file di testo su una griglia di ripetizione.

Puoi anche trascinare un file di testo (con nuove righe) su un componente di testo e trascinare questo in una griglia di ripetizione. Tutti gli elementi di testo sono popolati con il testo di quel file.

Per ulteriori informazioni, consulta Trascinamento di un file di testo separato da ritorni a capo in una griglia di ripetizione. 

• Copia e incolla del testo sulla tavola da disegno.

Puoi anche copiare e incollare il testo sulla tavola da disegno, creando un elemento testo in area che puoi spostare e modificare facilmente in Adobe XD.

Opzioni di ridimensionamento del testo

XD offre tre opzioni di ridimensionamento del testo che consentono di espandere la larghezza della casella di testo per adattare il contenuto all'interno di una singola riga, regolare dinamicamente l'altezza della casella di testo e controllare la larghezza e l'altezza dell'area di testo.

In base alle tue esigenze di progettazione, seleziona un oggetto di testo e scegli tra le opzioni Larghezza automatica, Altezza automatica , e Dimensione fissa nella finestra di Ispezione proprietà .

Larghezza automatica

Quando si aggiunge testo all'interno di frame, immagini e oggetti, è possibile espandere la larghezza della casella di testo al massimo e adattare il testo all'interno di una singola riga.

Altezza automatica

Quando si progetta un'applicazione con una grande quantità di testo o durante la creazione di progetti dinamici in combinazione con pile, puoi regolare dinamicamente l'altezza del testo dell'area senza modificarne la larghezza.

Il testo ad altezza automatica consente di regolare automaticamente l'altezza del testo dell'area per adattare il contenuto. Quando disegni un'area di testo, questa opzione è attivata per impostazione predefinita. 

Dimensione fissa

Quando aggiungi del testo all'interno di progetti quali brochure, siti Web, potresti voler aggiungere uno o più paragrafi e controllare la larghezza e l'altezza dell'area di testo. La dimensione fissa consente di disporre il testo per adattarlo alla casella di testo e ritagliarlo automaticamente quando supera l'altezza. 

Per attivare Dimensione fissa, seleziona l'icona nella finestra di Ispezione proprietà. Per ridimensionare il testo nell'area, fai clic e trascina una delle maniglie di ridimensionamento presenti su tutti i lati. Quando il testo all'interno di un'area di testo non si adatta, XD indica questa situazione con una maniglia di ridimensionamento inferiore di colore rosso.

Fai doppio clic sulla maniglia di ridimensionamento inferiore della casella di testo per ridimensionare rapidamente l'area di testo per adattarla al contenuto.

Formattazione del testo

Fai clic sul testo, quindi specifica il tipo, la dimensione del font e l’allineamento del testo usando la finestra di Ispezione proprietà.

Puoi anche selezionare singole parole o caratteri in un blocco di testo e formattare solo queste sezioni.

Modifica della spaziatura tra caratteri, righe e paragrafi

Per cambiare la spaziatura tra caratteri, fai clic sull’oggetto di testo e specifica la spaziatura tra caratteri usando l’opzione Spaziatura tra caratteri nella finestra di Ispezione di proprietà.

Per cambiare la spaziatura tra caratteri in un sottoinsieme di testo, seleziona il testo e modifica la spaziatura tra caratteri in milli-em nella finestra di Ispezione di proprietà.

Per cambiare la spaziatura tra righe, fai clic sull’area di testo e specifica la spaziatura tra righe usando l’opzione Spaziatura tra righe nella finestra di Ispezione di proprietà.

Per ripristinare l’altezza della riga sul valore predefinito, immetti 0 nell’opzione Spaziatura tra righe nella finestra di Ispezione proprietà.

In modo simile a Photoshop e InDesign, Adobe XD consente di modificare lo spazio prima e dopo i paragrafi all’interno dello stesso elemento di testo.

Per modificare la spaziatura tra i paragrafi, seleziona un paragrafo e fai clic sull’icona del paragrafo nel pannello Formattazione. Modifica il valore della spaziatura come richiesto.

Trasformazioni del testo

Per applicare una delle trasformazioni del testo, seleziona il testo da modificare. Nella finestra di Ispezione proprietà, seleziona una delle seguenti opzioni:

• Icona Maiuscolo (TT) per impostare il testo in maiuscolo.
• Icona Minuscolo (tt) per impostare il testo in minuscolo.
• Icona Iniziali maiuscole (Tt) per impostare il testo con le iniziali in maiuscolo. 
• Icona Apice del testo per impostare il testo come apice.
• Icona Pedice del testo per impostare il testo come pedice.

Sottolineatura del testo

Per sottolineare il testo, fai clic sull’area di testo, quindi sull’icona Sottolinea nella finestra di Ispezione proprietà. XD disegna una sottolineatura uniforme che si interrompe quando incontra caratteri discendenti nel testo (creando una linea esteticamente migliore).

Testo barrato

Per barrare il testo, seleziona l’area di testo, quindi fai clic sull’icona Barratura nella finestra di Ispezione proprietà. Una linea uniforme è disegnata proprio al centro del testo, facendolo apparire come se fosse stato sbarrato. 

Modifiche globali degli stili

Per apportare facilmente modifiche globali agli stili, applica la trasformazione o la barratura del testo agli Stile carattere.

Nel pannello Risorse, salva uno stile che usi nel documento come stile carattere. Fai quindi clic con il tasto destro del mouse sullo stile carattere e seleziona l’opzione Modifica dal menu a discesa. Scegli una delle opzioni per maiuscolo, minuscolo, iniziali maiuscole o barrato e il testo che utilizza quello stile carattere verrà modificato nel documento. 

Creazione di progettazioni di precisione con i calcoli matematici

Utilizza i calcoli matematici per creare progettazioni con maggiore precisione o spostare gli oggetti in una nuova posizione o modificare la larghezza e l’altezza.

Seleziona uno o più oggetti. Nella finestra di Ispezione proprietà, esegui semplici calcoli in qualsiasi casella che accetta valori numerici. Adobe XD supporta gli operatori matematici +, -./, * per calcolare le modifiche.

Ad esempio, se vuoi spostare l’oggetto selezionato di 3 unità verso destra utilizzando le unità di misura correnti, immetti +3 dopo il valore attuale.

Nella casella di testo della finestra Ispezione proprietà che accetta valori numerici, effettua una delle seguenti operazioni:

•   Seleziona l’intero valore corrente e sostituiscilo con un’espressione matematica.
•   Fai clic prima o dopo il valore corrente per usarlo come parte di un’espressione matematica.

 Adobe XD può eseguire solo un’operazione alla volta. Questo significa che può gestire l’operazione “4in+2p”, ma non “4in+2p-1p” dato che si tratta di due operazioni diverse.

Video: come posso utilizzare il testo ad altezza automatica?

"Il contenitore del testo ad altezza automatica regola automaticamente l'altezza in base alla quantità di testo presente al suo interno. Funziona in modo ottimale anche con caratteristiche di layout sensibili al contenuto, come pile e riempimento" - Dani Beaumont, Principal Product Manager, Adobe XD.

Guarda questo video per scoprire come lavorare con il testo ad altezza automatica.

Tempo di visione: 3 minuti.