Utilizzo dei componenti nidificati 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.

Acquisisci familiarità con questi concetti:

• Sistemi di progettazione in XD
• Componenti
• Ridimensionamento reattivo e vincoli
• Domande frequenti

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.

Esempio

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

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.

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:

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.
  

Aggiunta di componenti nidificati da Creative Cloud Libraries

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?