Lezione dal corso UX Design
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.
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.