Adesso che abbiamo fatto abbastanza pratica nella realizzazione dei prototipi, è il momento di ottimizzare li' e quindi di renderli il prototipo perfetto all'interno di tool come fig.

Ma sketch o tutti quanti tool che permettono di fare prototipazione, cioè la possibilità di creare delle librerie.

Come abbiamo visto, la differenza tra libreria ed ESA insiste e che il design system va oltre la libreria.

Però comunque la libreria rimane la base anche di quello, quindi il mio consiglio è quello di creare a questo punto una libreria con i componenti che abbiamo inserito nel nostro prototipo.

In genere teniamo bene a mente che questo é un processo che è iscritto all'interno della fase di prototipazione.

Quando realizziamo un prototipo dobbiamo sempre creare i componenti da inserire nella libreria e mai fare il prototipo per intero e poi solo in un secondo momento, fare la libreria noi per una questione di pratica ed esercizio e lo faremo adesso.

Ma in futuro, quando dovrete fare un altro pro ho tipo ricordate di farlo in tempo reale realizzo un componente e subito dopo lo inserisco in libreria.

Creare un componente inserire in libreria è un'attività molto semplice.

Se vogliamo poi arricchirlo con altre funzionalità.

Ci sono delle fessure in Fig, ma o in altri tool che ci permettono di renderlo più complesso.

Ma noi vedremo la base così potremo fare pratica e capire sempre di piu' il funzionamento delle librerie.

Immaginiamo di avere questo componente e di volerlo mettere in libreria.

Ricordiamo che mettere in libreria significa avere il componente riutilizzabile tutte le volte che abbiamo bisogno di inserire un componente uguale all'interno delle schermate.

Ciò significa che se io voglio mettere in libreria il bottone, ogni volta che devo inserire il bottone nelle mie schermate, dovrò andarlo a pescare dalla libreria.

Questo perché è un vantaggio, perché nel momento in cui io dovrò fare una modifica di stile dovro' fare una modifica di qualsiasi tipo al componente master al componente che in libreria questa modifica si andrà a ripercuotersi a pioggia su tutti gli altri componenti che provengono da quel master.

Facciamo un esempio pratico ad esempio io ho messo in libreria il bottone ho creato per questioni di praticità una pagina a parte di Fig.

Ma che contiene la mia libreria.

Ci sono casi in cui si può creare addirittura un file a parte per la libreria.

Quando quest'ultima viene utilizzata per piu' file contemporaneamente nella libreria.

Quindi ho mappato tutti i componenti della mia interfaccia, il bottone a questo aspetto.

Ma se io per qualche ragione volessi sostituire il colore verde con un altro tipo di colore facendo sul componente master, la modifica poi andrà a vedersi anche su tutti gli altri componenti che provengono da questo master.

Cambiamo il colore é da Dark Green.

Lo facciamo diventare green tornando nella nostra vai noteremo che il colore è cambiato in tutti quanti bottoni.

Facciamo un esempio un po' più strong da green lo rendiamo bianco é il testo.

Lo facciamo green.

Come noterete tutti i bottoni all'interno della mia interfaccia e ora hanno queste proprietà senza che io abbia dovuto modificarli uno ad uno.

Quindi questo è uno dei più grandi vantaggi di avere una libreria contro Zeta.

Rimettiamo tutto quanto a posto nella libreria non inseriamo soltanto i componenti, ma anche stili come colori e come tipografia.

Per inserire un colore basta creare una forma qualsiasi, un rettangolo o un quadrato, farlo di quel colore e inserirlo tramite interfaccia nella libreria con la R creiamo un rettangolo.

Vogliamo inserire questo grigio in libreria.

Andiamo qui nella zona di film per aprire i colori che sono in libreria.

Dobbiamo cliccare su questa icona cliccando sul più presente in questa piccola interfaccia Andiamo a creare un nuovo colore.

Lo chiamiamo gay'.

Da adesso il gay sarà nella lista dei nostri colori.

Se io seleziono un componente, voglio dargli la proprietà di colore gay Seleziona dalla lista é il mio componente diventa del colore libreria.

Se vogliamo che il gay cambi colore, facciamo in questo modo andiamo all'interno della lista vediamo anziché come icone, ma come lista i componenti della nostra palette di colori.

Clicchiamo su queste Concina Edith Stein e andiamo a cambiare le proprietà.

Inventiamoci un colore e adesso il nostro grigio è diventato rosa.

Ciò significa che tutti i componenti che saranno collegati a questo colore avranno cambiato il colore.

Come facciamo a creare un componente da inserire in libreria? Creiamo il nostro componente sistemando tutti gli atomi che lo compongono e raggruppando lì.

In questo modo ci basterà fare tasso destro.

Great component crea componente e questo andrà in libreria.

È molto importante che il nome sia dato secondo un certo criterio.

Se ad esempio io scrivessi componenti Slash Search Bar e crearsi un altro componente che si chiama componenti Slash Search Bard.

Potremmo Inter cambiarli, ad esempio il componente Search Bar due.

Lo facciamo senza cura, possiamo inter cambiarli, quindi seleziono.

Questo è il master tiro fuori dal master una copia.

La copia è sempre dipendente dal master.

Ricordiamo questo quando modifico il master modifico tutte le copie, vado nel menu laterale e posso scegliere se mettere il bar.

Ho perso un hardware.

Un altro vantaggio della libreria è quello di poter creare delle varianti, ma questa è una funzionalità, un po' avanzata di Fig.

Ma quindi vi consiglio di fare molta pratica sulla creazione delle librerie e cercare di mappare ogni tipo di componente che avete messo nella vostra Hai un'altra Tipologia di stili che possiamo mappare sono quelli relativi ai testi.

Abbiamo un testo con le proprietà e vogliamo che diventi una parte della nostra libreria come abbiamo fatto per i colori.

Andiamo a selezionare il testo.

Clicchiamo sull'icona più titolo.

Se io scrivo un qualsiasi testo, posso selezionare dalla lista lo stile titolo.

La libreria può essere associata anche ad altri file.

Vi basterà andare in asset e richiamare la libreria da questo libricino.

La libreria prima di essere disponibile per altri file deve essere pubblicata facendo Publish e creando un nuovo file di Fig.

Ma potete selezionare la libreria della lista.

Inoltre, ogni componente della libreria sarà sempre rintracciabile in questa side bar Asset.

Quindi all'interno troverete tutti quanti i componenti che abbiamo creato e potrete fare drag drop per metterli all'interno delle vostre interfaccia.

Può sembrare un po' difficile gestire una libreria.

In realtà è solo una questione di jeans ed una volta che avete acquisito qual è il vantaggio di avere una libreria e vi sarete abituati ad usarla? Ogni volta che create un prototipo, vedrete che sarà automatico utilizzarla.