Come creare lo switch tra due layout in Figma

Passare al giorno alla notte in un semplice switch con Figma è possibile. Perché tra le cose che Figma fa meglio c’è proprio la creazione di sequenze che danno vita ad animazioni interattive in maniera veloce, precisa e intuitiva. Sono effetti che attirano l’attenzione e suscitano curiosità in chi naviga sul web; siamo quasi sicuri che anche a te sia capitato di farti cascare la mascella di fronte a qualcuno di questi.

La cosa interessante è proprio che, quando sono ben progettati, sono di grandissimo effetto. Ma, se sai usare bene strumenti come Figma, sono molto meno complicati di quanto potresti pensare. Come in ogni contesto professionale, però, è importante imparare non solo ad utilizzare gli strumenti, ma a farlo in modo efficace e con il giusto metodo. Per questo abbiamo realizzato il corso Figma Academy: una proposta super-pratica che ti mette in grado di applicare subito quello che impari e acquisire competenze fresche da spendere nella tua attività professionale.

Tra le cose che puoi imparare a fare in poco tempo, anche se non hai mai aperto Figma, c’è lo switch tra interfacce con un diverso schema di colori. Una funzione che puoi usare ad esempio per creare la doppia alternativa modalità diurna – modalità notturna, o light mode – dark mode.

Per vedere tutti i passaggi puoi seguire il video tutorial che trovi qui sotto; se invece preferisci leggere, dopo il video trovi l’articolo che ti spiega l’intero processo fino al prodotto finito.

Come realizzare un switch in Figma

Crea la schermata “giorno”

Apri la dashboard di Figma, clicca su + design per aprire un nuovo progetto, che puoi nominare “light&night”. Per cominciare a creare la tua interfaccia serve anzitutto una tavola da disegno, o frame: creane uno nuovo con il tasto F oppure cliccando sull’icona a forma di cornice dal menu in alto.

Quando crei un nuovo frame hai due possibilità riguardo alle dimensioni: puoi selezionare dalla barra a destra uno dei formati proposti da Figma, che ti fa scegliere tra una serie di device. Se invece non trovi il formato che ti interessa crea il frame semplicemente trascinando le maniglie. Una volta che il frame è creato nell’area di lavoro dalla barra a destra puoi regolare altezza larghezza. Alessio nel video di esempio ha impostato come valori 1680 per 987, che corrisponde alla dimensione del suo schermo.

Rinomina il frame cliccando due volte sul testo che trovi in sopra al frame in alto a sinistra. Per questo primo frame ti consiglio di inserire come nome “light”.

Comincia a modificare il design: per scegliere il colore di sfondo vai nell’impostazione fill della barra di destra e scegli una tonalità di arancione. Ora per creare l’immagine di un sole usa gli shape tools: dal menu in alto clicca l’icona a forma di quadrato e seleziona lo strumento ellissi. Tieni premuto il tasto SHIFT e trascina la maniglia d’angolo. Fai in modo che la figura occupi quasi tutto il frame in larghezza; in verticale invece metà figura esce in basso dal frame. Usa di nuovo fill per assegnare a questa figura un colore giallo.

Passa a disegnare una forma che ricorda una collina: clicca sulla forma del sole, tieni premuto ALT/OPTION + SHIFT e trascina la forma. In questo modo puoi duplicarla; di nuovo dalla sezione fill usa il contagocce per colorare questa forma con lo stesso colore dello sfondo. Con il tasto SHIFT porta verso il basso e ridimensiona la forma; ingrandiscila finché non ottieni un largo arco di cerchio che occupa la fascia più in basso del frame.

Aggiungi una casetta. Procedi così: crea un nuovo frame con la stessa procedura che ti ho illustrato prima. Serve un frame piccolo e quadrato; imposta come dimensioni 96 x 96 pixel. Disegna un quadrato: clicca shape tools, rettangolo, poi trascina tenendo premuto SHIFT e assegna al quadrato dimensioni 48 x 48. Dall’area di fill scegli per questa forma di nuovo l’arancione.

Clicca di nuovo su shape tools per creare il tetto; seleziona lo strumento stella. Stavolta però disegna la stella fuori dal frame. Poi clicca due volte per entrare nei parametri di gestione della forma. Trascinando il mouse seleziona le due punte più in basso e cancellale. Ora bisogna sistemare la parte di forma rimasta: per vedere meglio le due punte dall’area stroke del menu a destra imposta un valore adatto. Quindi seleziona le due punte facendoci clic sopra e, tenendo premuto SHIFT, abbassale. Dal menu seleziona lo strumento penna, che utilizzi per chiudere la forma.

Al momento ci sono ancora degli angoli che non funzionano: fai ancora doppio clic sulla forma e dal menu a destra imposta la voce corner radius su 60. Con fill crea uno sfondo nero, quindi trascina la forma dentro al frame.

Rinomina il frame che hai appena creato: ti suggerisco “home”. Trasformalo in component cliccando sull’icona in alto al centro a forma di quattro rombi; poi clicca sull’icona a forma di occhio a destra e nascondi lo sfondo.

Per integrare la nostra casetta vai alla sezione degli assets: come vedi compare nella barra di sinistra, da dove puoi prenderlo e trascinarlo nel frame principale. Inseriscilo in modo che poggi sulla forma che suggerisce una collina e sia centrato in orizzontale.

Progetta lo switch

Per passare da una modalità all’altra serve un elemento con cui interagire, in pratica l’interruttore. Per realizzare lo switch crea un nuovo frame di Figma, e imposta delle dimensioni personalizzate di 96 per la larghezza e 48 per l’altezza.

Ogni volta che devi personalizzare le dimensioni in Figma fai attenzione all’icona a forma di catena che vedi a destra delle caselle di altezza e larghezza. Controlla che sia nella modalità “aperta” se non vuoi che le proporzioni restino fisse. Dal momento che stiamo creando una forma stondata personalizza anche il corner radius e imposta un valore di 50.

Rimani ancora sulla barra destra dell’interfaccia di Figma e scegli il nero come colore di sfondo dello switch. Rinomina il frame “switch”.

Ora devi disegnare gli elementi interni dello switch, a cominciare dal cerchio che rappresenta la levetta da far scorrere. Clicca nel menu in alto sull’icona dei shape tools, seleziona ellisse e disegna un cerchio con diametro 32. Procedi ad allinearlo in questo modo: anzitutto cliccaci sopra, poi tieni premuto SHIFT e ALT / OPTION poi trascina la forma. Vedrai comparire in rosso linee e numeri che ti indicano i valori di padding rispetto alla forma in cui hai inserito il cerchio. Allinealo centrato in verticale, quindi trascinalo finché il valore dal padding da sinistra non è lo stesso di quello superiore e inferiore; nel caso del video sono 8 pixel. Sempre con lo strumento fill colora di bianco questo cerchio.

Trasforma il frame in component usando la stessa sequenza di comandi che ti ho già indicato.

Quello che hai creato adesso è lo switch in posizione “light” o “giorno”; Figma ti consente in maniera molto semplice di realizzare anche il bottone in posizione “notte”. Vai nella barra di destra e crea una variante; applica anche un auto layout. Clicca sul + nel cerchio viola in basso per aggiungere la variante, quindi trascina il cerchio bianco verso destra, finché non raggiungi 8 pixel di padding dal bordo destro dello switch. Assegna dei nomi alle due varianti: light la prima e night la seconda.

Per completare lo switch manca solo l’animazione: clicca sulla tab prototipazione, seleziona l’icona che compare nella parte bassa della prima variante e trascinala per ancorarla alla seconda. Si aprirà un pannello di opzioni da cui puoi personalizzare l’animazione; in questo caso mantieni l’impostazione di default on click. Quindi seleziona smart animate e scegli l’opzione in & out con tempo 300 ms.

Inserisci un testo

Ripeti tutta la procedura, stavolta però dalla seconda variante verso la prima.

Nell’header che Alessio sta progettando in questo video è prevista anche una scritta. Per realizzarla crea un nuovo frame e imposta un’altezza di 312 e 888 di larghezza. Dagli come nome “light and night” poi seleziona lo strumento testo dal menu in alto.

Quindi scrivi dentro il frame “Light”. Dalla barra di destra scegli un font; visto che si tratta di una sorta di titolo ti consiglio un font display. Personalizza peso e dimensione, poi nelle opzioni avanzate della tipografia controlla che sia attivata l’opzione cap 8 to baseline per il vertical trim. Clicca sull’icona a forma di freccia, attiva l’opzione scale e trascina le maniglie finché il testo non arriverà a riempire in altezza quasi tutto il frame. Allinealo centrato in verticale e imposta come colore di riempimento lo stesso arancione che hai già utilizzato per la grafica.

Sempre nella barra di destra spunta clip content. Ora premi SHIFT e ALT / OPTION, quindi trascina in basso la scritta per duplicarla; modifica la parola “Light” in “Night”. Imposta l’auto layout: seleziona 48 pixel come distanza in verticale tra le due scritte e scegli di allineare in orizzontale al centro.

Togli la spunta a clip content e trasforma il frame di testo in component. Dalle proprietà aggiungi una variante; clicca il più nella parte bassa del frame. Seleziona con doppio clic il testo nella seconda variante e tenendo premuto SHIFT trascina in su, in modo che diventi visibile la scritta “Night”.

Realizza il menu

Il video di Alessio ti guida a realizzare l’header di un sito web; come nella stragrande maggioranza dei casi, quindi, la fascia più in alto sarà dedicata al menu.

Di quali passaggi servano per progettare un menu in Figma abbiamo già parlato qui: [ancora]

Quindi, se non hai seguito gli altri tutorial, vai a vedere come si fa e torna qui per riprendere il progetto.

Componi il layout

Ora che hai tutti gli elementi che ti servono puoi comporre il layout. Dalla colonna a sinistra seleziona la tab asset: così vedi tutto quello che hai creato finora.

Ti consiglio di nascondere lo sfondo sia del menu che delle scritte. Trascina uno per uno nel frame gli asset: prima la scritta, quindi lo switch e infine il menu.

Quando è tutto allineato come ritieni sia corretto, non ti resta che duplicare il layout che hai creato. Ancora una volta tieni premuto SHIFT e ALT / OPTION e trascina stavolta verso destra.

Crea la modalità notte

Per realizzare la modalità scura della tua interfaccia ora non ti rimane che modificare i colori nella copia del layout base che hai appena creato.

Puoi farlo dalla sezione Selection Colors nella barra di destra; sostituisci ad esempio l’arancione con il blu e il giallo lime con il bianco. Inverti i colori del menu.

Per modificare la scritta da “Light” a “Night”, dal momento che hai già creato la variante, ti basta appunto selezionare la scritta e dalla barra di destra cliccare sulla versione che ti interessa mostrare. Fai la stessa cosa per lo switch.

Anima l’header

Perché tutto funzioni ora serve solo più animare l’interazione dello switch e la transizione tra i due layout.

Seleziona lo switch che hai creato nel frame night e clicca sulla tab di prototipazione, quindi trascina la freccia di prototipazione per ancorarla al frame night. Nella finestra delle opzioni mantieni l’impostazione di default on click e per la smart animation scelgi ease in and out back. Ripeti la stessa procedura dallo switch del frame nigh al frame light.

Conclusioni

Come vedi creare uno switch con Figma è piuttosto semplice; quello che ti serve è avere le idee chiare su cosa vuoi ottenere e quali sono le funzioni di Figma che ti permettono di ottenere effetti WOW senza complicare troppo il flussi.

Proprio quello che impari a fare con Figma Academy, che non è solo un corso: è un progetto. Appena ti iscrivi infatti ottieni il workbook, uno strumento esclusivo con cui puoi seguire e mettere in pratica subito tutto quello che impari con le lezioni. In pratica, appena finisci il corso, avrai già realizzato in Figma un progetto grande e complesso, e potrai usare le tue nuove competenze per i prossimi progetti.

Se hai altre curiosità qui sul blog trovi sempre contenuti che riguardano Figma, e tutto quello che sta intorno alla progettazione di interfacce, e che di certo possono farti molto comodo. Quindi rimani nei paraggi, intanto ti saluto

a presto!