Cosa sono dropdown e accordion?
Quale è la differenza tra i 2 componenti?
Quale è meglio usare?
Come si realizzano dropdown e accordion con Figma?
Una domanda alla volta.
Partiamo dall’inizio.
Dropdown e accordion
Come sappiamo se quel contenuto ci interessa o meno?
Guardiamo l’anatomia del componente.
Il dropdown e l’accordion sono costituiti da 2 elementi:
Li chiamerò “Header” e “Content“.
L’Header contiene 2 elementi:
1. Il titolo di quel contenuto (per esempio nella sezione FAQ di un sito troveremo una domanda comune)
2. Un’icona che funge da affordance per quel componente.
Troveremo quindi uno chevron o un “+” che indicano all’utente che quell’elemento si può aprire.
Nel momento in cui il dropdown si apre lo chevron ruota di 180 gradi ed il “+” diventa “-“.
Il content
Il content contiene appunto il contenuto quindi un paragrafo (nel caso di una domanda situata nell’header troveremo la risposta) oppure dei valori selezionabili.
In questo tutorial vi spiegherò come realizzare in modo molto semplice dropdown e accordion con Figma.
Quale è la differenza tra i 2 componenti e come si realizzano con Figma?
I due elementi sono all’apparenza molto simili ma hanno in realtà una sostanziale differenza nell’interazione al click quando li apriamo.
Nel video vi spiego quale è la differenza e come si realizzano con Figma.
Vuoi imparare ad utilizzare Figma come un designer PRO?
Vuoi imparare a disegnare un sito portfolio con Figma da zero?