Ok, adesso vedrete che pian piano tutto il nostro discorso inizia a prendere forma.

Abbiamo parlato di grilli e abbiamo parlato di vari touch point di riferimento.

Qual è la misura giusta per progettare eccetera eccetera? Ma ovviamente la cosa forte diciamo di fig, ma in generale dei turchi oggi è insomma che consentono di progettare per il digitale.

È che si può progetta non mettendo un oggetto fisso nella pagina, ma iniziando a farlo relazionare con i vari elementi della pagina sinistra Se destra sopra.

Sotto questi vengono chiamati i construct i vincoli.

Vale a dire che ogni volta che progettiamo qualcosa di digitale all'interno appunto di Fig.

Ma noi dobbiamo sempre pensare quello oggetto come si relazionerà con i suoi margini.

E questo farà la differenza per creare un prodotto fluido già pensato e dinamico all'interno di Fig.

Ma come si cosa sono questi constraint e come si attivano? Iniziamo a vederlo anche qui mettiamo mano all'interno dello yacht di Fig, ma supponiamo appunto che noi stiamo andando a creare.

Vogliamo creare un menù dove abbiamo all'interno della nostra pagina dell'ex top il logo sempre fisso in alto a sinistra.

Magari vogliamo il menù sempre fisso in alto a destra e per dire potremmo volere un piccolo baloon clothing bottone con una chat sempre fisso in basso a destra.

Per fare per vincolare questi oggetti alla pagina dobbiamo utilizzare quelli che in gergo vengono chiamati con street.

Adesso lo vediamo, creiamo una tavola, mi metto qui e inizio a disegnare.

Adesso facciamo sempre qui, metterò un rettangolo il mio logo sarà un rettangolo.

Guardate che cosa succede appena inizio a disegnare.

Quello che si vede è che questo oggetto ha una linea tratteggiata in alto e a sinistra.

Vuol dire che naturalmente fig ma lo sta allineando sempre fisso in alto a sinistra ed è quello che poi viene riportato qui nella colonna di destra che viene chiamato con Straight, appunto i suoi vincoli.

Vale a dire che se io al largo stringo questa tavola, questo oggetto tenderà a rimanere sempre con questa equidistanza dal punto dal punto da cui in cui si trova in questo momento.

Supponiamo invece che voglio mettere è qui delle voci, anzi una voce di menu.

Facciamo un hamburger menù così la facciamo semplice ok, lo raccontiamo, guardate che succede.

Questo elemento qui anche lui di default tende ad essere assimilato a sinistra e in alto perché questi sono i construct naturali di Fig.

Ma vuol dire che se io adesso prendo e provo a rendere fluida questa interfaccia, come come dovrebbe essere notevolmente guardate che succede che ovviamente il luogo rimane li' dovrebbe stare dove deve stare, ma il mio no hamburger menu menu invece non sta seguendo il mio allineamento a destra.

Questo perché? Perché appunto io non ho toccato, non ho variato il suo allineamento di default questi construct come faccio per dirgli che lui voglio che sia sempre a destra a questa distanza? Dove si trova adesso? Mi basterà cliccare su questa linguetta qui oppure andare sul menu a dire right in questo modo qui che cosa succede quando vado ad allargare e a stringere? Il menù sarà costantemente in alto a destra nella posizione che ho pensato originariamente e questo vale anche se dovessi mettere immaginate qui in basso.

Immaginate un pulsante, un elemento di chat che voglio sempre fisso, che mi segua quando scrollo la pagina quando si allarga anche qui vedete che di default i suoi con straight sono fissi in alto e a sinistra che non è assolutamente quello che voglio.

Perché se questa pagina andasse ad allungarsi o andasse a restringersi.

Quello oggetto non mi starebbe seguendo esattamente come io vorrei no? Quindi come faccio a dirgli che questo oggetto deve rimanere sempre in basso e a destra? Sempre i constraint clicco qui su questa lingua è Tina per dirgli in basso e clicco qui su quest'altra per dirgli in basso a destra.

In questo modo tutti questi elementi di layout mi verranno sempre diete saranno pronti ad accogliere un layout flessibile.

Chiaramente questo vale se voglio rimanere.

Voglio creare un rapporto con delle dimensioni fisse all'interno degli oggetti.

Ma supponiamo che io sto giocando con un'immagine con uno sfondo e voglio che questo sfondo invece si adatti costantemente alla larghezza della mia pagina.

Allora in questo caso io vado a disegnare un rettangolo per giusto per simulare Non immagino qualcosa che okay anche qui guardate se io non vado a mettere nulla, che cosa succede quando vado ad allargare a stringere il mio layout rimane sempre della stessa misura e non va bene e dirgli che è ancorato a sinistra e neanche che ancora da destra, perché se io l'ho ancora passi solo a destra.

Il contenuto non si adatterebbe su tutta la pagina, ma io voglio che questo contenuto si adatti su tutta la pagina.

Quindi in questo caso no, non devo dirgli ancora da destra o ancorati a sinistra, ma devo dirgli ancora ti sia a destra che a sinistra.

Basta andare su questa linguetta, dirgli left right oppure con lo shift, selezionare le due linguette e che sono rappresentate su questo quadrato.

A questo punto lui tenderà a mantenere fissa questa distanza quando vado ad allargare o a stringere il mio layout.

Ecco qui che i constraint stanno funzionando al meglio.

E quindi quando glielo faccio, poi su una pagina web più complicata, come magari potrebbe essere questa.

Vediamo lo proviamo a fare qui.

Guardate questo menu, per esempio, come si sta comportando? Vedete, si sta comportando in modo flessibile su tutta la pagina.

Se avessi voluto che, per esempio, questo elemento rimanesse sempre fisso a sinistra, avrei dovuto dirgli Eccolo qua.

Guardate adesso come si comporta? Vedete, mi viene dietro e si sta adattando alla pagina.

Se avessi messo sinistra e destra si sarebbe addirittura allungato, ha allungato il testo e avrebbe, diciamo, defluire tutto in maniera naturale, come se fosse realmente un prodotto dinamico.

Quindi i construct diventano proprio alla base del vostro, del vostro layout e altra cosa importantissima è che potete utilizzarli anche e soprattutto in combinazione con le griglie.

Perché qual è la cosa meravigliosa delle griglie quando le utilizzate? Adesso ne crea una al volo metto colonne, metto un margine guardate cosa interessante adesso quando vado a mettere un oggetto guardate che succede quando lo sto mettendo con le colonne all'interno di una griglia con le colonne.

Il riferimento left non è più legato a tutta la tavola, ma è legato alla colonna piu' vicina.

Ok, questo vale a dire che se adesso io metto questo oggetto proprio in maniera specifica che finisce all'interno di una stessa colonna e lo faccio magari per piu' colonne lo faccio a quattro, vediamo qua se poi gli metto che questi oggetti devono essere allineati sinistra e destra ma rispetto a cosa? Rispetto alle colonne? Guardate che cosa succede? Succede che il contenuto sis treccia in maniera uniforme insieme alle colonne.

Questo mi aiuta a progettare il design veramente responsive all'interno del mio bailout.

Ovviamente questo non sarebbe accaduto in maniera uguale se io avessi fatto se avessi tolto le colonne.

Guardate, lascio gli stessi riferimenti left right ma come vedete non ottengo lo stesso risultato perché non avendo parametri definiti dalle colonne, i left right diventa su tutta la tavola e non abbiamo più quel gioco di stretching lineare che abbiamo grazie alle colonne.

Quindi i construct ovviamente sono fondamentali.

Bisogna imparare a utilizza, fargli quello che vi consiglio di utilizzarli sempre con le griglie che vi aiutano comunque a razionalizzare meglio l'andamento fluidi all'interno di un sito e l'altra cosa importante.

Dovete sempre considerare che questi construct non sono solo degli oggetti all'interno di un tram più grande.

Ma se io creassi un fra me più piccolo all'interno eccolo qua.

Questi con straight varrebbero anche per gli oggetti che metto qua dentro adesso qui magari gli diamo una una traccia.

Così si vede l' oggetto che sta qua dentro.

Questo rettangolo che sta dentro al frame, per esempio, è vincolato.

Ah, il fram che sta subito sopra in una nidificazione continua.

Quindi questi constant sono sia a livello generale degli oggetti dentro le auto, ma anche dei micro getti dentro ad altri contenitori che si trovano negli auto.

Quindi giusto per farvi vedere se io mettessi in basso a destra e questo lo vado ad allargare funziona anche per questo ometto qui.

Forse più evidente.

Ok, Quindi mi raccomando, usate i vincoli.

Perché? Perché questa progettazione vi aiuta a pensare già come si sviluppa realmente in fase finale di sviluppo.

Perché dobbiamo pensare che i nostri out non sono delle pagine statiche, ma sono delle pagine flessibili al cento per cento, che variano a seconda delle risoluzioni di schermo, ma anche di device di riferimento.