Gerarchie e Strutture

Gerarchie e Strutture

Nuovi livelli e gruppi

Creare un nuovo livello

Per creare un nuovo livello, basta disegnare un elemento qualsiasi all’interno di un Frame. Noterete che nella barra dei Layers apparirà il nuovo elemento e poiché è stato creato all’interno del Frame, il livello verrà posizionato automaticamente al suo interno.

Se spostiamo l’elemento fuori dal Frame utilizzando lo strumento Move, anche nella barra dei Layers il rettangolo si sposterà all’esterno del Frame. Riposizioniamolo nuovamente all’interno.

Gestire i livelli

Disegnando altri elementi, noteremo che i livelli vengono aggiunti uno sopra l’altro nella barra dei Layers.

Creare un gruppo

  1. Selezioniamo più elementi (usando il mouse o tenendo premuto Shift per selezionare).
  2. Premiamo Cmd+G (Mac) o Ctrl+G (Windows) per creare un gruppo.
  3. Nella barra dei Layers apparirà il nuovo gruppo, indicato con una cartella, cliccando sulla freccia accanto al gruppo, possiamo espandere o contrarre il contenuto.

Opzioni aggiuntive per i gruppi

Nel pannello di destra è possibile trasformare un gruppo in un Frame cliccando sull’apposita opzione.

Sciogliere un gruppo

Per sciogliere un gruppo, selezionatelo e premete Cmd+Shift+G (Mac) o Ctrl+Shift+G (Windows).

Plugins

I Plugins sono risorse esterne sviluppate da terze parti che possono essere integrate in Figma per aggiungere funzionalità extra.

Come accedere ai Plugins

  1. Aprite il menu Action (l’ultimo a destra).
  2. Andate su Plugins & Widget.
  3. Cercate i plugin desiderati.
  4. I plugin utilizzati di frequente possono essere salvati per un accesso rapido.

Plugins consigliati

• Boxicons (attenzione: scegliete quello corretto, non Iconduck).

• Material Symbols: una libreria di simboli e icone.

• Unsplash: per aggiungere immagini.

• Lorem Ipsum: per generare testo segnaposto.

Auto Layout

L’Auto Layout è uno strumento potente per creare regole di impaginazione dinamiche.

Attivare e personalizzare Auto Layout

  1. Selezionate un gruppo o una serie di elementi.
  2. Premete il comando rapido Shift+A oppure attivatelo dal pannello di destra.

Nel pannello di destra è possibile:

• Impostare l’orientamento (verticale o orizzontale).

• Definire l’allineamento degli elementi.

• Regolare lo spazio tra gli elementi.

• Modificare il padding, ovvero lo spazio tra gli elementi e il bordo del contenitore.

Opzioni Aggiuntive

Un Auto Layout si comporta come un Frame, consentendo di aggiungere o gestire elementi al suo interno.

Se un elemento non deve seguire le regole dell’Auto Layout, è possibile selezionarlo e cliccare su “Ignore Auto Layout” nella sezione Position del pannello di destra.

Operazioni Booleane

Le operazioni booleane consentono di combinare più forme con varie modalità:

• Unione: combina le forme in un unico elemento.

• Sottrazione: sottrae una forma dall’altra.

• Intersezione: mantiene solo l’area comune tra le forme.

• Esclusione: mantiene le aree non sovrapposte.

L’opzione “Flatten Selection” trasforma l’operazione booleana in un tracciato, rendendolo un elemento unico e modificabile.

Esercitazione

Creare un file con un frame smartphone nel quale posizionare un Menu nella parte inferiore.

Scegliete uno dei seguenti stili proposti per il menu.

⚠️ Attenzione: Nome file “Lezione 3”.

Specifiche menu:

Colori: