Lavorare con Componenti e Istanze

I componenti possono aiutare a ridurre gli errori, garantire la coerenza e risparmiare tempo – liberando il tuo team dal tedioso lavoro di sincronizzazione e aggiornamento.

Una volta che trasformi un oggetto o un gruppo in un Componente, funge da master per tutte le copie – o Istanze – che vengono create da quel componente.

Ciò significa che qualsiasi formattazione applicata al Componente viene immediatamente riflessa da ogni Istanza nel progetto.

Tuttavia, le istanze rimangono indipendenti dal componente per quanto riguarda le Coordinate (inclusi Ribaltamento e Rotazione) e la Visibilità. Questo significa che puoi spostare o nascondere i componenti senza influire sulla posizione o visibilità delle loro istanze.

In questo articolo, ti mostreremo come trasformare qualsiasi oggetto o gruppo in un componente, creare istanze di quel componente, e dimostreremo come modificare i tuoi componenti aggiungendo o rimuovendo elementi.

Creare componenti e istanze

Creare un Componente

Per creare un Componente:

1. Seleziona qualsiasi oggetto o gruppo sulla pagina.
2. Dal pulsante Componente nella Barra degli Strumenti Superiore, o dalla sezione Componente del Menu Contestuale del tasto destro, scegli Crea Componente.
3. Una volta creati e selezionati, i Componenti sono identificabili dalla loro etichetta, badge e cornice 'Componente' in viola; nel pannello Schema, sono identificati da un'evidenziazione viola.

Creare un'Istanza

Per creare un'Istanza:

1. Fai una copia del Componente usando Ctrl/Cmd + D, l'opzione Duplica nel Menu Contestuale, o tieni semplicemente premuto Alt/Option e trascina.
2. Puoi incollare l'Istanza in qualsiasi pagina all'interno del progetto
3. Ora, cambia le dimensioni, il testo, il colore o altri attributi di formattazione del Componente
4. Una volta completate le modifiche, fai clic fuori dalla cornice oggetto del Componente – e osserva le modifiche propagarsi a tutte le Istanze nel progetto.

Modificare e aggiungere oggetti a un componente

I Componenti e le Istanze – anche quelli creati da singoli oggetti – si comportano come gruppi.

Per modificare qualsiasi componente o istanza:

1. Selezionalo per vedere la Cornice Oggetto viola.
2. Poi, fai doppio clic in modo che appaia il più spesso Bordo di Modifica Componente in viola.
3. Ora puoi...

• Fare clic per modificare
• Aggiungere un nuovo elemento dalla barra laterale sinistra
• Copiare e incollare un oggetto dalla pagina stessa

Override delle istanze

A volte potresti voler personalizzare un aspetto di una singola istanza – ma lasciarla comunque connessa e reattiva al suo componente per altre modifiche e aggiornamenti. Ad esempio, potresti voler cambiare il colore di un CTA su una pagina specifica, ma vuoi ancora che quel pulsante si sincronizzi con il suo master per eventuali future modifiche di dimensione e testo.

Ecco perché una modifica apportata localmente, a qualsiasi singola istanza, sostituisce la capacità del componente di cambiare quello specifico attributo di formattazione (testo, colore, sfocatura, angoli arrotondati) in futuro.

Gli override applicati localmente non hanno effetto sulle altre istanze, né sul Componente originale. Questo consente al tuo team di essere coerente nel design, ma ancora reattivo al particolare contesto di design di ciascuna istanza.

Reimpostare e staccare le istanze

Reimpostare un'Istanza

Se hai apportato modifiche locali e override a una singola istanza, ma poi decidi di rimuovere quegli override e riapplicare lo stile e le proprietà complete del componente, seleziona Reimposta l'istanza.

Staccare un'Istanza

Se vuoi trasformare un'istanza di nuovo in un oggetto o gruppo normale, seleziona semplicemente Stacca istanza.

Localizzare e ripristinare i componenti

Per organizzare i tuoi Componenti, puoi lasciarli nel contesto di un design – o creare una pagina separata dove tutti i tuoi componenti possono risiedere, e bloccare quella pagina in cima al Pannello Pagine.

Ma, di tanto in tanto, potresti comunque voler passare al tuo componente da qualche altra parte nel tuo progetto – ad esempio, mentre lavori su una delle sue istanze.

E, nel caso in cui elimini accidentalmente un componente, potresti doverlo ripristinare da una delle sue istanze.

Localizzare un Componente

Se stai lavorando con un'istanza e hai bisogno di controllare – o modificare – il componente stesso, fai clic sull'istanza e seleziona Vai alla Componente dal menu. Indipendentemente da dove si trova l'istanza, salterai direttamente alla posizione del suo Componente all'interno del progetto.

Ripristinare un Componente

Se, per qualche motivo, elimini un Componente e lasci istanze orfane, seleziona una qualsiasi delle sue istanze e scegli l'opzione Ripristina la componente. Il componente riapparirà magicamente! Nota che questo funziona anche per le istanze con override – otterrai comunque il componente originale.