Ovviamente dobbiamo iniziare a pensare nel momento in cui progettiamo gli hai, quindi progettiamo prodotti digitali.

Dobbiamo iniziare sempre a immaginare che quello che facciamo deve essere replicabile.

Non solo per noi, per altri designer che magari potranno lavorare insieme a noi nel gruppo, ma anche semplicemente per noi stessi, non solo per rendere il lavoro è più veloce e più fluido, ma anche per rendere più coerente tutto il sistema visivo che stiamo progettando.

Quindi dobbiamo iniziare a imparare a, come dire, standardizzare anche la parte proprio degli elementi grafici.

Quindi non solo gli attributi no, come i colori, la tipografia, per esempio.

Però possiamo dire tranquillamente che nel ci sono degli elementi che si ripetono costantemente.

Ripeto, non stiamo facendo una campagna pubblicitaria, non stiamo facendo una branda, i denti ti stiamo facendo un sistema per interagire.

E questi sistemi spesso e volentieri hanno appunto degli elementi, soprattutto quelli interattivi, ma non solo, che si ripetono costantemente all'interno dell'interfaccia.

Uno di questi è il diciamo il più frequente è quello, per esempio, del bottone faccio questo esempio perché è sicuramente uno degli elementi che andremo a riutilizzare costantemente all'interno dell'interfaccia quando è creiamo appunto un layout, quello che dobbiamo iniziare a fare è nel momento in cui sappiamo che qualcosa la riutilizzo eremo almeno più di una volta.

Là dobbiamo trasformare in quello che in gergo si chiama un componente, cioè qualcosa che può essere riutilizzato più volte e che ha una matrice da qualche parte che possiamo variare all'occorrenza che a cascata ci farà cambiare tutte quelle che in gergo vengono chiamate le istanze, cioè le repliche di questa matrice originale.

Andiamo a vedere come crearle all'interno di Fig.

Ma è molto semplice.

Supponiamo che vogliamo creare un pulsante con con questa call to action questa freccia.

Innanzitutto, la prima cosa che dobbiamo fare ritorniamo sull'argomento che abbiamo visto precedentemente l'aut aut se vogliamo fare in modo che questi due oggetti siano tenuti insieme da una regola all'allineamento orizzontale da uno spazio tra gli oggetti tra di loro e da un padding generale che crea, diciamo la forma del pulsante, abbiamo detto dobbiamo semplicemente selezionare questi due oggetti e dirgli che sono tenuti insieme da auto layout.

Come vedete qui mi crea un contenitore che lui chiama fra noi.

Andiamo a dire che questo contenitore a delle misure dei padding sopra sotto costanti mettiamo venti per esempio in questo caso sopra, sotto a sinistra e a destra.

Ok, adesso vedete che è un po' sbilanciato.

Ovviamente posso in ogni momento andare ad allineare gli oggetti all'interno.

Posso andare a dare un colore al mio pulsante? Posso chiaramente andare tramite il corner rebus qui in alto andarvi a dare anche un arrotondamento.

Ora vedete che è un po' sbilanciato, nonostante gli abbia dato é una misura identica sopra e sotto.

Questo perché spesso le interlinea e delle fonti non sono sempre lineari.

Quindi qui vado un po' ad aggiustare otticamente, magari aumentando il parametro sopra in modo che risulti tutto più bilanciato.

Così abbiamo creato un pulsante, ma non l'abbiamo ancora reso qualcosa di replicabile.

Come facciamo? Aspettate che vado anche a mettergli un colore che abbiamo gia' standardizzato.

Gli vado a mettere un nome facendo doppio click sull'angolo in alto a destra.

Ora come faccio? Andiamo ad utilizzare questa parte dell'interfaccia che ancora non abbiamo visto e nello specifico questa icona con quattro rum Betty in alto a sinistra vedete che se vado sopra mi dice crea componente che cosa succede? Succede che questo oggetto diventa in innanzitutto visualizzata in modo diverso.

Vedete che c' è un viola e non più l'azzurro vuol dire che questo oggetto se io adesso lo prendo e lo copie lo replico guardate che cosa sta succedendo qua a sinistra l'originale a quattro rum betty pieni e la sua replica a un trombetta vuoto vuol dire che questi due oggetti sono replicati da sono tenuti insieme da questa logica che li lega amatrice distanza questo è l'originale, questa è la sua replica, ma queste repliche che io vado a creare e vado a spostare in pagina sono sempre vincolate all' originale.

Vale a dire che se io qui nel pulsante originale vado a cambiare per esempio il colore a cascata andrà a replicarsi questa modifica su tutte le istanze all'interno della pagina.

Questo quindi vuol dire che se adesso io vado anche a cambiare qualcosa all'interno della tipografia, quindi della scritta cambierà e si replicherà dappertutto.

Questo però accade se io vado a modificare la matrice, quindi la base, il componente originale.

Se però io vado a modificare la sua istanza, come faccio a capire se una cosa è un'istanza o è la matrice originale? È molto semplice, lo posso vedere sia a destra da qua vedete che l'icona è sempre un rombo vuoto mentre se avessi selezionato l'originale qui, non avrei questa visualizzazione qui.

Non avrei la possibilità di vedere le stesse le stesse proprie proprietà e l'altra, cosa che me lo fa capire.

Appunto.

È qui.

È qui a destra.

Mi dai il link diretto perché ovunque io mi trovassi, supponiamo che questa call to Action adesso noi andiamo a mettere in pagina.

Quindi la mettiamo esattamente qui e dico Ok, voglio cambiare il suo simbolo originale, il suo componente originale.

Come faccio a ritrovarlo? Semplice.

Andando qui in alto a destra, lui mi ricollega alla sua matrice originale.

Ma tornando a prima, qual è la differenza tra matrice istanza? La differenza è che l'istanza può essere sovrascritto ed essere cambiata nelle sue proprietà.

Noi possiamo cambiare colore Shape ombre.

Possiamo nascondere alcune cose cose di quelli stanza, per esempio, potremmo nascondere l'icona della freccia.

Possiamo cambiare il testo senza andare a cambiare la radice.

Che cielo origine.

Quindi se per esempio in questo pulsante io andassi a scrivere Questa è una call to action.

Come vedete, quello che sta succedendo è che la matrice è rimasta invariata, mentre la sua istanza è cambiata.

Però portandosi dietro gli attributi di base.

Vale a dire che se nella sua matrice io adesso vado a cambiare, per esempio il tipo di tipografia, questa mi cambia a cascata su tutti gli altri.

Se tutte le altre istanze all'interno della pagina, ma non va a cambiare il testo che ho inserito dentro nella sovrascrittura dell'istanza.

Questo se ci pensate, diventa super comodo, perché è chiaro che se noi avessimo un oggetto replicabile, per esempio su Photoshop, esistono questi oggetti avanzati che ci consentono questa modalità molto simile.

Ma qual è il vincolo di quella modalità che spesso e volentieri noi abbiamo è una un oggetto collegato, ma non possiamo variare niente di questa di questa qua connessione.

Invece in questo caso noi possiamo andare a cambiare vari elementi.

Addirittura, se volessi, potrei andare a cambiare di questa coltura action anche il colore di sovrascrittura.

Quindi se io qui andasse a dire che invece di questo colore volessi questo piccolo viola, potrei utilizzarlo.

Potrei andarlo a sovrascrivere senza andare a cambiare la sua matrice originale.

Ok, quindi questo è un elemento fondamentale, perché quando iniziamo a progettare la a creare questi elementi replicabili ci aiuta ovviamente a snellire il lavoro.

La buona prassi vuole che invece di creare ovviamente sparsi questi componenti in giro.

Nel nostro documento li' raggruppiamo all'interno di una pagina specifica che chiameremo components.

Possiamo farlo in due modi o manualmente.

Quindi noi andiamo proprio a fare me la X o contro l' x di questo componente.

Andiamo a creare una pagina che chiameremo components e ce ne andiamo ad incollare dentro.

Questo ci aiuterà come Becks Praxis a fare in modo che sia noi sia.

Chiunque arriverà dopo nel file saprà che tutti gli oggetti replicabili che abbiamo costruito lì troveremo qui da qualche parte all'interno della pagina components.

Questa è è una buona pratica.

Altrimenti quello che possiamo fare è supponiamo per esempio, che noi adesso vogliamo standardizzare.

Quindi rendere un componente questo luogo che cosa facciamo? Andiamo sempre qui.

Clicchiamo sull'icona Cina con i quattro Trombetti adesso per portarlo nella pagina components, noi possiamo anche qui ricorrere ad un plugin.

Vi ricordo che facendo me la picchiamo il menù dei comandi veloci.

Cerco il comando, il planking component Paige e seleziona la voce Mu select Maastricht Sai che cosa fa? Che in automatico ora voi lo vedrete sempre qua.

Ma quello che sta succedendo è che questo come potete vedere dalla sua Concina trombetta in outline è la sua istanza, il suo ma il suo.

Come dire il getto master si trova cliccando qui.

Lo vedrò nella pagina components che ho creato prima.

Ok, questo veramente ci aiuta ad essere molto puliti nelle layout e ci aiuta soprattutto poi a fare in modo che tutti gli oggetti che abbiamo costruito, che sono replicabili, li troviamo sotto la sezione asset dentro la pagina local components.

Quindi quando noi vogliamo, per esempio utilizzare qualcosa e rimetterlo in pagina e sapere che sta sta sapendo che è stata messa nella pagina dei componenti.

Vedete, lo troveremo molto rapidamente qui sotto, components sotto assets e li troviamo tutti raggruppati insieme sotto la sezione locale Component.

Quindi posso prenderlo, trascinarlo più volte e poi andare a sovrascrivere come abbiamo visto prima.

Ovviamente qui noi abbiamo lavorato solo con pochissimi componenti, ma quello che ovviamente dovremmo vedere la fine di un progetto più corposo è avere tantissimi elementi che vanno a costruire i mattoncini sono dei piccoli Lego che costruiscono la replicabilità della mia interfaccia.

Ora, ovviamente dipende dal progetto.

Chiaramente, se si tratta di una landing page, probabilmente avremo tre quattro elementi che si replicano una call to action.

Il logo potremmo addirittura Ray è componente componenti gli stessi blocchi testo che compongono la narrazione della mia landing page, ma in progetti più complessi.

Immaginate una Dashwood.

Immaginate un commercio dove ci sono tutte le card, per esempio dei prodotti che si replicano.

Lavorare in questo modo vi aiuterà ad essere molto più efficienti e lineari nel vostro flusso di lavoro.