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 proprietà e le informazioni sulle specifiche, fai clic sull'icona nella barra destra.

Una volta selezionata la scheda delle specifiche, puoi passare il mouse sugli elementi e ispezionarli sull'area di lavoro per ottenere attributi come colori, testo, misurazioni, stati e altre proprietà visualizzate 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 delle variabili.

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

 

Dettagli e proprietà delle schermate

A. Dettagli della schermata: seleziona un oggetto per ispezionare le misure e la spaziatura.

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

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

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.

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

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. 

Testo della singola sezione

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

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 ispezionarli, fai clic sull’artefatto visualizzato nella sezione Interazioni o tieni premuto il tasto Maiusc e fai clic sui punti salienti dell'interazione. 

Snippet CSS

  • Per generare il codice CSS, seleziona Web come destinazione di output nella finestra Condividi per 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.

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.

Attualmente, se contrassegni un componente per l'esportazione, solo lo stato attivo del componente è disponibile per il download. In alternativa, puoi esportare e condividere le risorse di XD.

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. Ora 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.

Logo Adobe

Accedi al tuo account