Bene, adesso arriva il momento più difficile di tutti quello di cercare di fare in modo di passare tutto il nostro sudatissimo lavoro è allo sviluppo.

Mi ricordo che i primi anni in cui progettavo facevo questi layout meravigliose al pixel delle cose, ovviamente tutte ponderate, poi andavano allo sviluppo e sembrava ovviamente dei quadri di picasso, dove insomma gli occhi erano in basso, tutto tutto alterato.

Questo è un po'.

Ovviamente non era colpa mia degli sviluppatori, è anche colpa del fatto che non avevamo gli strumenti giusti per condividere il nostro design.

Mi ricordo che agli inizi, appunto, si faceva tutto su photoshop.

Noi davamo questi questi file interi e i nostri sviluppatori ci dicevano ma noi guardiamo solo alla Japan, quindi poi andiamo un po' ad occhio.

Ma come ad occhio noi ci abbiamo messo anni a costruire questa precisione e ovviamente poi tutto saltava in aria.

Ovviamente con il tempo questa situazione è fortemente migliorata, ovviamente perché è migliorata la sensibilità e il rapporto tra design sviluppo, ma è ovviamente migliorata grazie al fatto che i thule stanno cercando sempre di piu', di mettere in connessione questo passaggio.

Nello specifico la pratica di passare e le informazioni di design allo sviluppo viene chiamata Hand off.

Ok, quindi ogni volta che sentirete questa parola è insomma è entrata in relazione con questi pass.

Questo passaggio di consegne si può fare in diversi modi fig, ma al suo interno accoglie già questa modalità.

Ci sono anche altri tool che lo rendono ancora più performante.

Lo vedremo nella lezione successiva, ma possiamo già diciamo ritenere fig, ma uno strumento super potente in questo contesto.

Come facciamo a passare il design allo sviluppo? Molto semplice.

Gli diamo sempre il nostro link di fig.

Ma ovviamente però dobbiamo fare in modo che il nostro sviluppatori dei nostri sviluppatori abbiano accesso alla parte di visualizzazione della sezione expect l'importante appunto, che possano vedere il prodotto e il prototipo che abbiamo progettato, come fanno gli sviluppatori.

Poi a vedere la parte di codice è veramente molto, molto semplice.

La cosa interessante dei feedback nella sua sai bar laterale si vede proprio nelle sue due e tre e diciamo macro vocazioni, la prima tablet legata a tutte le variazioni legate al design.

La seconda tap è tablet, legata a tutto quello che concerne il prototipo, la terza tab.

Ed è proprio il percorso che noi stiamo facendo in questo nostro corso è legata alla parte di speck, cioè la parte che fa diciamo ispezionare il lato, distanze, codici tutto allo sviluppo.

Quindi quando noi attiviamo questa terza tab, che cosa succede? Che gli sviluppatori possono muoversi all'interno del design.

Intanto avere sempre attiva la modalità di vedere le distanze all'interno del documento quando vado a posizionarsi su un oggetto in piu', quando se mi muovo all'interno di un oggetto facendo doppio click guardate che cosa succede.

Mi evidenzia per esempio dei gap costanti se li ho dati con l'auto layout.

In questo caso, per esempio, vedete che questo blocco é tenuto insieme da questa regola di quaranta pixel e viene subito evidenziata qui nelle proprietà.

E infatti c'è scritto che c' è un gap costante di quaranta pixel.

Non solo la cosa più interessante che potete vedere qui è che c' è scritto ovviamente se ci sono altre informazioni che devono sapere, tipo il metodo di blending, quindi se per esempio il colore è in modalità normal modalità moltiplica ok e poi possiamo vedere come sono gli attributi di riempimento di questo oggetto, proprio come le abbiamo disegnate.

Li troviamo qua e subito in basso la parte più top per gli sviluppatori e che trovano già micro parti di codice sviluppate per loro e sono ovviamente selezionate in base ai tipi di linguaggio.

Diciamo che qui Phil ma fa una grande suddivisione in tre linguaggi CSS, iOS e Android.

Altri tool di sviluppo vi daranno la possibilità di sbocciare tra anche linguaggi diversi.

Ad esempio CSS potrebbe diventare Les Lo sai che sono diciamo, dei linguaggi CSS più evoluti perché lavorano con le variabili.

In questo caso Fig.

Ma lavora solo con questi tre linguaggi, ma è già molto, perché quando andiamo a muoverci all'interno di questo di questo elemento, per esempio, vedete che qui ci dice che questa tipologia di elementi sono messi insieme dalla regola Display Flex Flat Direction.

Vi ricordate che quando abbiamo parlato di griglie di posizione degli oggetti all'interno della pagina, abbiamo parlato anche di Xbox che questa modalità che fa si che gli oggetti si predispongono a seconda della loro diciamo del loro contenuto, all'interno di blocchi piu' fluidi.

La cosa bella di Fig.

Ma che è gia' nato con quella mentalità lì e in automatico suggerisce le regole di codici da scrivere allo sviluppo.

Questo vale per il layout vale per il posizionamento, ma ovviamente vale anche per la parte di tipografie di colore.

Se per esempio seleziono un testo all'interno della sezione expect, non solo super comodo mi fa copiare la parte di copie perché supponiamo, appunto non stiamo generando un sito totalmente dinamico, dove i test sono esattamente quelli che ho scritto.

Lo sviluppo può copiare direttamente senza portarsi dietro nessun tipo di formattazione, ovviamente il contenuto.

Dopodiché la cosa è super interessante.

Se riconosce uno stile legato, lui me lo me lo definisce, quindi mi dice guarda questo questo testo a questa grandezza, queste dimensioni, tutte queste specifiche, ed è uno stile che è stato già definito all'interno della pagina.

Questo vuol dire che se per esempio, lo sviluppatore andasse qui nella parte grigia del documento, troverebbe tutti, diciamo quelli che in gergo sono chiamati tocca tutte le parti variabili già standardizzate da me designer.

Quindi non si deve mettere lui a creare una standard standardizzazione degli elementi, ma se la trova già fatta da noi designer e quindi quello che deve fare è semplicemente andare su ogni elemento e andare a copiare il codice di questo stile e rinominare ovviamente riportarlo all'interno della sua programmazione con gli stessi elementi.

Questo, ripeto, vale anche, per esempio, per la parte di colore.

Non solo mi dice il il come dire, la variabile di coloro che ho definito chiaramente mi dà tutto il codice esa numerico mi da tutta una serie di informazioni aggiuntive.

Mi dà anche, per esempio, il colore nel nel metodo specifico che preferisco visualizzare hsbc che sl o css puro, dove ovviamente viene scritto con la RGB e poi l'ultima voce che è l'alpha.

Insomma, a seconda dello sviluppo e di come gli interessa tirar fuori questa informazione può scandagliare veramente tutto all'interno del mio documento.

Chiaramente, se sono un po' più scaltri, quello che gli possiamo anche consentire di fare i nostri sviluppatori e anche quello di se vedono che quel soggetto appartiene a una componente, quindi lo possono vedere già negli expect dicono Questo oggetto è stato standardizzato.

Possono cliccare qui su questi quattro rum Betty come faremo noi nel lato design e lo porteremo a vedere tutte le varianti di questo componente che abbiamo creato in modo che lo sviluppo crazy diciamo la sua parte atomica di componentistica, lato sviluppo, senza doversi mettere lui a mettere ordine nel nostro fai quello che succedeva prima che noi credevamo tutti elegge oggetti scollegati tra di loro e gran parte del lavoro dello dello sviluppo era di razionalizzare tutte le cose che avevamo creato, creando appunto degli atomi di base da cui partire.

Invece ad oggi questo lavoro è ricade ovviamente è onere del designer e insomma, si consiglia di farlo perché più facciamo bene questo lavoro, più siamo sicuri che il corrispettivo l'altro sviluppo sia sempre più fedele.

Come vedete, non è poco tutto quello che offre Fig, ma il lato expect per lo sviluppo è veramente molto, molto elevato.

Ma vedremo poi nel capitolo successivo e possiamo portare questa parte di Endor ad un livello ancora più avanzato con un altro tool che vediamo nel capitolo successivo.