Impostazione del riempimento fisso per componenti e gruppi

Adobe XD ti consente di impostare valori di riempimento fissi per gruppi o componenti con stati e adattare lo sfondo automaticamente quando il contenuto è modificato.

Questo consente di ridurre l’impatto e il sovraccarico cognitivo della progettazione durante la creazione di pulsanti, menu a discesa, descrizioni comandi o finestre di dialogo modali.

A differenza del ridimensionamento reattivo che agisce quando ridimensioni un intero gruppo, il riempimento funziona quando modifichi il contenuto all’interno di un gruppo.

Puoi dimenticarti del ridimensionamento manuale e dare il benvenuto alla flessibilità e a flussi di lavoro più veloci.

Il riempimento è la distanza dallo sfondo visivo al bordo del contenuto su ciascun lato identificato da uno sfondo allungato. 

XD identifica automaticamente uno sfondo quando:

• Qualsiasi forma, gruppo o gruppo booleano è posizionato più in basso nel gruppo o livello componente 
• Altri elementi si sovrappongono al livello più basso. 

Per controllare con precisione le dimensioni dello sfondo di un oggetto con il riempimento, segui la procedura descritta: 

1. Dalla finestra di Ispezione proprietà, attiva l’interruttore del pulsante di riempimento.
2. A seconda delle esigenze di progettazione, imposta i valori per Stesso riempimento per tutte le direzioni o Riempimento diverso per ogni direzione.

Puoi visualizzare l’opzione Riempimento solo se l’elemento dello sfondo della struttura del livello è posizionato per ultimo nel gruppo e si sovrappone ad altri oggetti.

Quando sposti o ridimensioni il contenuto all’interno di un gruppo o un componente, XD identifica lo sfondo, calcola i valori di riempimento e li aggiorna nella finestra di Ispezione proprietà.

I valori aggiornati sono mantenuti nel gruppo o nel componente e lo sfondo è ridimensionato automaticamente. Quando un gruppo o un componente non ha uno sfondo visivo, il valore di riempimento è impostato su 0.

Vuoi modificare i valori di riempimento?

Usa una delle opzioni tra le seguenti:

• Nella finestra di Ispezione proprietà, aggiorna i valori di riempimento esistenti.
• Per ridimensionare il riempimento sull’area di lavoro, premi il tasto `, passa con il mouse sopra l’area di riempimento e trascina.
• Per aggiornare i valori di riempimento di un gruppo o un componente, ridimensiona o sposta manualmente lo sfondo nell’area di lavoro.
• Per modificare tutti i valori di riempimento, seleziona Maiusc+`.
• Per modificare i valori di riempimento opposti, seleziona `+Alt.

Esempi

Riempimento nei componenti con stati

I componenti ereditano il comportamento di riempimento dal relativo componente principale. Questo significa che i valori di riempimento impostati nel componente principale sono sincronizzati tra istanze o stati.

La sostituzione del riempimento si verifica quando:

• Cambi i valori di riempimento nell’istanza di un componente e in un componente principale oppure
• L’istanza non aggiorna i suoi valori di riempimento.

Aspetti da tenere in considerazione

• Quando attivi il riempimento:
  • Tutte le istanze di componenti e stati ereditano automaticamente la proprietà impostata nel componente principale o nello stato predefinito senza la possibilità di sostituirli localmente.
  • L’opzione Porta sotto nell’area di lavoro posiziona qualsiasi elemento in un gruppo o un componente appena sopra lo sfondo del gruppo.
• Se lo sfondo è un gruppo booleano, una maschera o un componente, per ridimensionare l’oggetto sono applicate le regole di ridimensionamento reattivo.
  

• Se elimini uno sfondo, XD valuta il gruppo e promuove automaticamente il livello eleggibile successivo come sfondo e aggiorna i valori di riempimento. Se non è presente nessun livello di sfondo, il valore di riempimento è reimpostato su 0.

Limitazioni

• I componenti e il testo indipendente non possono essere utilizzati come sfondo per un gruppo o un componente.
  

• Il riempimento non si anima in modalità Prototipo quando utilizzi gli stati Passaggio o Tocca nel contenuto di progettazione.

Esempi e file di esempio

Vuoi cambiare l’etichetta di un pulsante senza che fuoriesca dal pulsante?

Ulteriori informazioni

Passaggi successivi.

Ti abbiamo illustrato i primi passi con il riempimento. Continua e scopri come creare progettazioni o prototipi interattivi e condividerli con gli stakeholder quali sviluppatori e colleghi progettisti.

Hai una domanda o un'idea?