Il tutorial per fare un header con hover animato in Figma

Abbiamo creato per te un tutorial speciale, che ti fa vedere come realizzare in Figma un progetto che, senza questo strumento, ti richiederebbe un sacco di passaggi, alcuni anche piuttosto complessi. E lo abbiamo fatto non solo perché così puoi creare il tuo header, o qualsiasi altro blocco di un’interfaccia, animato e interattivo.

Guidarti in questo tutorial è anche un modo semplice e diretto per farti toccare con mano quanto è funzionale Figma e come sfruttare una delle sue migliori caratteristiche: i flussi di lavoro efficaci e intuitivi. Ti basta infatti seguire un numero relativamente piccolo di passaggi, ciascuno con una propria logica trasparente, per creare in Figma grafiche animate interattive da zero.
In particolare in questo tutorial vedrai come si realizza un header che si anima all’hover del mouse.
Puoi seguire qui il video in cui Alessio Abrate ti fa vedere tutti i passaggi. Altrimenti, sotto al video, trovi il testo con la descrizione dell’intero procedimento, da consultare ogni volta che ti serve.

Ma quello che vedi in questo tutorial è solo un pezzettino di quello che puoi fare con Figma. Se ti piace questo modo di lavorare e vuoi che diventi parte del tuo bagaglio professionale impara tutto quello che ti serve con Figma Academy, il corso che Alessio ha progettato in esclusiva per Grafigata e per tutta la nostra community di graphic designer.

Crea un frame

Per cominciare a creare il tuo header animato fai così: dalla dashboard di Figma clicca a destra sul pulsante + design ed entra nella nuova area di lavoro.
A questo punto comincia a creare il primo frame: clicca nel menu in alto l’icona a forma di cornice e seleziona frame. Sulla destra si apre un elenco di formati da cui potrai scegliere quello che ritieni più adatto per il tuo lavoro.

Una buona strategia è quella di scegliere un formato corrispondente al device su cui stai lavorando. In questo modo, quando controlli la preview del progetto, puoi vederlo nella maniera più corretta e completa possibile.

Se il tuo device non compare tra le scelte pre-impostate procedi a creare il frame, quindi assegna le dimensioni che ti servono. Ti basta cliccare di nuovo sull’icona a forma di cornice, quindi frame e trascinare nell’area di lavoro. Dal menu che compare sulla destra puoi assegnare le dimensioni che ti servono: nel video Alessio ha scelto 1680 per 987.

Ora che hai creato il frame, quindi la tavola di lavoro, puoi scegliere di assegnargli un nome. Questa accortezza è utile soprattutto se pensi di lavorare con molti frame oppure se il progetto è condiviso con altre figure, quindi tutto deve essere organizzato per bene. Per rinominare il frame ti basta fare doppio clic sul nome assegnato da Figma, che compare nell’angolo in alto a sinistra, proprio sopra il bordo del frame.

Non dimenticare le guide

Quando tutto è in ordine ti serve introdurre delle guide. Si tratta di uno degli strumenti di Figma più utili nella progettazione, e per questo te lo facciamo vedere in questo tutorial. In pratica ti dà la possibilità di definire per le tue grafiche una sorta di architettura degli elementi che inserisci che rimarrà stabile anche col variare di dimensioni e formati.

Integra le guide

Per inserire le guide clicca nella barra a destra: di fianco a layout grid trovi un’icona a forma di +. Quando ci clicchi sopra si apre un piccolo pannello con diverse opzioni; clicca sulla scritta grid e, per questo progetto di header, cambia la selezione scegliendo la modalità columns.

Quindi modifica il numero di colonne: da 5, che è l’opzione di default, a 12. Imposta anche il margine a 32 e il gutter sempre a 32. Per vedere o nascondere le guide, da questo momento in poi, puoi usare l’icona a forma di occhio che vedi nella sezione layout grid della barra di destra.

Crea il menu

L’obiettivo di questo tutorial è creare con Figma l’header di un sito web. Deve quindi comprendere anche la sezione del menu in alto.

Per progettarla crea un nuovo frame; il modo più semplice e veloce è quello di copiare e incollare il frame che hai già creato. Clicca al suo interno con il tasto destro, seleziona copia, quindi porta il mouse in un punto vuoto dell’area di lavoro, di nuovo tasto destro e seleziona paste here.

Come vedi ora hai un nuovo frame, del tutto identico al primo che hai creato. Rinominalo MENU, usando la procedura che ti ho spiegato nel paragrafo sopra. Quindi regola l’altezza: per il menu basterà una fascia più bassa, perciò imposta 112.

Ora puoi popolare l’header. Se vuoi replicare l’esempio del video puoi trovare qui tutte le risorse che ti servono. Apri la cartella con il logo e trascina il file direttamente dentro il frame del menu.

Figma trasforma il file in livello che puoi inserire nella tavola del menu. Se vuoi la sicurezza che il file sia davvero agganciato alla giusta tavola puoi guardare nella colonna a sinistra. Se vedi il file che hai aggiunto indicato sotto MENU e allineato con un rientro allora è tutto a posto.

Anche qui ti serviranno le guide, da creare come hai fatto prima. Per posizionare in modo corretto il logo seleziona dalla barra a destra l’allineamento verticale centrato; per quello orizzontale, invece, trascina il logo in modo da allinearlo perfettamente al bordo sinistro della prima colonna.

Per aggiungere il bottone, invece, clicca dal menu in alto sulla T per inserire del testo, quindi clicca nel frame e scrivi MENU. Dalla sezione text della barra di destra puoi personalizzare il font, il peso e la dimensione.

Un passaggio importante, che non devi mai trascurare, è questo: clicca sui tre punti che trovi nel pannello delle opzioni di testo per aprire la scheda Type settings. Alla voce vertical trim seleziona l’opzione più ristretta. In questo modo hai la certezza che il box in cui è contenuto il testo abbia l’esatta dimensione della scritta, e di poterlo allineare nella maniera più precisa possibile.

Per trasformare la scritta in un bottone fai clic con il pulsante destro, quindi seleziona auto layout. Questa è un’altra funzione davvero importante in Figma: se impari ad usarla bene riuscirai a fare cose sempre più articolate in maniera professionale.

Nella colonna di destra dell’interfaccia di Figma hai la possibilità di impostare tutti i parametri del layout: nell’esempio del tutorial Alessio ha fissato a 16 il padding su ogni lato. Nella sezione fill invece scegli il colore di fondo del bottone. Un’ulteriore personalizzazione che puoi applicare è l’arrotondamento degli angoli: dalla sezione frame della barra di destra clicca su border radius e scegli un valore, ad esempio, di 50.

Se a questo punto, come nel video, il testo è scomparso perché ha di default lo stesso colore dello sfondo, ti basta fare doppio clic proprio sul testo e modificare il colore sempre dalle impostazioni che trovi nella colonna di destra.

Se hai difficoltà a selezionare il testo puoi farlo dalla colonna di sinistra, dove trovi i livelli; ti basterà individuare il livello corrispondente al testo e cliccarci sopra per accedere alle opzioni di formattazione.

Trascina il bottone per allinearlo al centro del frame sull’asse verticale; in orizzontale prendi come riferimento il margine destro dell’ultima colonne delle guida.

La sezione del menu ora è completa, ma deve diventare parte dell’header principale. Trascina il frame in cui hai creato il menu dentro il primo frame che hai creato, quello che hai rinominato HELLO.

Dalla barra di sinistra puoi vedere che, nel momento in cui fai questa operazione, il frame MENU diventa un sottolivello del frame HELLO. Ora puoi trattarlo come qualsiasi oggetto all’interno del frame principale. Per allinearlo, ad esempio, scegli le opzioni di allineamento verticale in alto e allineamento orizzontale centrato dalla barra a destra.

Per evitare confusione puoi nascondere le guide che avevi creato per il menu: ti basta cliccare l’icona a forma di occhio nella barra destra alla sezione layout grid. Questa è una delle funzioni base dell’interfaccia di Figma: quell’icona ti serve proprio per nascondere o mostrare con un clic gli elementi a cui si riferisce.

Popola il layout

È arrivato il momento di cominciare a costruire l’animazione. Nel caso di questo tutorial l’elemento da animare in Figma è una scritta.

Vai quindi di nuovo sullo strumento testo, la T nel menu in alto, poi clicca nel frame e digita la parola da animare, ad esempio “hello!”.

Scegli, come prima, le opzioni di formattazione che preferisci e assicurati di aver impostato in modo corretto il vertical trim.

Per fare in modo che il testo occupi l’intero spazio dell’header usa il tasto k e ridimensiona con le maniglie: in orizzontale estendilo fino ai bordi esterni delle guide.

In verticale ti consiglio di portare la scritta fino a toccare il bordo inferiore del blocco di menu. Una volta sistemato chiudi la modalità scale e seleziona fill per assegnare un colore alla tua scritta.

Continua con le altre parti del layout. Seleziona di nuovo lo strumento testo e inserisci una nuova scritta: nel video di esempio vedi “My name is Alessio”. Allinea questo testo a sinistra e poco sotto la scritta HELLO, a una distanza simile a quella che c’è tra questa scritta e il menu.

Ora duplica il testo: il modo più veloce è tasto destro -> copy, quindi in un altro punto del frame tasto destro -> paste.

Mantieni questo blocco allineato in verticale al primo, ma trascinalo in orizzontale fino alla prima guida dopo la metà del frame. Nell’esempio Alessio ha usato questo blocco di testo per descrivere la sua qualifica professionale.

Duplica ancora una volta il blocco di testo: posiziona il nuovo elemento sotto “My name is…”. Nel video di esempio Alessio ha usato questo blocco per la scritta “featured works”.

Manca un’ultima parte dell’header, ossia i quadrati che simulano lo slider di immagini del portfolio. Per realizzarla clicca nel menu in alto l’icona a forma di quadrato, che ti dà accesso agli shape tools.

Seleziona il rettangolo e con un clic posizionalo sotto la scritta featured works.

Se invece di un rettangolo vuoi disegnare un quadrato ti basta ridimensionare la forma tenendo premuto shift. Una volta creato il primo quadrato non ti preoccupare se non lo vedi tutto: il programma infatti ti mostrerà soltanto la porzione di forma che sta dentro il frame. Se però ci clicchi sopra ti rendi conto che la forma è intera.

Per simulare lo slider però ti servono altri due quadrati uguali, che puoi generare così: premi ALT / OPTION, clicca sul primo quadrato e trascina. Otterrai una nuova forma identica alla prima; ripeti l’operazione.

Assegna un colore diverso a ciascuno dei tre quadrati selezionando la funzione fill dalla barra di destra; prima di farlo puoi nascondere le guide, che non servono più. Se non vuoi usare un codice colore puoi sfruttare la funzione contagocce, che ti permette di prelevare il colore che ti interessa da altri elementi già presenti nel frame.

Crea l’animazione

L’elemento che vogliamo animare è la scritta “hello!”. Per prima cosa cliccaci sopra e trascinala fuori dal frame, ad esempio sopra. Fai clic con il tasto destro e seleziona outline stroke.

Con questo semplice passaggio hai trasformato ogni lettera che compone la scritta in una forma vettoriale. Vedi infatti che ora puoi selezionarle ognuna in modo indipendente dalle altre. Nella barra a sinistra dove si trovano indicati i livelli nota che ogni lettera è trattata come un elemento di uno stesso gruppo; nel nostro caso però questa modalità non è la migliore.

Ti consiglio allora di selezionare tutte le lettere: clicca sulla prima, tieni premuto il tasto shift e clicca sull’ultima. Ora trascina tutte le lettere fuori dal gruppo in cui si trovavano.

Per rendere più semplice il lavoro a partire da qui elimina una “l”, che è doppia. Ti basterà lavorare su una e poi duplicarla per arrivare al risultato che desideri. Ora aumenta la distanza tra le lettere.
Trasforma ogni lettera in un componente: fai clic su ciascuna, poi clic sull’icona che trovi in alto al centro, che ricorda quattro rombi. Rinomina ogni lettera.

Per fare in modo che ogni lettera appaia in maniera diversa quando ci passa sopra il mouse per ciascuna devi creare una variante. Clicca sulla lettera, poi nella barra a destra clicchi sul + di fianco a proprietà e aggiungi una variante. Aggiungi anche un auto layout e seleziona l’allineamento verso il basso.

Come vedi sotto la lettera su cui stai lavorando compare in viola un segno +: cliccaci sopra. Vedrai che Figma duplica la lettera dentro la variante che hai creato. Sempre dalle opzioni nella barra a destra puoi rinominare la variante: seleziona current variant e modifica il nome in stretch.

Ripeti la stessa procedura per ogni lettera. Ora modifica l’aspetto delle varianti: per ogni lettera seleziona la variante in basso, quindi modifica l’altezza portandola a 150. Prima di modificare il valore dell’altezza controlla che l’icona a forma di catena sulla destra dei valori di dimensione sia aperta, cioè che le proporzioni non siano fisse. Altrimenti quando modifichi l’altezza cambia anche la larghezza. Seleziona l’allineamento verticale centrato. Di nuovo ripeti questo passaggio per ogni lettera.

Seleziona la prima lettera, la variante in alto, con un semplice clic e poi, nella barra a destra, seleziona la tab prototype. A questo punto, se scorri con il mouse verso il bordo in basso della lettera al centro vedrai che si attiva un’icona rotonda con dentro un +: trascinalo in giù fino alla variante della lettera. Compare una freccia viola che punta in basso e un pannello di opzioni: modifica l’impostazione da on click a while hovering e da instant a smart animate. Ancora una volta ripeti l’operazione per tutte le lettere.

Completa l’header

Ora che l’animazione è pronta servono pochissimi passaggi in Figma per completare il tutorial. Per concludere il progetto bisogna riportare gli elementi animati dentro lo spazio dell’header.

Clicca nel menu in alto l’icona a forma di freccia, che dà accesso alla sezione degli asset. Nella barra a sinistra ti compaiono i component che corrispondono a ogni lettera: prendile e trascinale nell’area di lavoro dell’header. Ricordati di inserire due volte la “l”.

Seleziona il frame e dalla barra di destra torna alla tab design; rendi di nuovo visibili le guide. Allinea il primo e l’ultimo carattere ai bordi esterni delle guide, poi seleziona tutte le lettere e, con il tasto destro, aggiungi un auto layout.

Il tuo progetto è concluso. Per controllare che tutto funzioni come previsto premi l’icona play che trovi in alto a destra: puoi vedere a tutto schermo l’animazione. Se per caso non vedi tutta l’area del frame in alto a destra puoi selezionare options → fit to screen. 

Conclusioni

Come hai visto è bastato un breve tutorial per riuscire a realizzare da zero con Figma qualcosa di abbastanza complesso come un header animato.

Quello che non hai visto nel tutorial è che Figma ti permette di condividere il progetto con un team di lavoro che può intervenire sulle diversi componenti, ad esempio i testi oppure le immagini di corredo. Lavorare nello stesso ambiente permette di saltare passaggi intermedi e ridurre la possibilità di errori o di incompatibilità. Questa è proprio una delle migliori qualità di Figma: una piattaforma che forse non contiene funzioni del tutto nuove, ma le organizza in flussi che semplificano e razionalizzano i processi di design.

Come ovvio, meglio impari ad usare Figma più vantaggi puoi ricavare dalle sue peculiarità. Questo è il motivo per cui ti ricordo che Figma Academy è più di un corso, è un vero laboratorio per costruire nuove competenze da spendere subito nel mercato del lavoro.

E tu, cosa ne pensi di Figma? Hai realizzato il tuo header? Non dimenticare di condividere con noi i tuoi progressi e taggarci. Ci piace sempre vedervi sprigionare creatività! Aspettiamo le tue creazioni, intanto ti mandiamo un saluto

a presto!