In questo video tutorial realizzeremo insieme 3 hamburger button con Figma.
Conosci l’hamburger button?
È quel componente che si usa nel mobile (come l’input stepper ricordi?) ed è rappresentato da 3 line verticali.
Si chiama hamburger proprio per la sue sembianze simili ad un hamburger.
Questa è la definizione tratta da Wikipedia:
“Il pulsante hamburger, così chiamato per la sua somiglianza involontaria con un hamburger, è in genere un pulsante posizionato in un angolo superiore di un’interfaccia utente grafica.”
Progetteremo l’hamburger button realizzando 3 linee orizzontali e successivamente disegneremo il suo stato di chiusura ovvero la X.
Creeremo componenti e varianti per realizzare l’interazione di apertura e di chiusura.
Come avrete notato navigando sui siti web o le applicazioni mobile, ci sono infiniti modo di rappresentare l’animazione di apertura e di chiusura dell’hamburger button.
Per il tutorial ho pensato a 3 soluzioni per l’animazione di chiusura.
Questo è quello che sarai in grado di realizzare dopo aver visto il video tutorial.
Ricordati di iscriverti al mio canale se vuoi imparare ad utilizzare Adobe Xd e Figma in modo professionale.