Ok, abbiamo progettato abbiamo prototipi Pato nel modo più interattivo possibile.

C' è una terza via.

Ovviamente non funziona per grandissimi progetti, ma se dobbiamo, per esempio, progettare una semplice landing page che sia già diciamo fruibile, che sia messa online possa, diciamo già convertire con con un piccolo forma.

Allora noi potremmo utilizza dare un plugin all'interno di Fig.

Ma che si chiama anima.

È un plugin a pagamento, ma diciamo, è super performante perché è quello che ci consente di fare, è di prendere il nostro layout fatto in Fig.

Ma e trasformarlo in un progetto html la cosa in tre ore act oppure vi in vari linguaggi di codice, che questa cosa è super coppa moda perché ci consente magari di fare noi il lavoro sporco di tutta la parte di fronte tende.

Dare poi magari allo sviluppo solo per la parte diciamo è più complicata per connettere alcuni elementi di backend, ripeto, diciamo è oneroso magari da fare su un progetto molto vasto, ma su piccole pagine, come una landing page puo' essere super comodo.

Il si chiama anima l'ha trovato all'indirizzo allora anima app punto com il pricing mi sembra che sia sui trenta trentanove dollari al mese, ma potete accenderlo e spegnerlo.

All'occorrenza, per esempio.

Potrete tenerlo in piedi per un mese, fare l'ex Sporting che vi interessa e poi disattivarlo finché non avrete nuovamente bisogno di questo di questo plugin per installarlo Sempre la solita procedura.

Andate su sulla vostra sulla vostra il vostro account in alto a sinistra di Fig.

Mandate su Community.

Andate sulla vostra voce sulla vostra faccia e cliccate su Anima.

Troverete sotto la voce Braghin alla la terza voce, anima, export, freak html e più code e installate il plugin.

Dopodiché che cosa succede? Dopodiché voi andate a progettare la vostra pagina.

La vostra landing page la progettate esattamente per tutti i black point che vi interessano.

In questo caso io prototipi Pato per quattro break point, un backstop pixel, quindi millenovecento venti, poi mille e quattro e quaranta un mille ventiquattro.

Diciamo che è un ibrido per un tablet e poi un trecento Seth, che è la dimensione che utilizzo standard per la versione mobile.

Ovviamente ogni volta che ho progettato ogni singola pagina, ho cercato di fare in modo che fosse abbastanza responsive.

Quindi con i constraint di cui abbiamo parlato le altre volte in modo che gli elementi, quando la pagina si allarga e si stringe, si comportino nel modo che io desidero.

Quindi magari rimangono ancorati a destra rimangono, guardate a sinistra.

Dico questa cosa perché se utilizzati beni consent all'interno delle varie pagine di progettazione vengono portati dietro da questo plugin.

Quando realizziamo la versione responsive, la cosa super comoda appunto, anche se noi realizziamo anche la versione mobile oltre a quella dell'ex e tutte le altre intermedie.

Se noi mandiamo questo urla essendo poi veramente un html dinamico a qualcuno se lo vede da Evan che vedrà il mio prototipo esattamente progettato e animato per mobile.

Se lo vedrà da Dexter lo vedrà performante a seconda delle soluzioni di cui si trova in cui si trova.

Come faccio ad utilizzare questo plugin? Appunto, lo andiamo a richiamare, facciamo sempre mela piper uno shock rapida e scriviamo anima all'interno della nostra del nostro campo di ricerca.

Lo andiamo a chiamare e questo plugin lo troveremo qui sopra l'interfaccia dei fig, ma ci da' una serie di opportunità tra quelle che vedete per esempio, ci sono delle opportunità per rendere il più possibile animato il nostro prototipo.

A differenza delle funzioni native di Fig.

ma per esempio love referti, per esempio.

Avrei potuto farlo anche in fig, ma le entrate e le animazioni di entrata le posso fare solo grazie a questo plugin.

Qui vedete che se seleziono questo blocco ho accanto alla voce entrance animation la voce edith perché ho qui ho già assegnato una animazione di ingresso se andiamo a vedere quella che gli ho dato, anzi la togliamo, così gliela ridiamo daccapo.

Vado su Entrance animation e vedete, posso scegliere tra una serie di modalità gro, che quindi mi farà se vedete col trigger posso vedere che cosa sta, quale sarà il tipo di animazione in questo caso è da grande e piccolo.

Oppure posso scegliere lo shrink, che non è altro che il contrario.

Da piccolo ha grande posso scegliere Move Move up I'm right.

Posso scegliere tutta una serie di animazione di ingresso, per esempio, molto spesso succede che quando si scrolla avrete visto che sempre questa animazione ed entrata che gli oggetti o vengono da sinistra verso destra o da destra verso sinistra, oppure dall'alto verso il basso perché enfatizzano il focus sui contenuti da parte dell'utente.

Perché è diverso è scrollare, vedere già tutto presentata in pagina è molto, ovviamente più performante, soprattutto per il focus che forniamo all'utente l'idea di dire che pian piano che scrollo le informazioni mi si mi si palesano all'interno della pagina, quindi questa funzionalità di entrance animation diventa veramente fondamentale.

Vado a dare la mia entrance animation in questo caso mi interessava dargli moves left, anzi scusatemi move right, quindi viene da sinistra verso destra e posso darvi anche qui una serie di easing.

Quindi l'animazione della curva con cui entra un di lei posso dirgli non entrare subito.

Posso dirgli quanto deve durare questa animazione? E poi, se volessi avessi un po' di capacità di scrivere il codice css, potrei andare proprio a cambiare la transizione css che viene generata nel codice.

In questo caso è veramente molto semplice potrei semplicemente cambiare il numero, il valore di transition magari invece che meno venticinque potrei mettere meno cinquanta ma se fossi veramente diciamo bravo potrei anche andare a cambiare il codice scritto di css transition.

Basta andare su google e cercare qualche css transition, quindi oltre a quelle classiche che vengono qui presentate, si possono sovrascrivere, manipolare anche queste.

Quello la cosa interessante poi di questo tipo di funzione che posso dirgli back in jones rolling screening vuol dire questa animazione non la fai subito ma la fai quando il mio mouse inizia a scrollare all'interno della pagina.

Ed è proprio quello che vi dicevo prima che pian piano che scrollo gli oggetti si animano all'interno della pagina facciamo questa operazione per tutti gli oggetti che in pagina vogliamo che si animano.

Vedete che io l'ho fatto per tutti l'ho fatto per questo oggetto lo ha fatto per questo oggetto ad ognuno poi ho dato delle animazioni di ingresso di di lei, quindi magari con dei tempi in differita.

Come vedete qua possiamo dare ovviamente dei tempi di differita in modo che non appaia subito.

Una volta fatto questo, posso provare a pubblicarlo e a vedere che cosa succede.

Ma prima di fare questo l'altra cosa importante è che posso generare una serie di Gracepoint che a cascata si legano a questo yacht principale.

Se vado sui responsive seleziono la prima pagina.

Che cosa succede? Che lui in automatico mi sta collegando tutti i break point che io ho collegato precedentemente.

Vale a dire che una volta attivato questo tabù, se io seleziono altre pagine contemporaneamente le umide guarda guarda che sotto questa home b ricadono a ombrello tutti questi altri break point, tutte queste altre dimensioni e sarò io in automatico quando vedrò che la risoluzione è ricade in quella tavola liti vado a rappresentare rappresentare quel quegli out quella dimensione.

Altra cosa importantissima che vi dicevo prima usa fig ma con straight, vale a dire appunto che se io ho messo i constraint di cui abbiamo parlato all'inizio bene impostati bene quando vado a responsabilizzare n html questo layout vedro' esattamente che si comporta come construct che ho impostato all'interno di fig.

Ma una volta fatto questo che cosa faccio? Faccio gates code sul mio blog in lui mi chiederà che tipo di linguaggio voglio generare in questo caso per me va benissimo html.

Lui me lo genererà e mi manderà su un link che è nello specifico questo ho saltato la fase diciamo di pubblicazione, che era un po' lunga, ma mi farà vedere come vedrò il mio layout alle varie risoluzioni che ho progettato.

Ovviamente posso andare fino al mobile, posso andare a dirgli esporta codice, quindi posso generarsi proprio un html da dare poi allo sviluppo o posso generare mi un urlo da condividere con persone che sono esterne al mio progetto.

Basta andare su per Brooklyn che copiare questo.

In questo caso, per esempio, io ho proprio preso il mio HTML messo su un mio spazio fisico, mio spazio, il mio dominio e vi faccio vedere che cosa? Come si palesa questo risultato? Lo sto caricando.

Intanto vedete animazioni pian piano che entro all'interno della pagina sono alle animazioni che abbiamo abbiamo dato prima.

Vedete che ci sono anche delle interazioni.

Posso anche creare delle ancore, come ho fatto prima nel prototipo di Fig, ma posso farlo anche all'interno di anima e guardate.

La cosa interessante è che quando vado a responsabilizzare, quindi a restringere la mia pagina, lui mi sta chiamando i diversi layout che avete visto progettati in pagina.

Quindi sto creando un prodotto in HTML vero e proprio, partendo da un layout fig.

Ma se volessi, potrei anche tranquillamente andare a far compilare questi form qua sotto e rendere questo form interattivo senza scrivere una linea di codice.

Come posso fare in questo caso Fig, ma mi è molto d'aiuto.

Scusate film anime molto d'aiuto, perché basterà selezionare uno di questi campi nella sezione prototipo, andargli a dire ex input e in questo caso lui mi consentirà di scegliere che tipo di Tex in Potè Password text il tipo di plays Holder e leggerà in automatico con questo è un form da compilare.

Poi all'interno del mio prodotto della mia pagina anima online e posso andare a dirgli quale sarà la mail di riferimento a cui mandare questo forma.

Così vedete che c'è con pochissimo sforzo siete riusciti a bypassare la fase di sviluppo in maniera autonoma e un'auto completamente fatto in Fig, ma diventa un prodotto a tutti gli effetti navigabile e ispeziona abile malato codice.

Quindi può essere un punto di arrivo finale se fate una lending oppure un punto di partenza iniziale se volete dare questo lavoro in pasto agli sviluppatori, che magari lo rendono dinamico con un back-end con altri elementi.