Guida utente Annulla

Visualizzazione e ispezione delle specifiche di progettazione

Scopri come visualizzare e ispezionare attributi quali colori, testo, misure, stati di componenti, interazioni e molto altro ancora nelle specifiche di progettazione.

In un collegamento alle specifiche di progettazione condivise, puoi visualizzare e provare il prototipo, aggiungere contestualmente commenti e feedback e scegliere di ottenere misurazioni e informazioni sulle specifiche per il progetto.

Schede nel collegamento delle specifiche di progettazione
Schede nel collegamento delle specifiche di progettazione

Il collegamento delle specifiche di progettazione viene aperto in modalità Prototipo per impostazione predefinita. Per ottenere le informazioni sulle proprietà e sulle specifiche, passa alla scheda delle specifiche di progettazione facendo clic sull'icona nella barra di destra.

Una volta selezionata la scheda delle specifiche di progettazione, puoi selezionare gli elementi e ispezionarli sull'area di lavoro per avere attributi come colori, testo, misurazioni, stati e altre proprietà visualizzati nella finestra di Ispezione proprietà.

Fai clic sull'icona {} per passare alla scheda delle variabili. Questa scheda è disponibile quando il designer pubblica un collegamento alle specifiche di progettazione per il Web. Quando il designer definisce i nomi delle variabili per i colori e gli stili carattere in un progetto, puoi visualizzare le informazioni sul token del progetto nella scheda variabili.

Continua a leggere per scoprire come visualizzare e abbinare gli attributi nelle specifiche di progettazione.

Vista dei dettagli della schermata

Quando fai clic all'esterno di una tavola da disegno, viene visualizzata la vista dei dettagli della schermata. In questa vista, puoi analizzare la schermata e dettagli come i punti salienti delle interazioni.

Dettagli e proprietà delle schermate

A. Dettagli della schermata: visualizza le dimensioni della schermata.

B. Colori: visualizza i colori contrassegnati per l'esportazione.

C. Proprietà della griglia del layout: attiva/disattiva per visualizzare le griglie.

Utilizza il cursore Opacità per controllare la trasparenza dei colori.

Nota:

Se contrassegni un livello per l'esportazione nell'app XD, i colori utilizzati in quel livello non verranno visualizzati nella vista dei dettagli dello schermata.

Sovrapposizioni

Fai clic su Punti salienti dell'interazione per visualizzare i dettagli della tavola da disegno, gli stili, il design e le dimensioni della finestra di visualizzazione, la posizione della sovrapposizione, i colori, gli stili dei caratteri e le informazioni di destinazione per la sovrapposizione applicata. 

Punti salienti dell'interazione

Tieni premuto il tasto Maiusc per visualizzare i punti salienti dell'interazione. Per controllarli, fai clic sull'artefatto visualizzato nella sezione Interazioni o tieni premuto il tasto Maiusc e fai clic sui punti salienti dell'interazione. 

Vista dei dettagli del livello

Quando selezioni un livello su una tavola da disegno, viene visualizzata la vista dei dettagli del livello. Nella finestra di Ispezione proprietà, puoi visualizzare il nome del livello e le proprietà, come le dimensioni e l'aspetto.

Testo e aspetto

A. Proprietà del testo: seleziona una riga di testo per visualizzare le proprietà del testo aggiunte con unità predefinite come px, pt e dp.

B. Aspetto: visualizza i colori utilizzati in un oggetto o nel testo nella sezione Aspetto.

Forme

Ispezione delle forme

Seleziona una forma per controllarne i seguenti attributi:

  • Larghezza, altezza e rotazione.
  • Attributi di aspetto, come colori, dimensione del bordo, trattino, spazio, tratti e opacità.

Immagini

Controllo delle immagini

Seleziona un'immagine per controllarne i seguenti attributi:

  • Larghezza, altezza e rotazione.
  • Opacità.

Video

Controllo del video

Seleziona un video per controllarne i seguenti attributi:

  • Larghezza, altezza e rotazione.
  • Nome immagine poster.
  • Riproduzione automatica, riproduzione in loop e impostazioni audio.
  • Se il video deve essere tagliato, indica l'ora in cui la clip video dovrebbe iniziare e finire. 
  • Opacità.

Animazioni Lottie

Controllo del video

Seleziona un'animazione Lottie per controllare i seguenti attributi:

  • Larghezza, altezza e rotazione.
  • Riproduzione automatica e impostazioni di riproduzione in loop.
  • Opacità.
  • Proprietà CSS.
  • Interazioni.

Testo della singola sezione

Testo della singola sezione

Passa con il mouse sulle singole sezioni di un elemento di testo per evidenziare le singole sezioni simili all'interno dell'elemento di testo.

Collegamenti ipertestuali

Collegamenti ipertestuali agli oggetti

Esaminare i collegamenti ipertestuali agli oggetti

  • Quando selezioni un oggetto su una tavola da disegno, tutti i relativi collegamenti ipertestuali vengono visualizzati nella sezione Interazioni della finestra di Ispezione proprietà.
  • Posiziona il puntatore del mouse su un collegamento ipertestuale nella sezione Interazioni per identificare l'oggetto associato sulla tavola da disegno.
  • Per copiare l'URL di un collegamento ipertestuale negli Appunti, nella sezione dei dettagli dell'oggetto, fai clic sul collegamento ipertestuale.
  • Quando fai clic su un collegamento ipertestuale nella sezione Interazioni, si apre il collegamento. Per copiare l'URL del collegamento ipertestuale dalla sezione Interazioni, fai clic con il pulsante destro del mouse.
  • Nella sezione Interazioni, quando fai clic su un collegamento ipertestuale che utilizza un protocollo diverso da https o mailto, non dispone di un protocollo o ha un dominio non valido, l'URL non si apre. Viene visualizzato un messaggio di errore nella parte inferiore dello schermo.
  • Se su un oggetto sono definite più interazioni di collegamenti ipertestuali, non è possibile copiarle dalla sezione dei dettagli dell'oggetto. Fai clic con il pulsante destro del mouse sui collegamenti ipertestuali nella sezione Interazioni per copiarli.

Collegamenti ipertestuali di testo

Controllare i collegamenti ipertestuali di testo

  • Quando selezioni un oggetto di testo, la finestra di Ispezione proprietà (sia le sezioni Interazioni che dei dettagli dell'oggetto) mostrano qualsiasi interazione del collegamento ipertestuale per l'oggetto nel suo insieme. 
  • Puoi esaminare le interazioni dei collegamenti ipertestuali definite per l'oggetto di testo, allo stesso modo di qualsiasi collegamento ipertestuale dell'oggetto.
  • Quando selezioni il testo (testo del sottointervallo) all'interno dell'oggetto e se tale testo ha un collegamento ipertestuale separato, la sezione dei dettagli dell'oggetto riflette l'URL del collegamento ipertestuale. Tuttavia, la sezione Interazioni continua a visualizzare il collegamento ipertestuale e altre interazioni definite per l'oggetto.
  • Per copiare l'URL di un collegamento ipertestuale di testo di singole sezioni negli Appunti, fai clic su di esso nella sezione dei dettagli dell'oggetto.

Per informazioni sui collegamenti ipertestuali in XD, consulta Creazione di collegamenti ipertestuali.

Frammenti di codice

Codice CSS

Esaminare il codice CSS

  • Per generare il codice CSS, nell'app XD, seleziona Esporta per Web in Condividi > Sviluppo e pubblica le specifiche di progettazione.
  • Dalla sezione degli snippet CSS, puoi visualizzare e copiare il codice CSS della progettazione.
  • Per copiare e incollare lo snippet di codice, premi e trascina gli snippet, passa all’editor di codice e incollalo.

Codice HTML

Esaminare il codice HTML di Lottie e il video

  • Per generare il codice HTML per i file Lottie e video, nell'app XD, seleziona Esporta per Web in Condividi Sviluppo e pubblica le specifiche di progettazione.
  • Dalla sezione HTML, puoi copiare il codice HTML della finestra di Ispezione proprietà.
  • Per copiare e incollare lo snippet di codice, premi e trascina gli snippet, passa all’editor di codice e incollalo.

Stati dei componenti

Stati dei componenti nelle specifiche di progettazione
Stati dei componenti nelle specifiche di progettazione

  • Seleziona un oggetto nella tavola da disegno e se l'oggetto selezionato è un componente, puoi ispezionarne i molteplici stati. 
  • Per visualizzare i diversi stati del componente selezionato nella tavola da disegno, fai clic sulle opzioni sotto l'elenco Componente nella finestra Ispezione proprietà.  
  • Nella sezione Interazioni puoi visualizzare tutte le interazioni associate allo stato attivo del componente selezionato. 

  • Fai clic sullo stato inattivo del componente dall'elenco per visualizzare gli stati sulla tavola da disegno e le rispettive interazioni.
  • Se il nome del componente è lungo e puoi leggerne solo una parte, seleziona il nome nella finestra di Ispezione proprietà per copiarlo.
Nota:

Non puoi scaricare tutti gli stati di un componente. Nell'app XD, se il designer contrassegna più istanze di un componente per l'esportazione, verrà esportata solo l'ultima istanza nel pannello Livelli.

Livelli nascosti

Livelli nascosti

  • Passa il mouse e fai clic con il pulsante destro sull'area specifica per visualizzare l'elenco dei livelli e i relativi dettagli contestuali in quel punto del pixel. 
  • Se il nome del gruppo è lungo e puoi leggerne solo una parte, seleziona il nome nella finestra di Ispezione proprietà per copiarlo.

Ulteriori informazioni

Per ulteriori informazioni sull'analisi delle specifiche di progettazione in XD, guarda questo video.
Tempo di visione: 8 minuti


Passaggi successivi

Ti abbiamo illustrato i primi passi per visualizzare e ispezionare le specifiche di progettazione. Continua e scopri come verificare le specifiche di progettazione ed estrarre le risorse dalle specifiche di progettazione.

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.

Ottieni supporto in modo più facile e veloce

Nuovo utente?