Sapete quando usare uno e quando usare l’altro?

Una cosa alla volta.

Partiamo da una curiosità.

Vi siete mai chiesti perché il radio button sia chiama proprio così?

(È un nome curioso quasi quanto hamburger button)

Guardate questa immagine.

Incredibile vero?

Il radio button si chiama così proprio perché se ho una lista di elementi posso selezionarne solamente una alla volta.

Come i bottoni delle vecchie autoradio.

Così non posso selezionare elementi multipli.

In qual caso devo utilizzare i checkbox.

Come vedere la differenza tra i componenti è molto importante ma troppo spesso mi capita di sentire un pò di confusione sul loro utilizzo.

In questo tutorial di Figma vi insegnerò a progettare radio button e checkbox in pochissimi minuti.

Disegneremo insieme 3 radio button (useremo come esempio degli strumenti musicali) e creeremo un componente con tutti e 3 i radio button.

Dopo creeremo della varianti, una per ogni radio button, in modo che al click su uno strumento, si disabilità la scelta su un radio button precedentemente selezionato.

Per I checkbox il discorso è diverso.

È sufficiente creare un checkbox (quadrato) e farlo diventare un componente.

Dopo creeremo una variante (che sarà il suo stato selezionato) e prototiperemo il tutto.

In questo caso ogni elemento della lista può essere selezionato.

A questo punto ci basterà creare 4 copie di quel checkbox, cambiare il nome ed il gioco è fatto.

Guarda il video tutorial ed impara ad utilizzare Figma come un pro.

The post Radio button e Checkbox tutorial con Figma first appeared on Webdesignerd.