Guida utente Annulla

Visualizzazione e ispezione delle specifiche di progettazione

  1. Guida utente di Adobe XD
  2. Introduzione
    1. Novità di Adobe XD
    2. Domande frequenti
    3. Progettazione, prototipazione e condivisione con Adobe XD
    4. Requisiti di sistema
      1. Requisiti hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    5. Nozioni di base sull'area di lavoro
    6. Cambia la lingua dell'app in Adobe XD
    7. Accesso ai kit di progettazione per interfaccia utente
    8. Accessibilità in Adobe XD
    9. Scelte rapide da tastiera
    10. Consigli e suggerimenti
    11. Opzioni abbonamento Adobe XD
    12. Modifiche al piano XD Starter
  3. Progettazione
    1. Tavole da disegno, guide e livelli
      1. Introduzione alle tavole da disegno
      2. Utilizzo di guide e griglie
      3. Creazione di tavole da disegno scorrevoli
      4. Utilizzo dei livelli
      5. Creazione di gruppi di scorrimento
    2. Forme, oggetti e percorso
      1. Selezione, ridimensionamento e rotazione degli oggetti
      2. Spostamento, allineamento, distribuzione e disposizione degli oggetti
      3. Operazioni raggruppa, blocca, duplica, copia e rifletti sugli oggetti
      4. Impostazione di tratto, riempimento e ombra esterna per gli oggetti
      5. Creazione di elementi ripetuti
      6. Crea progetti prospettici con trasformazioni 3D
      7. Modifica di oggetti mediante le operazioni booleane
    3. Testo e font
      1. Utilizzo degli strumenti di disegno e testo
      2. Font in Adobe XD
    4. Componenti e stati
      1. Utilizzo dei componenti
      2. Utilizzo dei componenti nidificati
      3. Aggiunta di più stati ai componenti
    5. Mascheratura ed effetti
      1. Creazione di una maschera con le forme
      2. Utilizzo degli effetti di sfocatura
      3. Creazione e modifica di sfumature
      4. Applicazione degli effetti di fusione
    6. Layout
      1. Ridimensionamento reattivo e vincoli
      2. Impostazione del riempimento fisso per componenti e gruppi
      3. Creazione di progettazioni dinamiche con le pile
    7. Video e animazioni Lottie
      1. Utilizzo dei video
      2. Creazione di prototipi utilizzando i video
      3. Utilizzo delle animazioni Lottie
  4. Prototipazione
    1. Creazione di prototipi interattivi
    2. Animazione dei prototipi
    3. Proprietà dell'oggetto supportate per l'animazione automatica
    4. Creazione di prototipi con tastiera e gamepad
    5. Creazione di prototipi con comandi e riproduzione vocali
    6. Creazione di transizioni temporizzate
    7. Aggiunta di sovrapposizioni
    8. Progettazione di prototipi vocali
    9. Creazione di collegamenti con ancoraggio
    10. Creazione di collegamenti ipertestuali
    11. Anteprima di progettazioni e prototipi
  5. Condivisione, esportazione e revisione
    1. Condivisione delle tavole da disegno selezionate
    2. Condivisione di progettazioni e prototipi
    3. Configurazione delle autorizzazioni di accesso per i collegamenti
    4. Utilizzo dei prototipi
    5. Revisione dei prototipi
    6. Utilizzo delle specifiche di progettazione
    7. Condivisione delle specifiche di progettazione
    8. Ispezione delle specifiche di progettazione
    9. Navigazione delle specifiche di progettazione
    10. Revisione e inserimento di commenti nelle specifiche di progettazione
    11. Esportazione delle risorse di progettazione
    12. Esportazione e download delle risorse dalle specifiche di progettazione
    13. Condivisione di gruppo per le aziende
  6. Sistemi di progettazione
    1. Progettare i sistemi con Creative Cloud Libraries
    2. Utilizzo delle risorse dei documenti in Adobe XD
    3. Utilizzo di Creative Cloud Libraries in Adobe XD
    4. Migrazione delle risorse collegate in Creative Cloud Libraries
    5. Utilizzo dei token di progettazione 
    6. Utilizza le risorse da Creative Cloud Libraries
  7. Documenti cloud
    1. Documenti cloud in Adobe XD
    2. Collaborazione e modifica in comproprietà delle progettazioni
    3. Modifica in comproprietà di documenti condivisi
  8. Integrazioni e plugin
    1. Utilizzo di risorse esterne
    2. Utilizzo delle risorse di progettazione da Photoshop
    3. Operazione di copia e incolla di risorse da Photoshop
    4. Importazione o apertura delle progettazioni di Photoshop
    5. Utilizzo delle risorse di Illustrator in Adobe XD
    6. Apertura e importazione delle progettazioni di Illustrator
    7. Copia di vettori da Illustrator a XD
    8. Plug-in per Adobe XD
    9. Creazione e gestione dei plug-in
    10. Integrazione di Jira per XD
    11. Plug-in di Slack per XD
    12. Plug-in di Zoom per XD
    13. Pubblicazione di progetti da XD a Behance
  9. XD per iOS e Android
    1. Anteprima da dispositivi mobili
    2. Domande frequenti su Adobe XD per dispositivi mobili
  10. Risoluzione dei problemi
    1. Problemi noti e risolti
      1. Problemi noti
      2. Problemi risolti
    2. Installazione e aggiornamenti
      1. XD viene considerato non compatibile su Windows
      2. Codice errore 191
      3. Codice errore 183
      4. Problemi di installazione dei plugin XD
      5.  Richiesta di disinstallare e reinstallare XD su Windows 10
      6. Problemi di migrazione delle preferenze
    3. Avvio e arresto anomalo
      1.  XD si arresta in modo anomalo quando viene avviato su Windows 10
      2.  XD si chiude quando si esce da Creative Cloud
      3. Problema relativo allo stato dell’abbonamento in Windows
      4. Avviso di app bloccate all'avvio di XD su Windows
      5. Generazione di dump di arresto anomalo su Windows
      6. Raccolta e condivisione del registro degli arresti anomali
    4. Documenti cloud e Creative Cloud Libraries
      1. Problemi con i documenti cloud di XD
      2. Problemi con i componenti collegati
      3. Problemi con librerie e collegamenti
    5. Creare prototipi, pubblicare e revisionare
      1. Impossibile registrare le interazioni di prototipi su macOS Catalina
      2. Problemi con i flussi di lavoro di pubblicazione
      3. I collegamenti pubblicati non vengono visualizzati nei browser
      4. I prototipi non vengono visualizzati correttamente nei browser
      5. Il pannello dei commenti viene visualizzato in modo imprevisto sui collegamenti condivisi
      6. Impossibile pubblicare le librerie
    6. Importare, esportare e lavorare con altre app
      1. Importare ed esportare in XD
      2. File Photoshop in XD
      3. File Illustrator in XD
      4. Esporta in After Effects da XD
      5. File Sketch in XD
      6. App di terze parti non visibili in Esporta

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.

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.

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

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.

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

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.

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

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.

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. 

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.

 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.

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.

Logo Adobe

Accedi al tuo account