Ok, ma adesso abbiamo tutti gli elementi per partire.

Iniziamo a mettere le mani in pasta.

Oggi vorrei parlarvi di questo tool che ci seguirà per tutte, diciamo il resto delle nostre elezioni.

Si chiama Fig, ma é al suo interno, cioè un altro sotto tool che si chiama Fig Gemma.

Questi sono due tool che oggi stanno prendendo molto piede.

Anzi, diciamo che ormai sono diventati uno standard a livello internazionale per la progettazione di prodotti digitali.

Abbiamo tanti competitor, ci sono tanti i prodotti oggi con cui fare design digitale.

Recitiamo tre grandi competitor, diciamo sul mercato.

Sono sketch xD a.

Dobbs di Fig.

Ma ovviamente teniamo fuori tutti quei prodotti che sono stati utilizzati per anni per fare progettazione digitale.

Ma ovviamente oggi non sono più diciamo al posto con i tempi come Photoshop di illustrare perché nascono ovviamente con Tu Tltro è intento.

Noi abbiamo scelto di utilizzare figa ed è anche il tuo.

Lo utilizziamo all'interno del nostro master di Winter and Hidden per diversi motivi.

Intanto è un tool cross-platform.

Questo per noi è fondamentale perché vuol dire che può essere utilizzato sia se si ha un Mac, sa se sia un pc e questo oggi in tempo di essere inclusivi e e soprattutto poter insegnare a persone più disparate.

Conte con attrezzature diverse diventa un elemento fondamentale, ma questo nell'insegnamento.

Ma non solo.

Dobbiamo iniziare a prendere in considerazione che quando si è prodotta un progetto digitale non ci sono solo i designer.

Anzi, addirittura una stima di qualche tempo fa diceva che il sessanta per cento delle persone che usano Fig ma o di Gemma non sono gli ai designer.

Questo per farvi capire come è appunto inclusivo questo tool, perché inizia a mettersi dentro e a farci relazionare anche chi si occupa di content, chi si occupa di marketing e anche gli sviluppatori che sono come dire un tassello fondamentale della nostra, della nostra la progettazione.

Quindi la cosa bella di Fig.

Ma è questo è anche il fatto che cloud-based quindi vuol dire che è un tool che gira totalmente se vogliamo su browser.

Quindi basta avere una connessione e si può lavorare con qualsiasi computer che ha un browser dove si può navigare.

Questo altro punto diciamo a favore di questo tool che chiamiamo il terzo punto è che e qui gli ha dato un'accelerata pazzesca.

Ovviamente nella nella sfortuna, ma la pandemia ci ha da diciamo opportunità di te starci su nuovi fronti ed è quello di farci lavorare contemporaneamente con più persone sullo stesso file.

E questo diventa veramente molto importante sia quando si deve lavorare con diverse figure professionali all'interno di uno stesso file, sia quando più designer si occupano di portare avanti aspetti diversi all'interno dello stesso layout.

Non in ultimo vi assicuro che mentre prima metteva un po' d'ansia questa cosa.

Ma adesso io devo dire che la gestisco abbastanza bene.

Voi avete sempre un con ha diretto il vostro cliente.

Soprattutto può vedere costantemente quello che state facendo gli avanzamenti dello stato lavoro.

Cioè il vostro lavoro non è più, come dire no appannaggio vostro sul vostro hard disk nascosto dove voi lavorate con il favore delle tenebre, ma è un file esposto a tutti.

Quindi è vero, ci sarà quell'effetto, un po' umarell del vostro cliente che sali e vi guarda.

Però vi assicuro che non dura molto, ma diventa un elemento fondamentale, perché anche lì, diciamo la collaborazione con i vostri clienti diventa veramente più efficace.

Abbiamo detto parliamo oggi però di film che è una sottocosto, la Fig.

Ma per chi conosce Miro che un tool come una grande diciamo lavagna bianca dove poter lavorare insieme in tempo reale.

Film ha fatto questo suo sottoprodotto che si chiama Feed them.

Intanto vediamo come si può avere un account fig molto semplice.

Si va sul sito film punto com è ci si registra, basterà mettere le proprie credenziali a omologarsi con con Google.

Dopodiché considerate che se lavorate con elementi draft, quindi con progetti costantemente draft, voi non non dovete pagare nulla.

Il pricing di questo tool arriva quando si lavora con i più grandi con liberi e condivise.

Però ecco un tour per cui si può lavorare free per parecchio, parecchio è tempo, insomma è anche il pricing.

Poi diventa veramente molto economico.

Mi sembra sui dieci dodici dollari al mese per per persona una volta che ci siamo iscritti noi.

In questo caso io ho scaricato l'applicazione backstop perché è un pochino più performante.

Se volete farlo anche voi, vi basterà andare a fondo pagina del sito di Figline, cliccare su download che adesso trovo Eccolo qui e poi qui potete scegliere di scaricare L'applicazione o per me o per Windows.

Vedrete che qui avete altri elementi di download potete scaricare sia l'app per iOS che per Android.

Attenzione, non sono api che ci consentono di evitare il file, ma ci sono app che ci consentono di visualizzare i nostri layout da quelle piattaforme.

Molto comodo invece qui non non viene rappresentato, ma fig, ma per iPad invece ci consente di invece anche evitare e lavorare sui file molto comodo.

Se per esempio abbiamo un ipad con una penna grafica connessa, vogliamo lavorare sul film che adesso vediamo ci consentirà di disegnare direttamente sulla nostra tavola di lavoro.

Poi abbiamo un fonte installer che lo vedremo dopo, però serve fondamentalmente per fare in modo che se volete utilizzare solo la versione browser di FIG, ma con questi fonte istat, tutte le fonti che avete installato sul vostro computer verranno lette anche dal vostro browser.

Devo dire che è una pratica poco comune si consiglia di utilizzare più l'applicazione Dex top che è la cosa migliore è però se proprio in qualche caso state lavorando su un computer non vostro e non volete installare Phil, ma con questi forti installer riuscite diciamo a gestire la la parte delle fonti anche su un anche su browser.

Andiamo a vedere adesso come si crea un nuovo file di gemme, basterà aprire il nostro file FIG, ma e vedrete che qui abbiamo tra le varie impostazioni tre possibilità un nuovo file FIG, ma un nuovo file di gemma e poi invece la possibilità di importare un file da una piattaforma diversa.

Per esempio sketch.

Per esempio, se voi siete avete provato qualche tempo fa sketch che un altro tool per fare design di prodotti di cui hai, potrete impor portarlo direttamente qui con quasi veramente pochissima ehmm perdita di come dire di affidabilità.

Insomma, il file è veramente molto simile a quello che avete fatto su sketch.

Ma andiamo su film.

Ecco qua quello che ci si presenta è intanto questa grandissima opportunità una serie di template fatti apposta per farci lavorare a distanza con altri.

Quindi potremmo creare che sono un template per creare dei flash art, quindi no, no, i flussi da mappare del nostro sito, una user journey map potremmo creare un gump.

Ci sono template per ogni cosa.

Dobbiamo fare brainstorming qua.

C' è un template per fare brainstorming con i soliti PostIt, divisi per colore con le varie persone che magari di solito all'interno di una riunione, iniziano a mettere i propri commenti come se fossimo tutti nella stessa stanza, ma ovviamente sparsi nel mondo.

Quindi ci sono veramente tantissimi template, anche quelli più divertenti.

Per esempio addirittura forza quattro così perché si vuole divertire.

Ma facciamo che insomma, noi partiamo da nessun temple in questo caso per vedere l'utilizzo della piattaforma in modo più snello come fatto film è appunto un'enorme tavola bianca sotto abbiamo pochissimi tool a disposizione, ma è proprio questa la forza.

Abbiamo appunto un pennarello che può essere, diciamo, ovviamente gestito con variazioni diverse di evidenziatore, colori, eccetera eccetera.

Dopodiché abbiamo lo strumento shape.

Questo è molto utile se dobbiamo organizzare per esempio, dei diagrammi di flusso e potremmo rappresentare magari ogni step, ogni nodo con una forma diversa a seconda di quello che dobbiamo raccontare.

I nostri soldi e cari PostIt con vari colori, ovviamente la possibilità di scrivere testi dei connettori e poi questi che sono secondo me delle parti super carine, importanti di film che sono i timbri ni sono degli adesivi super carini super fan permettere come dire dell'election all'interno della fase di brainstorming del nostro documento.

Supponiamo che io stesso sto mettendo un PostIt qua dove dico il sito deve avere almeno una call to action.

Ok, sto scrivendo questo commento per i miei per i miei, diciamo altri colleghi che stanno lavorando con me sul fai.

La cosa figa che vedete è che se ci fosse qualcun altro adesso dall'altra parte a gestire con me questo fa il suo PostIt.

Sarebbe firmato con il suo nome e avrebbe il suo colore.

Gli altri, per esempio, gli altri colleghi che stanno navigando e vogliono mettere un ok a questo, possono prendere questo sticker, metterlo qui e darmi l'okay a questo a questo commento.

Quindi immaginatelo veramente come una a tavola.

Una lavagna bianca dove ci riuniamo intorno iniziano a mettere i feedback e commenti.

Se adesso io potrei farlo anche a mano, lo faccio a mano.

Ma immaginate che sto lavorando su questo tool da iPad.

Potrei iniziare a schiacciare delle parti di interfaccia dov'é dire, per esempio, che questa è la mia home page iniziò a disegnare dicendo che qui ci sarà il logo.

Qui ci sarà una parte del menu.

Qui ci me ne sono la headline e poi dico che qui ci sarà un altro elemento, no? Che sarà comparire.

Vado a disegnare una gallery ovviamente non con la mia abilità del mouse, magari fatto a mano su una tavoletta per me è più semplice.

Però l'idea è proprio questa che potete iniziare a schiacciare, a dare vita alle vostre idee.

E non solo questa è proprio la versione Besic di è di di Gemma, ma vediamo appunto cos'altro possiamo possiamo fare Supponiamo che io voglia creare un diagramma di flusso.

Posso iniziare a mettere delle forme dove scrivo che sono appunto Home.

Ok, non mi piace questa forma.

Gli dico che questa parte c'è un quadrato e poi dico Ok, subito dopo la homepage, pagare ci sarà.

Magari possiamo collegarci sotto la pagina della BAU That's.

Okay, quindi creare una sorta appunto di diagramma di lusso classico.

Posso collegare queste due pagine semplicemente con questa icona connettore.

Vado qui, prendo e collego immediatamente le pagine.

Questo diventa così un riferimento visivo immediato per chi sta lavorando con me.

Non solo posso farlo, così amano.

Ma siccome la cosa bellissima dei Fig ma è che è piena di persone, quindi di una community fantastica che costantemente scrive Plague in metà materia a disposizione materiale potete trovare un sacco di widget.

Vengono chiamati così quindi degli add-ons all'interno di film dove si possono prendere, diciamo, elementi già fatti per creare cose che ci servono.

Vi faccio vedere un esempio.

Se io vado qui su la sezione widget con cui avete anche tanti sticker per diciamo che l'aspetto fisico ma anche molto Fanny, se vado sul widget, per esempio, è Cerco Said Map.

No, forse era un plugin.

Scusatemi.

Ok, guardate e vado sul viso al set up, dico Ok Ran, Quindi riproduci questo plugin.

Guardate che cosa super bella.

Lui mi crea questo piccolo widget dove io basta che metto a cascata Intendi, diciamo così la struttura del mio sito e lui me l'ha Rick Rea in modalità visiva.

Facciamo un esempio.

Appunto.

Emetto home page.

Poi vado a capo e do una tabulazione per creare una dittatura About Scusatemi.

Brought company manager un altro E poi vado ancora a capo e vado indietro con con il back crea un'altra pagina.

Questa la chiamiamo prodotti e mettiamolo sotto categoria è categoria uno, categoria due, categoria tre e via dicendo.

Contatti Bo fac Ok, questa potrebbe essere la struttura che abbiamo immaginato.

Il nostro sito.

Posso dirgli se deve andarsi a comporre in verticale oppure in orizzontale se i connettori saranno diciamo morbidi oppure rigidi, ma una volta fatto guardate con pochissimo guardate che e so che il colore di base non si vede lo andiamo a cambiare senza troppo sforzo.

Ho creato una said map navigabile semplicemente scrivendo tre righe di testo perché figli? Gemma mi dava quel tipo mi da' questo tipo di widget se poi, per esempio voglio anche collegare altri elementi qui mi basterà o prendere e lanciare verso qui o crearne un'altra semplicemente cliccando sul più che ci trova qua in questo modo per raggiungere un altro filone all'interno della mia settimana.

Oppure posso prendere il connettore e andare a fare in questo modo qua è ripeto, è una grandissima timeline, cioè una grandissima lavagna bianca.

Potete utilizzarla per tantissimi scopi, addirittura anche qui, sempre tornando sui widget, ce n'è uno che si chiama mi sembra calendar e adesso vedo in me lo ricordo calendar esatto, anche qui fatto da mirko santangelo, che è un grande diciamo contributor della community di di fig, ma di edifici jim, potete disegnare un calendario qui, utilizzare le varie modalità week month, fare la rappresentazione più stretta, più chiara e avendo questo supporto qui potete iniziare per esempio a disegnare delle cose.

Magari volete scrivere che ci sarà questo sprint di design e qui magari volete scrivere che state in vacanza, allora potete mettere che ne so, un timbro.

Insomma, potete utilizzare veramente fighi gem per tanti scopi.

Ultimo e non diciamo anche qui per importanza, parlando delle mappe funzionali, esiste anche qui questo widget, sempre sviluppato da mirko santangelo.

Molto carino, ma si potrebbe fare veramente tranquillamente anche a mano.

Dove si possono creare? Diciamo, dei focus sulle sezioni che si vogliono raccontare prima di andare a fare il wireframe.

Anche qui molto semplice.

Basta andare sul widget e cerchiamo content map.

Eccolo qua, guardate, zoomma un pochino e guardate qui.

Che cosa mi dà un contenitore dove iniziò a raccontare? Perché, appunto, non è altro che appunto una mappa di testi che raccontano cosa ci sarà, dico, qual è il gol di Quest'aula? Questa pagina si chiama un peggio.

Ok, il gol di questa pagina sarà convertire nuovi utenti alla piattaforma e poi iniziò a mettere una serie di scusatemi di nomi alle sezioni.

Quindi mettero' rose action, per esempio, che normalmente è la sezione diciamo di apertura? No, che cosa ci voglio mettere in questo aereo section.

Bene, metto in più e ci metto una descrizione testo.

Ci metto testo con valori proposition, poi posso mettere per esempio un altro elemento dico guarda, in questo caso ti metterò una GTA, quindi una call to action e posso andare avanti ancora a mettere altri elementi e magari che so illustrazione di un grafico perché so che qui mi piacerà raccontare questa cosa e ho fatto gia' un pezzo di mappa funzionale.

Poi vada ancora avanti crea un'altra sezione qui metterò per esempio la Fletcher numero uno del mio prodotto.

Ok, vado avanti.

Che cosa ci metto qui? Bo testo sul sulla caratteristica numero uno ovviamente la the taglieremo meglio di così e poi posso aggiungere altri elementi.

Posso mettere un elemento immagine posso mettere un elenco puntato? Posso immettere magari già mettere dei tag semantici se so che ci andrà.

Per esempio trattiamo di pagine web, posso mettere se questo è un account accaduto, eh? Cinque se sarà un'immagine appunto, oppure se sarà una call to action posso già scriverlo qui, ok e andare avanti fino a che appunto non ho concluso il mio sito, cioè la mia mappa funzionale del sito.

La cosa super bella che poi vedremo di fingere di fingere che qualsiasi cosa facciamo qui con un copia e incolla possiamo portarla direttamente sul film o altro elemento che vi faccio vedere super carino di fingere che io trovo super comodo è che qualsiasi link voi copiate e poi portate incollate qui, guardate come lo riproduce in maniera visiva è super ottimizzata qui.

Immaginate anche voi state utilizzando questa board con i vostri colleghi per condividere ispirazione spunti, suggerimenti, benchmark invece di mettere quei link bruttissimi orrendi dove non si capisce niente Guardate che cosa fighissima che fai, Gemma mi fa già una card super carina con i dati che prende open graph dell'immagine di copertina, il titolo dell'articolo e il link da riportare.

Quindi immaginiamo che adesso io cerco color pallet.

Ok, troviamo questo sito qui.

Mi piace.

Lo voglio condividere con il mio team.

Lo copio, lo incollo e guardate qui.

Poi posso decidere l'orientamento, perché magari posso mettere su Oprah.

Scusate, ho cliccato e posso decidere, insomma, di orientarlo in maniera diversa.

Posso decidere anche che sia solo un link di aprirlo.

Che sia solo un testo.

Ok, questo sta a noi.

Io diciamo Liam.

Li tengo sempre nella prima versione, perché la la versione diciamo accadde quella più interessante.

Quindi questo è Phil.

Jim.

Ovviamente quello che non vi ho ancora detto, ma che vedremo poi un film, è che il potenziale di questo è che qui non ci sarà solo la mia faccina, ma possono esserci le facce di tutte le persone che collaborano e vedere i cursori in tempo reale.

E quindi questo share qui diventa fondamentale perché diventa come dire il canale di Apple Apertura con chiunque io voglia condividere questo link anche con qualcuno che non è iscritto a di Gemma, ma che può tranquillamente visualizzare se io ho messo l'opzione no one will Die Linke può tranquillamente visualizzare il contenuto che ho creato.

Quindi questo è l'introduzione al pm.

Adesso inizieremo invece a vedere di che cosa si tratta Fig.