14 Nov 2023

Auto Layout in Figma: una breve guida

Figma è il più noto e popolare software per progettazione e prototipazione di interfacce utente attualmente in commercio; una delle caratteristiche che lo ha reso celebre nel suo funzionamento è la capacità di creare design modulari, flessibili e facilmente adattabili, tramite variabili, componenti e funzioni di auto layout.

Puoi infatti progettare un’app per smartphone, un sito web responsive o qualsiasi altro prodotto tu voglia, ma al centro del funzionamento di Figma troverai sempre questa logica modulare che ti permette di arricchire di funzioni complesse i tuoi mockup. Questo articolo vuole fornirti una panoramica su una delle feature più importanti di Figma, l’auto layout; l’articolo è accompagnato da un breve tutorial su come utilizzare l’auto layout di Figma per progettare una scheda prodotto di un sito e-commerce.

Autolayout in Figma

Che cos’è l’auto layout in Figma

Letteralmente, disposizione automatica. L’Auto Layout è quella feature che permette ad un utente di Figma di raccogliere e ordinare uno o più elementi del design insieme, come: testo con immagini e icone. Usare l’auto layout significa incorniciare in un frame degli elementi e disporli in varie modalità; per questo motivo l’auto layout è alla base di molti componenti del design, dai semplici pulsanti ai menu di navigazione fino a intere schede prodotto per siti ecommerce.

Padding auto layout con Figma

Come creare un pulsante con l’auto layout in Figma

Per prendere la mano con l’auto layout vediamo in questo breve tutorial come creare un pulsante di testo arricchito con un’icona all’interno di Figma. Se hai bisogno di icone per questo tutorial o per i tuoi progetti ti consigliamo due siti dove potrai trovare molto materiale, gratuito e a pagamento: Noun Project e Font Awesome.

Con ordine:

  1. Inizia scrivendo qualcosa su una Frame (iPhone o Desktop) usando lo strumento testo.
  2. Una volta scritto, seleziona il testo e premi la combinazione da tastiera: SHIFT+A; questa scorciatoia è essenziale per trasformare il testo in un frame ed accedere dunque alle opzioni di auto layout in maniera diretta (sul pannello evidenziato in rosso nell’immagine di sotto).Una volta che hai premuto la combinazione da tastiera SHIFT+A vedrai apparire le opzioni di auto layout in Figma.
  3. Nella parte destra delle impostazioni noterai ora le opzioni relative al frame e all’auto layout.
  4. Prova ad aggiungere un riempimento alla scritta usando il segno ”+” nella sezione FILL, scegliendo un colore di tuo gradimento. Questo ti aiuterà a capire come funziona il padding e la stondatura del tuo nuovo pulsante.
  5. Nelle opzioni Frame (in alto) prova a cambiare le impostazioni da HUG a Fixed; quando sei in HUG, la cornice del frame “abbraccia” il contenuto (la scritta in questo caso), se sei su FIXED invece stabilisci la dimensione massima del pulsante indipendentemente dal contenuto.Usa le impostazioni del frame in Figma per creare pulsanti dinamici, pulsanti cioè che reagiscono al testo che contengono.Creare un frame in Figma con la scorciatoia SHIFT+A attiva le opzioni dell'auto layout, tra le quali figurano quelle del padding

 

Usare l’autolayout per design complessi in Figma: una scheda prodotto e-commerce

In questo video tutorial di Figma vedrai come usare l’auto layout per creare prima un semplice bottone, poi come sfruttare i frame che l’auto layout genera per raggruppare e ordinare in maniera dinamica gli elementi della scheda prodotto.

Conclusioni

Raccogliere un elemento o più elementi in un frame con la scorciatoia SHIFT+A ti garantisce di accedere alle opzioni di auto layout in Figma; grazie all’auto layout potrai ordinare e organizzare il tuo design in maniera flessibile (ma rigorosa).

Articolo di Matteo Masciotti
Adobe Certified Instructor / Design Specialist
Dal 2014 ad oggi in veste di Adobe Certified Instructor ha collaborato con i centri Adobe Autorizzati a Milano e a Londra; ha inoltre lavorato in Canada come design specialist e attualmente fornisce consulenze e formazione sui software Adobe per migliorare i flussi di lavoro per i content creators. Tutti gli articoli di Matteo Masciotti »
Se ti è piaciuto questo articolo e vuoi rimanere aggiornato su novità e promo attive, iscriviti alla nostra newsletter (per te anche un codice sconto)!
Serve aiuto?
Chatta con noi
Valutazione di Google
4.9
Basato su 147 recensioni
js_loader