Utilizzo dei componenti in XD

In qualità di progettista, devi spesso creare elementi di base quali barre di navigazione o pulsanti, che si ripetono in tutte le tue progettazioni. Questi elementi di base devono tuttavia essere personalizzati in base al contesto o al layout in cui sono inseriti. Con queste premesse, dovrai spesso creare più versioni dello stesso elemento di base, rendendo molto più complicata la manutenzione della progettazione.

I componenti (precedentemente noti come simboli) 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. Un esempio è l’utilizzo di pulsanti in contesti diversi.

Puoi creare un componente principale per definire un elemento riutilizzabile, ad esempio, un pulsante e modificare qualsiasi sua proprietà per personalizzarne le istanze. Le modifiche apportate a una singola istanza sono specifiche a quell’elemento, ma le modifiche che apporti all’elemento principale sono propagate a tutte le istanze in cui la proprietà non è stata personalizzata. 

Utilizziamo questi flussi di lavoro per scoprire come utilizzare i componenti.

La prima volta che crei un componente in XD, questo diventa un componente principale. Il componente principale può essere manipolato e modificato sull’area di lavoro esattamente come qualsiasi altro elemento. I componenti principali sono contrassegnati da un diamante verde solido in alto a sinistra.

Per creare un componente principale, seleziona un oggetto o un gruppo di oggetti e utilizza una delle opzioni seguenti:

• Fai clic con il tasto destro del mouse su un oggetto e seleziona Crea componente (Comando+K).
• Fai clic sul pulsante + nella sezione dei componenti del pannello Risorse.
• Dall’app XD, seleziona Oggetto > Crea componente.
• Seleziona un oggetto e fai clic sull’icona + nella sezione Componente della finestra di Ispezione proprietà.

I componenti possono avere più stati in Adobe XD e questo ti consente di sviluppare facilmente contenuto dinamico e interattivo senza dover utilizzare più oggetti nella progettazione.

Dopo aver creato il componente, puoi iniziare a creare più stati per il componente e collegarli per creare le interazioni. Per ulteriori informazioni, consulta Creazione di componenti con stati.

Utilizzo delle istanze del componente

Ogni copia che crei del componente principale è denominata un’istanza. Le istanze dei componenti sono contrassegnate da un diamante verde vuoto in alto a sinistra. Le istanze create:

• Sono una copia esatta del componente principale
• Condividono le stesse proprietà dell’originale e
• Sono intrinsecamente collegate al componente principale. 

Puoi escludere le proprietà di un’istanza senza interrompere il collegamento al componente principale. Di seguito è riportato il funzionamento:

• Le modifiche che apporti al componente principale sono applicate a tutte le istanze.
• Tuttavia, se modifichi la proprietà in un’istanza, XD contrassegna tale proprietà come esclusione. Le esclusioni sono modifiche uniche pertinenti solo all’istanza presa in considerazione e non al componente principale.

Modifica del componente principale

Per modificare un componente principale, puoi utilizzare una di queste opzioni:

• Fai clic con il tasto destro del mouse su un’istanza sull’area di lavoro e seleziona Modifica componente principale. 
• Fai clic su un componente nel pannello Risorse e seleziona Modifica componente principale.
• Seleziona un’istanza sull’area di lavoro e seleziona l’icona della matita di modifica accanto a Stato predefinito nella sezione Componente della finestra di Ispezione proprietà.

Se hai eliminato un componente principale dall’area di disegno, XD genera un componente principale nell’area di disegno accanto agli oggetti che stai modificando. 

Proprietà di esclusione

I componenti principali consentono di mantenere la coerenza necessaria alla manutenzione di un sistema di progettazione. Qualsiasi modifica apportata al componente principale si propaga automaticamente alle sue istanze.

Tuttavia, un sistema di progettazione è utilizzabile solo quanto il 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. La modifica che effettui sull’istanza di un componente, non influisce sul componente principale. Ogni proprietà modificata è considerata un’esclusione.

Le proprietà escluse sono sempre conservate, anche se modifichi la stessa proprietà del componente principale. 

Le proprietà che non sono state escluse nelle istanze, ad esempio, raggio angolo in questi pulsanti, si sincronizzano sempre con il componente principale. 

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

Esclusioni di stile e aspetto

La modifica degli elementi originali in base al contesto è estremamente 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 l’elemento fondante. 

Esclusioni di ridimensionamento e layout

Con XD 12.0 è stata introdotta una funzione denominata ridimensionamento reattivo che consente di ridimensionare gruppi di oggetti mantenendo il loro posizionamento e la loro scalabilità. Ti basta quindi ridimensionare il gruppo nell’area di disegno della progettazione e XD mantiene la spaziatura relativa. Inevitabilmente, questo comporta la creazione di elementi riutilizzabili che sono simili ma variano con dimensioni diverse. Anche i componenti sono ridimensionabili e offrono funzionalità avanzate integrate per il ridimensionamento reattivo. 

Le istanze che non ridimensioni quando ridimensioni il componente principale, sono ridimensionate automaticamente. Pertanto, le istanze che sono già state ridimensionate mantengono la loro posizione ridimensionata come esclusione. Puoi anche ridimensionare in modo indipendente un’istanza senza influire sul componente principale. 

Non solo puoi ridimensionare un intero componente, ma puoi anche modificare il layout degli elementi al suo interno. Ora puoi modificare le istanze del componente a prescindere dalle dimensioni a cui le hai adattate. Proprio come il ridimensionamento reattivo, XD tenta di ricreare il posizionamento dei tuoi elementi su un’area di lavoro più grande o più piccola. Per avere maggiore controllo, puoi anche passare alla modalità manuale e modificare manualmente i vincoli.

Le proprietà modificate in un’istanza (ad esempio, la dimensione del testo in Joshua Tree), mantengono le loro sostituzioni e non ricevono aggiornamenti dal componente principale.

Solo le modifiche delle proprietà che non sono state sostituite dal componente principale si propagano all’istanza.

Esclusione del collegamento

Quando colleghi i componenti, è utile comprendere i seguenti concetti: 

• In modalità Prototipo, quando colleghi un’interazione a un componente principale, anche le istanze del componente sono collegate automaticamente allo stesso modo. 
• Se modifichi le proprietà di un’interazione nel componente principale, tutte le istanze ricevono tali aggiornamenti purché non siano escluse in un’istanza. 
• Puoi eliminare o modificare (escludere) le interazioni in un’istanza ereditate dal componente principale. Ad esempio, se l’istanza contiene un attivatore tocco ereditato dal componente principale, puoi modificare le proprietà dell’attivatore tocco, ad esempio, la sua azione o la destinazione e così via. Questo significa che l’istanza non riceverà più aggiornamenti futuri per l’interazione tocco dal componente principale. Questo si chiama escludere l’interazione ereditata.  
• Inoltre, puoi anche aggiungere altre interazioni a un’istanza. Per ulteriori informazioni, consulta Collegamento delle schermate.

Aggiunta e rimozione di elementi come esclusione

Non è solo possibile escludere la dimensione di un componente o il layout degli elementi al suo interno, ma puoi anche sostituire 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. 

Scambio di un componente nidificato

In molti casi è necessario progettare un componente più grande che contiene componenti nidificati, ad esempio, modali e barre di navigazione, che richiedono di essere personalizzati in base al contesto. Lo scambio di un componente in XD è semplice e si riduce a trascinare un componente dal pannello Risorse posizionandolo sull’area di lavoro sopra il componente da scambiare.

Sostituendo il componente principale con un’istanza lo sostituisci in tutte le istanze. 

La sostituzione di un’istanza è un’esclusione locale solo per tale istanza. Puoi scambiare tutto il componente o un componente nidificato a livello globale con un altro. 

Utilizzo dei componenti tra i documenti

Le risorse collegate consentono di utilizzare le risorse (componenti, colori e stili carattere) da uno o più file di progettazione disponibili nei documenti cloud di XD. Le risorse collegate completano il flusso di lavoro dei componenti collegati.

Quando inserisci un’istanza collegata e la utilizzi nel documento di destinazione, puoi utilizzare le sostituzioni (stile e aspetto, ridimensionamento e layout e struttura) per personalizzare le istanze locali nel documento di destinazione.

Se modifichi e salvi il componente principale nel documento di origine, un badge blu  accanto a ciascuna istanza del componente collegato nel documento di destinazione indica la disponibilità di un aggiornamento. Puoi passare il mouse sopra il badge blu per visualizzare l’anteprima degli aggiornamenti nel pannello Risorse e, se visibile, nell’area di lavoro di progettazione. 

Fai clic sul badge blu per accettare gli aggiornamenti di un singolo componente e fai clic su Aggiorna tutto nella parte inferiore del pannello Risorse per aggiornare tutte le istanze nel documento. Per ulteriori informazioni sulle risorse collegate, consulta Utilizzo di risorse collegate.

Limitazioni delle funzioni

Scopri queste limitazioni delle funzioni quando utilizzi i componenti:

• Non puoi spostare il componente principale da un documento a un altro.
• Le opzioni Modifica componente principale e Reimposta a componente principale non sono disponibili con la selezione di più componenti.
• Le esclusioni sono rimosse se selezioni l’opzione Converti in tracciato. Se procedi con la modifica, le esclusioni sono rimosse dalle istanze dell’oggetto.
• Opacità e rotazione non sono attualmente supportate come proprietà principali se effettui la modifica dal componente principale. Ogni istanza dispone della sua opacità e della sua rotazione.