Ok, come abbiamo detto precedentemente Fig, ma ha un grandissimo diciamo potenziale, è dentro la sua sai Burns Peck per passare il design allo sviluppo.

Ma se veramente vogliamo passare il design allo sviluppo come dei veri pro, io vi consiglio anche di provare questo questo software che si chiama Zeitlin Zipline, un applicativo che è nato proprio per cercare di potenziare al massimo questa parte di passaggio delle informazioni tra design sviluppo è un plugin e quindi di terze parti, che può essere utilizzato sia su fig, ma ma anche su sketch XD mi sembra anche su Photoshop, ovviamente con e con meno potenziale.

Ma andiamo a vedere come utilizzarlo all'interno di Fig.

Ma utilizziamo lo stesso progetto di prima per vedere come diciamo quali sono le variazioni e le differenze.

Film eh scusate zipline è sempre un plugin che va aggiunto dentro film.

Si cerca dentro community ZPM chiaramente.

Ovviamente la cosa in più è che bisogna farsi un account di questo di questo zip-line anche lui diciamo free per un progetto e a pagamento per tre.

Se invece si vogliono tenere tre progetti, però diventa veramente un asse fondamentale.

Per esempio io come libera professionista è un diciamo una quota che preferisco pagare mensilmente, perché è talmente tanto, diciamo lefort che mi toglie l' entropia che toglie nella gestione e nella comunicazione con lo sviluppo che diciamo, mi fa risparmiare il cinquanta sessanta per cento di tempo che prima diciamo utilizzato nella comunicazione costante è con lo sviluppo, come si usa è Zeitlin in connessione con film, a differenza di figa, a differenza di Fig.

Ma ovviamente cioè qualche passaggio in più mentre filma è come dire naturalmente pronto ad accogliere la sua parte di Spector all'interno del suo tool per collegare queste due, diciamo questi due software, occorre ovviamente fare un passaggio in piu' come facciamo noi richiamiamo sempre come le nostre.

Cercate me, la P.

Il nostro blog di riferimento in questo caso è Zeb Lynn.

Ovviamente qui non lo vediamo, ma ci sta chiedendo il passaggio di bloccarci al servizio.

Noi ci siamo loggati quando vogliamo caricare una pagina su questo servizio.

Non dobbiamo fare altro che dire export, quindi selezioniamo la nostra tavola.

Possiamo farne anche piu' contemporaneamente.

Chiaramente lui me lo dice.

Dopodiché clicco su export.

Mi chiederà quali di questi progetti vuo su quale di questi progetti vuoi caricare? Come vi dicevo io uso più progetti contemporaneamente, vado a selezionare il mio progetto di riferimento e vado a cliccare su export.

A questo punto quello che succederà è che mi ritroverò su questo software che si chiama appunto zipline ed è in questo caso anche sia un'applicazione desktop che un sito che potete navigare.

Quindici anche una web app se vi bloccate dentro zeitlin punto com é quello che succede è che lui vi mette le vostre tavole all'interno di questa piattaforma zebra.

Una cosa interessante rispetto al film che lavora, diciamo a tante connessioni e tante integrazioni.

Abbiamo una sezione dashwood dove troveremo tutte le tavole che abbiamo carica per praticità questa suddivisione destro e immobile l'ho fatta io per fare in modo che lo sviluppo potesse facilmente muoversi tra i vari gracepoint.

Ma per creare nuove sezioni basterà posizionarsi all'interno tra una tavola e l'altra, cliccare qui e per esempio creare una nuova sezione da visualizzare.

Poi possiamo spostare le sezioni semplicemente trascinandoli, facendo dragan troppo all'interno della stessa della della stessa area di lavoro.

La cosa interessante è che posso ovviamente fare share ovviamente di questo documento con tutte le persone che voglio e posso anche connette condividere all'esterno posso mettere una serie di descrizioni che possono essere d'aiuto per lo sviluppo.

Per esempio, una cosa classica che succede è che lo sviluppo Michele, ma le fonti dove le prendo? Mai file originale qual è? E quindi questa è una mia convenzione.

Chiaramente ognuno puo' usare quella che vuole, ma è quella di mettere nella sezione descriptions qui tutto quello che può servire allo sviluppo per muoversi in maniera autonoma.

E la cosa interessante è che potremmo integrare tutto questo flusso anche con altri tool è di gestione del lavoro.

Possiamo integrare per esempio con slac, con gira con teams, controllo con story book.

Se qualcuno sviluppa in Storybrooke, sono tutte integrazioni super utili perché creano automatismi.

Anche in questo caso.

Immaginate per esempio, che è un flusso di lavoro per cui lavoriamo in maniera già ogni giorno rilasciamo una pagina, per esempio all'interno del nostro Zeitlin.

Invece di andare ogni giorno, noi a scrivere qualcosa o sul carrello o su slac creiamo delle integrazioni automatizzate, per cui ogni volta che magari faccio una modifica o carica una modifica su Zeitlin crea queste integrazioni nel mio flusso di lavoro e vedete che già qui diventa molto è potente l'altra cosa che vedete è che qui sotto, per esempio, c'è scritto che mi sta facendo vedere tutto il css e html.

Che cosa vuol dire? Vuol dire che nel momento in cui io vado a cliccare all'interno vedete che cio'.

Questa modalità di Spectre è molto simile a quella che abbiamo visto su Fig, ma ma leggermente più potente.

Questo perché perché intanto vedete, oltre a darmi sempre l come dire la composizione di come questo oggetto è stato distribuito, quindi magari che ha un'auto la larghezza un'auto altezza.

La cosa interessante è che mi sta dando proprio il css e html puro, non spezzettato come nell'altro contesto e mi sta collegando direttamente gli stili di base che io ho creato su film.

La differenza rispetto a prima è che se io ho creato degli stili, lui automaticamente me li va a collegare a quella che viene chiamata style guided Zeitlin.

Che succede? Guardate qua, clicco e lui mi sta portando in quest'altra pagina per farvi vedere come ci si arriva.

È qui sono sul dashboard.

Qua vado su Style Guide, dove vedo tutti le variabili pronte la differenza rispetto a feedback con un click gli sviluppatori si scaricano tutte le variabili già pronte, vale a dire che lo sviluppatore va qui successe s clicca e si scarica tutto un file pronto che dove sono già standardizzate tutte le tipografie.

Tutta la tipografia che ho fatto sul film pronta per essere caricata all'interno del nostro file di sviluppo e idem vale per la paletta colore vedete, trovo tutto già variabili zato e la cosa ancora più interessante è che abbiamo parlato di linguaggi in questo caso css, ma supponiamo che il nostro sviluppatori lingua lavori in les o in sasso.

La cosa super è interessante che potete fare è quella di andare qui su questo setting che trovate in alto a destra nella sala bar e dirgli ok, ma io non voglio solo le estensioni che mi facciano vedere il codice css html, ma voglio poter vedere tutte le estensioni che ci sono da poter aggiungere a zerbi.

Supponiamo che il nostro sviluppatore, il sviluppo in sas noi aggiungiamo questa estense all'interno del nostro progetto, quindi andiamo qui, selezioniamo il nostro progetto e aggiungiamo questa estensione qui.

Quindi che succede? Che se adesso andiamo su zeitlin, tra le varie estensioni a disposizione abbiamo anche sas, quindi vuol dire che il codice è pronto per essere digerito dallo sviluppo è già scritto naturalmente in codice soos, quindi molto più rapido.

Questo vale ovviamente non solo per il colore, ma anche per la parte di è di di tipografia.

Possiamo ovviamente accendere e spegnere le estensioni come ci interessa.

Altro potenziale super interessante è zeitlin è quello di crearmi appunto tutta la sezione di componentistica, mentre su film dovrei andare a cercare dove sono i componenti come sono costruiti qui tutto molto facile.

Supponiamo che il mio sviluppatore sta vedendo al mio layout all'interno di zeitlin.

Intanto vedete, qui abbiamo tutte queste ehmm.

Questo recap, per esempio, che io trovo sopra interessante, mi dice ovviamente che abbiamo questo componente nella mia salga in generale e mi dice che questo oggetto è utilizzato in altre otto otto scrive all'interno del progetto e che se vado qui me le fa vedere tutte quante.

Questo diventa super utile per spiegare al vostro sviluppatore la modularità con la quale state progettando e in più appunto, mi basterà tappare su la parte azzurra di questa linguetta ed essere portato alla diciamo componente originale che ha dato vita a questo oggetto.

Come vedete in questa piccola linguetta ci sono queste tre questo stack di tre blocchi con tre linee, una piena, una semi piena e una vuota che sta ad indicare che di questo componente io ho creato delle varianti.

Ed ecco qui che il mio sviluppato si ritroverà tutte le varianti in pagina.

Quindi ovviamente io ho sviluppato questo pulsante così, ma l'ho sviluppato più scuro l'ho sviluppato blu l'ho sviluppato più piccolo e posso accendere o spegnere le varianti per valutare di volta in volta come implementarle.

Questo vale per tutti gli oggetti che hanno piu' punto variazioni una tecnica che spesso si usa e utilizzare varianti gli stessi oggetti anche per variazioni tra black point.

Per esempio, questa card è utile, è disegnata in modalità backstop, ma abbiamo anche la sua stessa variante in modalità mobile.

Quindi, se volessi vedere per esempio la carne di un corso di questo sito in modalità mobile, potrei vederla qui rappresentata.

Se volessi vederla sulle modalità backstop, basterebbe cliccare tra le varianti all'interno di Zeitlin.

E ovviamente anche questi oggetti sono totalmente ispeziona abili e ci dice ovviamente se c' è una variante colore associata.

Se c' è una variante tipografica associata, come vedete in questo caso e mi consente appunto di creare veramente un endo fiom preciso al cento percento, una una funzione che mi piace moltissimo, che vi invito ad utilizzare soprattutto agli sviluppatori.

È questa che io trovo veramente molto pratica è quella di prendere e rendere flottante il vostro layout per metterlo in sovrapposizione.

Vedete, con questa modalità io sto mettendo il mio layout al cento per cento in modalità trasparente.

Lo posso vedere ovviamente alla dimensione che preferisco, ma posso vederlo in modalità più o meno opaca, perché potrei sovrapporre lo al mio ambiente di sviluppo per vedere se esattamente gli oggetti li sto progettando, come avevo ehmm come sono stati disegnati.

Ok, usciamo da questa modalità.

Quindi, riassumendo, Zeb Lin è un tool in più rispetto al film, ma ci dà tante opportunità.

In primis rende migliore il workflow grazie alle integrazioni con i tool esterne di lavoro.

In secondo luogo, mi permette di poter visionare il codice l'output in diversi linguaggi in in terzo luogo, appunto, di poter vedere facilmente tutte le variazioni degli elementi che ho progettato senza dovermi muovere all'interno del mondo, insomma di film che è un po' più complesso.

Non in ultimo cioè questa nuova funzione che è super interessante che si chiama flow all'interno di zerbino che ci consente di vedere se ci sono dei collegamenti tra le pagine, perché quello che succede è che quando diamo questo documento agli sviluppatori che vedono delle pagine totalmente scollegate tra di loro, anche qui dovremmo ricostruire il flusso che abbiamo ricostruito nei we're from.

Ma se noi abbiamo prototipi, pato il nostro fa il suo film la cosa super comoda di zipline che una volta che hai cliccato una tavola che si porta dietro dei collegamenti che abbiamo già fatto come prototipo su film e clicchiamo su la voce su questa voce in alto, nella riga dei miei topi delle mie tavole, lui in automatico mi genera dei flow, cioè vale a dire se vado nella sezione flow, lui è stato in grado in automatico di generare il collegamento tra le pagine che erano già collegate tra di loro e se per esempio non dovessero esserlo posso farlo io in automatico, andando a prendere un elemento e collegandolo semplicemente trascinando una linea.

Quindi in questo caso Zeb diventa un ulteriore diciamo specifica per la parte di sviluppo, perché mi consente anche di fargli capire qual è la relazione tra le pagine.

Quindi ripetiamo stai guides, dove trovo tutti gli elementi la possibilità di scaricare le variabili in un unico click, i Flo che vengono generati in automatico dalla parte di prototipo di Fig.

Ma e poi ovviamente c'e' la possibilità di scansionare, di fare esperte su ogni parte della mia interfaccia in maniera molto agevole.

Quindi ricordiamo che Zeb Lin è un tool a pagamento, ma sicuramente migliorerà la qualità della vostra vita come designer vi farete amare sempre di più degli sviluppatori.