Lezione dal corso Figma Basics
Abbiamo appena visto le basi degli autori layout, ma un modo migliore per imparare come usarli è fare pratica qua ho preparato due esempi che vedremo insieme.
Il primo è la tabella nel quale ti chiedo di applicare gli auto layout dal livello body in giu' in modo che il mockup sia ridimensionare le orizzontalmente, che la tabella possa accogliere altre righe e che le celle siano un minimo flessibili in base al contenuto.
Ti consiglio di mettere in pausa il video di questa lezione, provare tu sbatterci la testa e vedere se riesci da solo o da sola.
Dopodiché ritorna sul video e vedi la soluzione corretta.
Uno dei trucchi che uso è creare un componente che approfondiremo nel prossimo modulo.
Quando devo fare operazioni di questo tipo, facciamo così selezioniamo il mockup e premiamo su Craig Component.
Ora, come vedrete, se duplica o questo elemento, tutte le modifiche che effettua sul primo vengono poi replicate su quello sotto.
Questo ci permette di evitare fare delle prove sul primo elemento e vedere istantaneamente l'effetto sul secondo.
Possiamo poi modificare il secondo componente, stringerlo in modo da vedere istantaneamente se quello che facciamo ci avvicina o ci allontana dal risultato che vogliamo ottenere.
Mettiamoci subito al lavoro.
Ora vediamo tutti gli elementi e come modificarli per ottenere il risultato che vogliamo.
Abbiamo prima di tutto questo body che qua dentro vedete quando lo ridimensionò a questa dimensione qua strana.
Guardiamo nei mostri in cosa abbiamo impostato Vedete qua rimane nell'angolo in alto a sinistra a una certa distanza.
Quello che in realtà vogliamo è che mantenga la stessa distanza da sinistra a destra.
Quindi che mantenga questa distanza lasciando lo spazio per la navigazione a sinistra e che abbia a distanza zero.
Quindi si è attaccato al prodotto destro.
Vogliamo la stessa cosa anche per top Bottom e quindi per lo spazio in verticale selezioniamo top bottom e vedete qui.
Ora, se lo seleziono, prende le dimensioni che io voglio che abbia.
Dopodiché possiamo continuare applicando le auto layout e impostando la tabella e gli altri elementi al suo interno.
Prendiamo il body, creiamo un'auto layout.
Maiusc lo ridimensiona.
Siamo per dare una dimensione accettabile.
Mettiamo le impostazioni come abbiamo visto prima.
In questo modo si ridimensionerà.
Poi abbiamo la tabella, in questo caso un tram, ma vogliamo utilizzare ancora una volta una moto layout.
Guardate infatti cosa contiene.
Contiene un Eder e due elementi.
Se noi prendiamo un'auto layout, quello che succede è che si adatterà in base al contenuto.
E quindi se aggiungo degli elementi duplicando il primo, per esempio, questa si ridimensiona per raccoglierli.
Se guardiamo nell'esempio sotto.
Quello che succede però è che mantiene questa larghezza un po', un po' strana borda.
Vediamo infatti, come è definita la dimensione di questo elemento.
Vediamo che come racing content, quindi abbraccia il contenuto che può sbronzare dal contenitore in cui l'abbiamo inserito.
Selezioniamo quindi al content e diamogli il container.
Vedete qui cosa succede ora riempirà il contenitore e in questa versione più piccola lo farà mantenendo sempre la distanza che li abbiamo impostato.
Possiamo poi continuare adattando ulteriormente questa tabella, in modo che si comporti proprio come vogliamo nell'esempio qua sotto.
Per esempio, vengono tagliati gli elementi di status sull'ultima colonna, mentre noi vogliamo che vengano che vengano mostrati.
Prendiamo quindi le varie righe.
Facciamo così guardiamo un attimo come sono composte.
Abbiamo una riga, questo elemento che dentro vari elementi come sono divisi, avremmo prima di tutto all'interno della riga che sono questi due elementi l'icona per esempio qua in un posto sbagliato.
Possiamo trascinarla qui dentro la cella abbiamo le due celle.
Selezioniamo le MAIUSC per creare un'auto layout che formano il body, il contenitore la parte più interna della riga.
Rimaniamo lo abbiamo un po' il dividere che sta subito sotto questo elemento.
Infine questo elemento che include il corpo della riga il devi vedere che sta sotto di essa.
Anche in questo caso con shift a possiamo creare un'auto layout.
Controlliamo il racing.
In questo caso vorremmo Phil Container in modo che figli tutta questa dimensione qua vorremmo la stessa proprietà anche per Brody Row il leader vogliamo che prendono tutta la larghezza e le due celle all'interno vogliamo che abbiano una certa dimensione fissa per lo status, mentre che la riga principale che dà il titolo agli elementi prenda tutta la larghezza disponibile.
Infatti, se sentiamo qua il container vedete, quello che succede è che questa dimensione qui evidenzia Rossi in modo da mostrarla si ridimensiona sempre in base alla larghezza del del mockup.
Possiamo poi fare la stessa cosa per tutti gli altri elementi.
Vediamolo velocemente.
Possiamo prendere questo elemento qui, renderlo un'auto layout.
Questo é renderlo un'auto layout il suo contenitore La prima cella come prima avrà film, container e l'altra fake tweet che possiamo fare la stessa cosa anche con l'altro con l'altra riga con la seconda riga.
Quindi anche qua correggiamo la posizione dello spinner.
I tuoi out out layout il contenitore qua vedete cosa succede.
Viene spostato tutto perché abbiamo questa proprietà molto alta di distanza.
Sentiamo tutte le impostazioni di Racing, il container sulla cella, il container sugli elementi dentro l'auto layout.
In questo modo quello che temiamo Mhm, vediamo cosa non funziona qua.
Oh, certo, questo elemento non riempie il container.
In questo modo teniamo lo stesso effetto anche per la riga e per Lehder.
Questo il risultato finale applicato sulla tabella.
Lo possiamo vedere qua, restringendo e cambiando la dimensione a questo elemento vedete tutto quanto si adatta automaticamente in modo da accogliere al meglio.
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.