Guida utente Annulla

Utilizzo dei componenti nidificati in Adobe XD

  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. Gestione colore
    5. Requisiti di sistema
      1. Requisiti hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    6. Nozioni di base sull'area di lavoro
    7. Cambia la lingua dell'app in Adobe XD
    8. Accesso ai kit di progettazione per interfaccia utente
    9. Accessibilità in Adobe XD
    10. Scelte rapide da tastiera
    11. Consigli e suggerimenti
  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
    14. Eseguire il backup o trasferire le risorse XD
  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. Utilizzare 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 utilizzare i componenti nidificati nei sistemi di progettazione in Adobe XD.

La creazione di un sistema di progettazione richiede la capacità di creare componenti a livello molecolare per un riutilizzo e una flessibilità ottimali. Quando crei dei componenti, XD ti consente di annidarli l'uno nell'altro e di creare oggetti complessi come menu, layout basati su schede e molto altro. 

Continua a leggere per scoprire come creare e utilizzare componenti nidificati per un'esperienza di progettazione senza interruzioni.

Componenti
Utilizzo dei componenti nidificati in XD

Non hai mai utilizzato XD?

Ottieni XD

Scopri le nozioni di base dell'app

Utilizzi già Adobe XD?

Aggiorna l'app

Scopri le novità

Prima di procedere

Acquisisci familiarità con questi concetti:

Terminologia dei componenti

Per prima cosa iniziamo a conoscere alcuni termini associati ai componenti nidificati:

  • Componente principale: un componente principale è il componente che definisce e controlla tutte le proprietà dei componenti.
  • Istanza del componente: un'istanza del componente è una copia del componente principale che eredita le modifiche apportate al componente principale.
  • Componente nidificato: un componente nidificato è un componente all'interno di un altro componente.
  • Componente esterno: un componente esterno è un componente che ha un altro componente al suo interno.

Creazione di un componente nidificato

Con i componenti nidificati puoi creare sistemi di progettazione più affidabili. Quando aggiorni un componente principale, tutte le sue istanze ricevono l'aggiornamento, anche se l'aggiornamento è stato eseguito su un componente nidificato al suo interno.

Per creare i componenti nidificati, puoi utilizzare una delle opzioni riportate di seguito.

Approccio A: copia e incolla un’istanza del componente all’interno di un gruppo e convertila in un componente.

  1. Crea un componente pulsante principale.
  2. Copia e incolla un’istanza del componente pulsante all’interno di un gruppo.
  3. Seleziona il gruppo e convertilo in un componente. 

Approccio B: copia e incolla un’istanza del componente all’interno di un componente esistente.

Incolla un’istanza del componente pulsante all’interno del gruppo

  1. Crea un componente pulsante principale.
  2. Copia e incolla un’istanza del componente pulsante all’interno di un altro componente.

Approccio C: esegui il drill-down su una parte di un componente e convertila in un componente.

  1. Crea un componente finestra di dialogo principale.
  2. Esegui il drill-down di un pulsante all'interno del componente.
  3. Converti il pulsante in un componente.

Esempio

Usiamo l’Approccio A per creare un componente finestra di dialogo.

Incolla un’istanza del pulsante

Incolla l’istanza

Incolla un’istanza del componente pulsante all’interno del gruppo.

Converti in un componente

Crea il componente

Seleziona il gruppo e convertilo in un componente.

Crea un componente pulsante

Crea un componente pulsante

Crea un componente pulsante per la finestra di dialogo.

Crea un contenitore della finestra di dialogo

Contenitore della finestra di dialogo

Crea un contenitore della finestra di dialogo con il testo e altri oggetti all'interno come gruppo.

Procedure consigliate

Di seguito sono riportate alcune procedure consigliate per la creazione dei componenti nidificati.

  • Puoi creare un componente con più componenti nidificati all'interno. Detto questo, nei momenti in cui il componente ha più stati con molti oggetti, le prestazioni possono diminuire. In questi casi, per ottenere prestazioni ottimali, puoi nidificare i componenti a una profondità massima di tre livelli e limitare il numero di stati per livello a un massimo di dieci stati per componente.
  • Non nidificare un componente con sé stesso. Ciò potrebbe causare un componente non valido poiché i componenti sono autoreferenziali.
  • Se hai un componente nidificato con più stati in un componente principale esterno, puoi cambiare lo stato del componente nidificato. La modifica allo stato sarà quindi propagata a tutte le istanze del componente esterno.

Sincronizzazione di componenti nidificati

Con la sincronizzazione dei componenti nidificati, le modifiche apportate ai componenti nidificati all'interno di un componente principale si propagano a tutte le istanze di quel componente principale. 

Vediamo come funziona. 

Esempio 1: un pulsante all'interno di un contenitore che riceve le modifiche dal pulsante principale.

  1. Crea un pulsante come primo componente principale.
  2. Nidifica un'istanza del pulsante all'interno di un menu di attivazione/disattivazione.
  3. Nidifica un'istanza del menu attivazione/disattivazione all'interno di un contenitore.

Eventuali modifiche apportate al componente pulsante principale si propagano a tutti i pulsanti nidificati all'interno del menu di attivazione/disattivazione e del contenitore.

Incolla un’istanza del componente pulsante all’interno del gruppo

A questo punto, crea due istanze del pulsante principale, due istanze del menu di attivazione/disattivazione principale e un'istanza del contenitore principale.

Diamo un'occhiata ad alcuni scenari:

Scenario 1:

Scenario 1

Cambia il colore del pulsante nidificato all'interno del menu di attivazione/disattivazione in blu. 

Tutti i pulsanti nidificati all'interno delle istanze del menu di attivazione/disattivazione e all'interno dei contenitori cambiano colore e diventano blu.

Tuttavia, le due istanze del pulsante principale non cambiano colore. Questo perché le modifiche ai componenti nidificati sono contestuali ai relativi contenitori. Il cambio di colore si applica solo alle istanze del pulsante all'interno del menu di attivazione/disattivazione. 

Scenario 2:

Scenario 2

Cambia il colore del pulsante all'interno del contenitore principale in rosa. Anche il pulsante all'interno dell'istanza del contenitore diventerà rosa.

Gli altri pulsanti non cambiano colore. Questo perché le modifiche ai componenti nidificati sono contestuali ai relativi contenitori. Il cambio di colore si applica solo alle istanze del pulsante all'interno del menu di attivazione/disattivazione all'interno del contenitore. 

Scenario 3:

Scenario 3

Cambia il colore del pulsante nidificato all'interno dell'istanza del contenitore in verde.

Nessuno degli altri pulsanti cambia il colore in verde perché questa modifica è stata apportata a un'istanza, non a un componente principale, come esclusione. 

Scenario 4:

Scenario 4

Continuando dallo scenario 3, cambia il colore del pulsante nidificato all'interno del contenitore principale in viola. 

Il pulsante nidificato dell'istanza del contenitore non cambia colore perché ha già un'esclusione.

Elementi a cui prestare attenzione

  • I componenti nidificati non possono essere componenti principali. Quindi, se è necessario che la modifica venga effettuata sul componente principale, fai clic con il pulsante destro del mouse sul componente nidificato e seleziona Modifica componente principale
  • Se un componente nidificato in un'istanza del componente esterno viene scambiato, l'opzione Reimposta a stato principale sul componente nidificato principale non cambierà l'istanza con il componente scambiato. 

Procedure consigliate

Di seguito sono riportate alcune procedure consigliate per utilizzare le esclusioni nelle istanze dei componenti nidificati.

  • Per creare una variante del componente per il riutilizzo, crea uno stato nel componente principale anziché un’istanza con esclusioni.
  • Quando escludi delle istanze, assicurati di escludere la proprietà che non richiede aggiornamenti dal componente principale. Ad esempio, in un componente pulsante, l’esclusione del testo consente di poter utilizzare etichette diverse, ma le dimensioni e il colore sono ancora sincronizzati con il componente principale.

Creative Cloud Libraries consente di distribuire stili e componenti del tuo sistema di progettazione in modo da riutilizzarli in maniera coerente nei tuoi documenti. Per costruire e distribuire un sistema di progettazione attraverso Creative Cloud Libraries, prepara le tue risorse del sistema di progettazione aggiungendo colori, stili carattere e componenti al pannello Risorse documento e pubblicale come libreria da riutilizzare in tutte le tue applicazioni XD e altre applicazioni Creative Cloud. Per ulteriori informazioni su come utilizzare Creative Cloud Libraries, consulta Utilizzo di Creative Cloud Libraries in XD.

Domande frequenti

Nelle versioni precedenti di XD, le modifiche apportate a un componente nidificato non venivano aggiornate tra le istanze del componente esterno. Per ottenere un'esperienza migliore, apri i tuoi documenti nell'ultima versione di XD.

No. Quando apri un documento esistente con componenti nidificati nell'ultima versione di XD, XD migrerà automaticamente quei componenti nel nuovo modello per farti lavorare il più rapidamente possibile.

Quando XD ha aperto il documento, questi componenti specifici non corrispondevano alla loro versione nel pannello Risorse. Per completare la migrazione senza perdita di dati, questi componenti principali sono stati convertiti in istanze nell'area di lavoro. Se desideri riportare il tuo componente principale nell'area di lavoro, fai clic con il pulsante destro del mouse sull'istanza esterna e seleziona Modifica componente principale. Quindi, se vuoi che il tuo componente principale assomigli all'istanza nell'area di lavoro, puoi trasferire qualsiasi esclusione necessaria dall'istanza al componente principale. 

Per ricevere gli aggiornamenti, apri i documenti collegati nell'ultima versione di XD. Per garantire un funzionamento corretto, qualsiasi documento collegato successivamente deve essere aperto nell'ultima versione di XD. 

A partire da XD 34, XD non supporta più la nidificazione di un componente principale all'interno di un altro componente principale. Se si esegue un'operazione che avrebbe precedentemente creato un componente principale nidificato, il componente interno viene modificato in un'istanza. 

Ulteriori informazioni

Per ulteriori informazioni sui componenti nidificati in XD, guarda questo video.
Tempo di visione: 10 minuti

Passaggi successivi

Ti abbiamo illustrato come utilizzare i componenti in XD. Continua e scopri come condividere i progetti con designer o stakeholder per ricevere feedback.

Hai una domanda o un'idea?

chiedi alla community

Hai domande o un'idea da condividere? Iscriviti e partecipa alla community di Adobe XD. Desideriamo ricevere il tuo feedback e vedere le tue creazioni.

 Adobe

Ottieni supporto in modo più facile e veloce

Nuovo utente?

Adobe MAX 2024

Adobe MAX
La conferenza sulla creatività

14-16 ottobre Miami Beach e online

Adobe MAX

La conferenza sulla creatività

14-16 ottobre Miami Beach e online

Adobe MAX 2024

Adobe MAX
La conferenza sulla creatività

14-16 ottobre Miami Beach e online

Adobe MAX

La conferenza sulla creatività

14-16 ottobre Miami Beach e online