Utilizzo dei componenti

Scopri come utilizzare i componenti nei sistemi di progettazione in Adobe XD.

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!

Componenti

Non hai mai utilizzato XD?

Ottieni XD

Scopri le nozioni di base dell'app

Utilizzi già XD?

Aggiorna l'app

Scopri le novità

Prima di procedere

Acquisisci familiarità con questi concetti in 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:

Finestra di Ispezione proprietà
Dalla finestra di Ispezione proprietà

Fai clic sull’icona + nella sezione Componente della finestra di Ispezione proprietà.

Pannello risorse
Dal pannello Risorse

Fai clic sul pulsante + nella sezione Componenti del pannello Risorse.

Menu di scelta rapida
Dal menu di scelta rapida

Fai clic con il pulsante destro del mouse su un oggetto e seleziona Crea componente (Comando/CTRL+K).

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. 

Creazione di componenti
Componente principale

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.

Esclusione dell’istanza
Esclusione dell’istanza

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. 

Componente principale
Componente principale

Istanza
Istanza

Istanza con esclusioni
Istanza con esclusioni

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.
    • Il componente principale mentre si utilizza un’istanza? Fai clic con il pulsante destro del mouse sull’istanza e seleziona Modifica componente principale.

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:

Menu di scelta rapida
Dal menu di scelta rapida nell’area di lavoro

Fai clic con il pulsante destro del mouse su un’istanza sull’area di lavoro e seleziona Modifica componente principale.

Pannello risorse
Dal pannello Risorse

Fai clic con il pulsante destro del mouse su un componente nel pannello Risorse e seleziona Modifica componente principale.

Finestra di Ispezione proprietà
Dalla finestra di Ispezione proprietà

Seleziona l’icona della matita di modifica accanto a Stato predefinito nella sezione Componente .

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 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.

Esclusione nell’istanza del componente
Esclusione nell’istanza di un componente

Tipi di esclusioni

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

Esclusioni di struttura e layout
Tipi di esclusioni: testo, bitmap, dimensioni, aspetto e layout

  • Testo: puoi modificare il contenuto del testo in un’istanza del componente, ad esempio, quando modifichi l’etichetta di un componente pulsante. 
  • Bitmap: puoi sostituire il contenuto bitmap in un’istanza del componente, ad esempio, quando sostituisci un’immagine in un componente immagine del profilo.
  • Dimensioni: puoi ridimensionare un’istanza quando applichi il riempimento e il ridimensionamento reattivo, ad esempio, quando modifichi la dimensione dei campi di testo in un modulo.
  • Aspetto: puoi modificare le proprietà dell’aspetto come colore di riempimento, bordo e sfocatura, ad esempio, quando modifichi il colore di sfondo per le notifiche.
  • Layout e struttura: puoi aggiungere, eliminare e spostare oggetti nell’istanza del componente, ad esempio, quando modifichi i menu a discesa con voci di menu aggiuntive.

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

Esclusione dell’aspetto
Esclusione 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.

Esclusione di layout e struttura
Esclusioni di layout e struttura

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: NuovoPassaggio 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.

In modalità Progettazione, fai clic sul pulsante + accanto a Stato predefinito del componente principale nella finestra di Ispezione proprietà e seleziona Nuovo stato.

Per impostazione predefinita, nel nuovo stato non è inclusa alcuna interattività. Per ulteriori informazioni su come collegare un’interazione ai componenti, consulta Aggiunta di interattività ai componenti.

Nuovo stato
Nuovo stato

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.

In modalità Progettazione, fai clic sul pulsante + accanto a Stato predefinito del componente principale nella finestra di Ispezione proprietà, e seleziona stato Passaggio.

Per impostazione predefinita, lo stato Passaggio contiente al suo interno l’interattività. 

Stato Passaggio
Stato Passaggio

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.

In modalità Progettazione, fai clic sul pulsante + accanto a Stato predefinito del componente principale nella finestra di Ispezione proprietà, e seleziona Stato Alternanza.

Una volta creato lo stato alternanza, per impostazione predefinita, XD eseguirà automaticamente due interazioni tocco bidirezionali tra Stato predefinito e Stato Alternanza, rendendolo completamente interattivo.

Stato Alternanza
Stato Alternanza

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:

Cambio degli stati

Cambio degli stati
Cambio degli stati

Seleziona il componente e dalla finestra di Ispezione proprietà attiva o disattiva i diversi stati.

Ridenominazione degli stati

Ridenominazione degli stati
Ridenominazione degli stati

Fai doppio clic sul nome dello stato del componente nella Finestra di Ispezione proprietà e aggiungi un nuovo nome. Puoi solo rinominare ed eliminare gli stati nel componente principale. Lo stato predefinito non può essere rinominato.

Eliminazione degli stati

Eliminazione degli stati
Eliminazione degli stati

Fai clic con il pulsante destro del mouse sullo stato del componente e seleziona Elimina. Quando elimini uno stato del componente dal componente principale, le istanze del componente nelle quali tale stato è attivo tornano allo stato predefinito.

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.

  1. Passaggio alla scheda Prototipo.
  2. Seleziona lo stato del componente da cui creare l'interazione. 
  3. Fai clic sull'icona > sullo stato del componente o su + nella sezione Interazione della Finestra di Ispezione proprietà per aggiungere un’interazione.
  4. Scegli Tocca (per eventi clic), Passaggio (per azioni di passaggio con il mouse), Tasti e gamepad (navigazione e casi d'uso di accessibilità) o Voce (navigazione e casi d'uso di accessibilità), come attivatore.
  5. Scegli un tipo di azione (ad esempio, Animazione automatica o Transizione).
  6. Scegli uno stato come destinazione.
  7. Passa alla finestra Anteprima e verifica l’interattività del componente.
Creare un'interazione con il tocco
Collegamento degli stati del componente per creare un'interazione tocco

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 una 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 pop-up 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

Visualizzazione 

Rivela componenti in risorse
Rivela componenti dal pannello Risorse

Puoi visualizzare o trascinare nuove istanze nell’area di lavoro dal pannello Risorse.
Per individuare tutte le istanze, fai clic con il pulsante destro del mouse sul componente nel pannello Risorse e seleziona Evidenzia su area di lavoro.
Per individuare i componenti nel pannello Risorse, fai clic con il pulsante destro su un’istanza del componente nell’area di lavoro e seleziona Rivela componente nel pannello Risorse.

Modifica, ridenominazione o eliminazione

Menu di scelta rapida dal pannello Risorse
Menu di scelta rapida dal pannello Risorse

Fai clic con il pulsante destro del mouse su un componente nel pannello Risorse oppure seleziona un’istanza sull’area di lavoro e usa le opzioni del menu di scelta rapida per modifiche o eliminazioni. Per rinominare i componenti, fai clic con il pulsante destro del mouse e seleziona Rinomina.

Reimpostazione allo stato principale

Reimposta a stato principale
Reimposta a stato principale

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

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?

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.

Logo Adobe

Accedi al tuo account