Librerie e Componenti
Librerie in Figma
Le librerie di Figma sono uno strumento potente che permette di creare e salvare stili (come colori, caratteri e altri effetti) per poterli riutilizzare in modo semplice e coerente nei progetti. Una delle principali funzionalità è che, modificando uno stile salvato, tutti gli elementi che utilizzano quello stile vengono aggiornati automaticamente.
Come Creare un Colore come Stile
• Vai al pannello laterale di destra e trova un’impostazione che supporta i colori, ad esempio Fill (riempimento).
• Clicca sull’icona con i quattro puntini accanto al colore attuale per accedere alle librerie.
• Nel pannello Library, clicca sul pulsante + per aggiungere un nuovo stile.
• Dai un nome al colore e, se desideri, una descrizione che spieghi come e dove utilizzarlo.
• Conferma cliccando su Crea Stile.
⚠️ Nota: Non utilizzare le variabili.
Una volta creato, il colore del tuo elemento cambierà da “custom” al nome dello stile appena definito. Per scollegare un elemento dal suo stile basta cliccare sull’icona della catena spezzata accanto al colore.
Attenzione: Scollegare lo stile da un elemento non comporta la sua eliminazione dalla libreria.
Visualizzare e Gestire gli Stili
Se deselezionamo tutto cliccando su uno spazio vuoto nella tua area di lavoro. Nel pannello laterale destro apparirà l’elenco di tutti gli stili creati (colori, testi, effetti, ecc.). Puoi rinominare, modificare o eliminare gli stili direttamente da questo elenco.
Avanzato: Puoi creare delle cartelle nei stili, basta inserire il nome della cartella, seguito da uno slash ( / ) e poi il nome dello stile.
Esercitazione 1
Impostare una schermata di style guide come quella seguente. Font per le indicazioni IBM Plex Mono.
⚠️ Attenzione: Nome file “Lezione 7”.
Componenti
I componenti in Figma sono elementi riutilizzabili che permettono di creare interfacce più coerenti ed efficienti. Sono particolarmente utili per elementi ripetuti come pulsanti, card, icone o sezioni di un’interfaccia.
Quando crei un componente, puoi utilizzarlo in più parti del progetto e, se lo aggiorni, tutte le sue istanze si aggiorneranno automaticamente.
Creare un Componente
• Crea un pulsante, un’icona o un qualsiasi elemento che vuoi riutilizzare.
• Seleziona l’elemento e premi CMD + ALT + K (Mac) o CTRL + ALT + K (Windows), oppure clicca con il tasto destro e scegli Create Component.
• Noterai un’icona 🟣 viola accanto al livello nel pannello Layers.
Utilizzare un Componente
Dopo aver creato un componente, puoi utilizzarlo in diverse parti del progetto:
• Trascinandolo dalla libreria Assets.
• Copiando e incollando l’elemento direttamente nell’area di lavoro.
Se aggiorni il componente Master, tutte le sue istanze si aggiorneranno automaticamente. Puoi personalizzare alcune proprietà delle istanze senza perdere il legame con il master (ad esempio, cambiare testo o colore di un pulsante).
Se vuoi scollegare un’istanza dal componente principale, seleziona l’istanza e clicca su Detach Instance dal menu di destra.
Varianti dei componenti
Le varianti permettono di creare più versioni di uno stesso componente (es. pulsante attivo/disattivo, grande/piccolo, con/senza icona) mantenendo tutto organizzato all’interno di un unico elemento.
Creare Varianti di un Componente
Per aggiungere una variante seleziona il Componente e clicca sul + in alto a destra.
Imposta le Proprietà delle Varianti
• Nella sezione “Variants”, assegna un nome alle diverse varianti.
• Aggiungi proprietà personalizzate per modificare colore, dimensioni o stato.
Figma creerà automaticamente un single component con più varianti accessibili dal pannello delle proprietà.
Quando utilizzi un componente con varianti:
• Seleziona l’istanza nell’area di lavoro.
• Nel pannello laterale Properties, troverai un menu a tendina per selezionare la variante desiderata.
Le varianti permettono di gestire le modifiche in modo più intuitivo e organizzato, senza dover creare e gestire molteplici componenti separati.
Organizzare il lavoro
Un’organizzazione efficiente del progetto in Figma aiuta a mantenere ordine, migliorare la collaborazione e velocizzare il flusso di lavoro. Una buona pratica è suddividere il progetto in più pagine per separare design, componenti e altre risorse.
Le pagine si trovano nel pannello laterale sinistro, accanto ai menu Layers e Assets.
Struttura consigliata
- Design → Contiene tutte le schermate e il layout del progetto.
- Componenti → Raccoglie tutti i componenti e le varianti, evitando di mescolarli con il design.
- Thumbnail (Copertina) → Contiene l’anteprima visibile nel file di Figma.
Disegnare all’interno della pagina Design e una volta individuato un componente spostarlo nella pagina componenti. Nella pagina componenti creare tutti gli stili e componenti necessari.
Nella pagina Thumbnail creare la copertina che sarà visibile nella dashboard dei progetti. Dimensioni copertina 1600×960 px. Per impostare il frame come copertina click con il destro sul frame e “Set as thumbnail”.
Esercitazione 2
Proseguendo sul file precedente replicare la seguente schermata.
Dividere così le componenti (i primi due componenti li trovi nella cartella condivisa materiali)
