Utilizzo dei componenti

I componenti sono elementi di progettazione che offrono una flessibilità senza pari, con i quali puoi creare e gestire elementi ripetuti cambiando le istanze per contesti e layout diversi come l’utilizzo dei pulsanti in contesti diversi.

Continua a leggere per scoprire come utilizzare i componenti per gestire facilmente più versioni dello stesso elemento di base!

Familiarizza con questi concetti prima di procedere con XD:

Creazione di un componente

Per creare un componente, selezionare Oggetto > Crea componente. Puoi anche selezionare un oggetto o un gruppo di oggetti e utilizzare una delle seguenti opzioni:

La prima volta che crei un componente in XD, diventa un componente principale, indicato da un diamante verde solido nell’angolo in alto a sinistra. Puoi modificare un Componente esattamente come qualsiasi altro elemento. 

Puoi visualizzare il nome del componente selezionato in Ispezione proprietà. Per rinominare un componente, fai doppio clic sul nome in Ispezione proprietà.

Elementi a cui prestare attenzione

• XD non ha una vista dedicata per modificare i Componenti principali. Quando modifichi un componente principale, lo modifichi nell’area di lavoro.
• Se elimini un componente principale nell'area di lavoro, è comunque possibile selezionare un'istanza e accedere all'opzione Modifica componente principale dal menu di scelta rapida. XD genererà un Componente principale nell’area di lavoro.
• Per scollegare una singola istanza del componente, utilizza l’opzione Separa componente nel menu di scelta rapida. Se tuttavia vuoi scollegare tutte le istanze nell’area di lavoro, utilizza l’opzione di eliminazione nel pannello Risorse.
• Per assicurarti di modificare il Componente principale, presta attenzione al diamante verde solido nell'angolo in alto a sinistra del rettangolo di selezione.

Procedure consigliate

Ecco alcune procedure consigliate quando si utilizzano i componenti:

• Stai creando un grande sistema di progettazione di componenti? Assicurati di organizzare i componenti principali correlati su tavole da disegno separate. Ad esempio, i pulsanti su una tavola da disegno e le barre di navigazione su un’altra tavola da disegno.
• Quando crei il sistema di progettazione, assicurati di creare i componenti al livello più essenziale al fine di ottenere la massima flessibilità e possibilità di riutilizzo. Ad esempio, durante la creazione di una finestra di dialogo Componente, assicurati che i pulsanti della finestra di dialogo siano istanze nidificate nel componente finestra di dialogo.

Utilizzo delle istanze del componente

Ogni copia del componente principale è denominata istanza. Le istanze dei componenti sono contrassegnate da un diamante verde vuoto in alto a sinistra. Le modifiche che apporti al componente principale sono applicate a tutte le istanze.

Le esclusioni sono modifiche univoche pertinenti solo alla singola istanza e non al componente principale. Se modifichi la proprietà in un’istanza, XD contrassegna tale proprietà come un’esclusione. Puoi escludere le proprietà di un’istanza senza interrompere il collegamento al componente principale. 

Procedure consigliate

Ecco alcune procedure consigliate quando si utilizzano le istanze dei componenti:

• Vuoi sperimentare una variazione del componente? Seleziona Separa componente dal menu di scelta rapida per scollegare l’istanza dal componente principale.
• Stai cercando di individuare:
  • Tutte le istanze di un componente sull’area di lavoro? Fai clic con il pulsante destro del mouse sul componente nel pannello Risorse e seleziona Evidenzia su area di lavoro.
  • Posso utilizzare il componente principale mentre uso un'istanza? Fai clic con il pulsante destro del mouse sull’istanza e seleziona Modifica componente principale.
  • Posso utilizzare l'istanza del componente precedente dopo aver modificato il componente principale? Fai clic con il pulsante destro del mouse sul componente e seleziona Torna all'istanza precedente.

Modifica componente principale

Quando modifichi un componente principale, tutte le istanze vengono aggiornate a meno che non contengano esclusioni per quella proprietà specifica. 

Per modificare un componente principale, seleziona un’istanza o un componente nell’area di lavoro e utilizza una delle seguenti opzioni:

Una volta terminato di modificare il componente principale e desideri tornare all'istanza precedente, fai clic con il pulsante destro del mouse sul componente e seleziona Torna all'istanza precedente.

Elementi a cui prestare attenzione

• Le proprietà di rotazione e opacità non si propagano dal componente principale alle istanze.
• Per assicurarti di modificare il componente principale, presta attenzione al diamante verde solido nell’angolo in alto a sinistra del rettangolo di selezione.
  

Procedure consigliate

Di seguito è riportata una procedura consigliata per la modifica dei componenti principali:

• Se elimini un componente principale dall'area di lavoro, fai clic con il pulsante destro del mouse su un'istanza e seleziona Modifica componente principale. XD genera un componente principale nell’area di lavoro.

Esclusione dell’istanza del componente

I componenti principali consentono di mantenere la coerenza necessaria al mantenimento di un sistema di progettazione. Qualsiasi modifica apportata al componente principale si propaga automaticamente alle relative istanze. Tuttavia, un sistema di progettazione è utile solo in base al livello di flessibilità che offre. Puoi iniziare con lo stesso elemento originale, ma devi personalizzarlo a seconda del contesto in cui lo utilizzi. Questo è il motivo per cui si creano le istanze.

Le esclusioni sono modifiche univoche pertinenti solo alla singola istanza e non al componente principale. Se modifichi la proprietà in un’istanza, XD contrassegna tale proprietà come un’esclusione. Le proprietà escluse sono sempre conservate, anche se modifichi la stessa proprietà del componente principale. 

Per cancellare le esclusioni e ripristinare il componente principale, fai clic con il tasto destro del mouse su un’istanza e seleziona Reimposta a stato principale.

Tipi di esclusioni

Di seguito sono riportate alcuni tipi di esclusioni e i relativi scenari di utilizzo:

Esclusioni delle dimensioni

Anche i componenti sono ridimensionabili e offrono funzionalità avanzate integrate per il ridimensionamento reattivo. Le istanze che non sono state ridimensionate manualmente come un’esclusione quando ridimensioni il componente principale, sono ridimensionate automaticamente. Pertanto, le istanze che sono state ridimensionate mantengono la loro posizione ridimensionata come esclusione. 

Come funziona il ridimensionamento in un componente principale o nelle sue istanze?

• Puoi anche ridimensionare in modo indipendente un’istanza senza influire sul componente principale.
• Puoi ridimensionare un intero componente e modificare il layout degli elementi al suo interno.
• Puoi modificare le istanze del componente a prescindere dalle dimensioni a cui le hai adattate.

Proprio come il ridimensionamento dinamico, XD ricrea il posizionamento dei tuoi elementi su un’area di lavoro più grande o più piccola.

Nella finestra di Ispezione proprietà, puoi commutare il Ridimensionamento reattivo da Automatico a Manuale per modificare i vincoli e ottenere un maggior controllo.

Esclusioni dell’aspetto

La modifica degli elementi originali in base al contesto è importante quando crei elementi riutilizzabili. Di conseguenza, puoi escludere ogni proprietà di stile e aspetto di un’istanza. Le esclusioni ti consentono di ottenere diverse variazioni pur mantenendo i legami con il componente principale. 

Esclusioni di layout e struttura

Non è solo possibile escludere la dimensione di un componente o il layout degli elementi al suo interno, ma puoi anche escludere strutturalmente i componenti. Questo significa che puoi aggiungere o sottrarre elementi nel componente principale e nelle sue istanze.

Se aggiungi un oggetto al componente principale, questo è aggiunto anche alle rispettive istanze. Quando aggiungi un oggetto, XD applica l’algoritmo di ridimensionamento reattivo e posiziona automaticamente i vincoli sull’oggetto. Questo dipende dalla posizione del nuovo oggetto rispetto al suo contenitore. Quando un oggetto è eliminato dal componente principale, è rimosso anche in tutte le istanze.

Gli elementi possono anche essere aggiunti o rimossi da un’istanza e i vincoli sono automaticamente inseriti su un oggetto quando aggiunto. Quando elimini un elemento in un’istanza, questo è rimosso solo in tale istanza. Lo stesso elemento continua a esistere nel componente principale. 

Elementi a cui prestare attenzione

• Puoi reimpostare tutte le esclusioni ma non le singole esclusioni nel componente principale. 
• Se una proprietà è stata contrassegnata come esclusione in un’istanza, seleziona Reimposta a stato principale per sincronizzarla nuovamente con il componente principale. 

Procedure consigliate

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

• 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 stati ai componenti

Gli stati dei componenti consentono di salvare diverse varianti del componente per ogni riutilizzo. Dopo aver effettuato le esclusioni sul componente principale, puoi creare uno stato da tali esclusioni in modo che possa essere riutilizzato facilmente.

Ad esempio, puoi creare un componente pulsante con diverse varianti come primario e secondario. Utilizzando gli stati, puoi creare varianti con le esclusioni sul componente principale. 

Quando utilizzi gli stati e i componenti, tieni presenti queste indicazioni:

• Gli stati creati sul componente principale sono disponibili in tutte le istanze di quel componente. Ciò consente di creare componenti con più istanze e cambiare facilmente lo stato.
• Puoi rinominarli ed eliminarli dal selettore di stato nella finestra di Ispezione proprietà.
• Puoi aggiungere un attivatore con un’azione per passare da uno stato a un altro di un componente. Ad esempio, puoi passare dallo stato predefinito allo stato Passaggio quando passi su un componente pulsante. 

Aggiunta di stati

Dopo aver creato il componente, la finestra di Ispezione proprietà elenca il componente con uno Stato predefinito. Ora puoi aggiungere tre tipi di stato ai componenti: Nuovo, Passaggio e Alternanza.

Creazione di un nuovo stato

Utilizza Nuovo stato nei casi in cui vuoi visualizzare le variazioni di un componente, ad esempio, la versione disattivata o sulla quale hai fatto clic.

Creazione dello stato al passaggio del mouse

Utilizza lo stato Passaggio quando vuoi che il componente cambi e visualizzi uno stato diverso quando passi con il mouse sul componente durante l’interazione con il prototipo.

Creare uno stato ALTERNANZA

Usa lo stato Alternanza quando vuoi creare componenti con comportamento di alternanza interattivo, quali interruttore, pulsante di opzione, casella di controllo e così via.

Visualizzazione e gestione degli stati

Dopo aver creato gli stati del componente, puoi modificare le proprietà del componente e visualizzare come esso appare quando vi interagisci. Di seguito sono riportati alcuni flussi di lavoro associati agli stati:

Esclusioni negli stati

Tutte le modifiche apportate allo stato predefinito nel componente principale sono propagate allo stato predefinito in tutte le istanze. Allo stesso modo, la modifica di uno stato specifico nel componente principale comporta la ricezione di tali modifiche in tutte le istanze per quello stato specifico. Assicurati sempre di modificare lo stato nel componente principale affinché sia aggiornato in tutte le istanze.

Con gli stati, hai la possibilità di escludere proprietà come testo, bitmap, dimensioni, layout e aspetto. Una volta esclusa una proprietà dello stato in un’istanza, questa non riceverà più aggiornamenti per tali proprietà dal componente principale.

Se i risultati delle esclusioni non sono soddisfacenti, reimposta il componente come componente principale originale facendo clic con il pulsante destro del mouse su un’istanza e selezionando Reimposta a stato principale. Questo cancella tutte le esclusioni in un’istanza e la reimposta sul componente principale.

Aggiunta di interattività

Puoi usare gli attivatori Tocca, Passaggio, Tasti e gamepad e Voce per interazioni di collegamento tra gli stati dei componenti nella modalità Prototipo. Il collegamento delle interazioni tra gli stati del componente è simile al collegamento delle interazioni tra tavole da disegno. La differenza principale è che nel collegamento delle interazioni tra gli stati del componente si sceglie come destinazione uno stato anziché una tavola da disegno.

Per lo stesso stato del componente puoi definire più interazioni. Ad esempio, nel caso di un interruttore con entrambi gli stati Passaggio e Tocca, puoi definire tali interazioni ripetendo due volte i passaggi da 4 a 7 per definire gli stati Passaggio e Tocca. Dopo aver creato più interazioni, puoi visualizzare la sezione Interazioni dove sono mostrate quelle definite. Passa da un'interazione all’altra e modificane le proprietà in base alle esigenze. 

Se desideri creare interazioni nidificate al passaggio del mouse, come menu a comparsa o popup con pulsanti multistato, puoi anche nidificare componenti con stati al passaggio del mouse.

Elementi a cui prestare attenzione

• Quando fai doppio clic su un componente, il selettore di stato nella finestra di Ispezione proprietà scompare.
• XD supporta solo Tocca, Passaggio, Tasti e gamepad e Voce come attivatori tra gli stati.
• XD non propaga le esclusioni da uno stato a un altro nelle istanze.

Procedure consigliate

Di seguito sono riportate alcune procedure consigliate per aggiungere gli stati ai componenti:

• Crea sempre gli stati per i componenti in modo che sia possibile riutilizzarli in diverse varianti.
• Puoi passare alla modalità Prototipo e modificare manualmente le interazioni tra stati diversi.
• Quando aggiungi l’interattività tra gli stati, se modifichi proprietà quali il colore, seleziona l'azione come Transizione con Nessuna o Dissolvenza come animazione. Se stai animando la posizione o la dimensione tra gli stati, seleziona Animazione automatica come azione.
• Quando crei un nuovo stato, puoi iniziare replicando lo stato predefinito o uno stato esistente. A seconda dell’obiettivo finale, puoi scegliere di selezionare lo stato predefinito e fare clic su + per duplicarlo per un nuovo stato o selezionare uno stato esistente e fare clic su + per duplicare quello stato. Quando crei un nuovo stato da uno esistente, anche il nuovo stato conterrà le stesse esclusioni. Ciò significa che le proprietà escluse non riceveranno alcun aggiornamento dallo stato predefinito. Per la maggior parte dei casi d’uso, è consigliabile creare nuovi stati facendo clic su + per lo stato predefinito. Partendo dallo stato predefinito avrai la certezza che questo sia sincronizzato con il componente principale e che non contenga esclusioni.

Gestione dei componenti

Aggiunta di interattività ai componenti

Puoi aggiungere interattività ai componenti e tra gli stati. Quando crei un’interazione sul componente principale, tutte le istanze di tale componente ricevono questa interazione. Qualsiasi modifica alle interazioni sul componente principale attiva l’aggiornamento automatico delle interazioni sulle istanze.

Puoi inoltre escludere le interazioni sulle istanze che pertanto non riceveranno più aggiornamenti dal componente principale. Proprio come le esclusioni di progettazione, puoi escludere le proprietà di interazione per un componente.

Elementi a cui prestare attenzione

• Non è possibile impedire la propagazione delle interazioni dal componente principale alle istanze.
• Non è possibile distinguere tra un’interazione aggiunta a un’istanza (come esclusione) rispetto all’interazione ereditata dal componente principale.
• Per gli stati è supportato un insieme limitato di azioni e attivatori. 

Procedure consigliate

Di seguito sono riportate alcune procedure consigliate per aggiungere interattività a un componente:

• Quando copi o incolli o condividi i componenti tra documenti, XD non conserva le interazioni tra il componente e la tavola da disegno poiché non possiamo garantire che le tavole da disegno di destinazione siano sempre disponibili. Tuttavia, XD conserva le interazioni stato per stato per ciascun componente. Questo significa che, incollando un componente che ha uno stato Passaggio e un attivatore Tocco su una tavola da disegno in un altro documento, XD conserva l’interazione dello stato Passaggio e scarta l’attivatore Tocco sulla tavola da disegno. 
• Sceglie quando aggiungere un’interazione al componente principale rispetto all’istanza.
• Se tutte le istanze condividono la stessa destinazione, il collegamento del componente principale è più efficace poiché si propaga automaticamente a tutte le istanze. Ad esempio, un pulsante Home che porta alla schermata principale.
• Se tutte le istanze o alcune di esse hanno destinazioni diverse, è più semplice collegare le singole istanze anziché il componente principale. Ad esempio, un pulsante principale utilizzato in tutto il progetto che ha destinazioni diverse in base al suo utilizzo e contesto.

Ulteriori informazioni

Per ulteriori informazioni su come utilizzare i componenti, guarda questo video.

Tempo di visione: 9 minuti

Passaggi successivi

Ti abbiamo illustrato come utilizzare i componenti in XD. Continua e scopri come utilizzare i componenti nidificati in XD.

Hai una domanda o un'idea?