Guida utente Annulla

Utilizzo dei componenti nidificati in Adobe XD

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.

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.

Ottieni supporto in modo più facile e veloce

Nuovo utente?