Disegnare Bottoni

Le regole base

Uno dei metodi di interazione con gli applicativi per l’utente finale sono i bottoni. In genere consentono di spostarsi di pagina oppure dare conferme e effettuare azioni. Possono essere cliccati attraverso Mouse oppure con le dita in caso di touch screen. In questo ultimo caso ricordate che la dimensione deve essere agevole per essere cliccata.

Fondamentale è capire la differenza tra Padding (generalmente segnato in verde), Margin (generalmente segato in arancione), Border (segnato in blu).

Sostanzialmente il padding è lo spazio interno tra la scritta e la fine del bottone, border è il contorno mentre il margine è lo spazio esterno, cioè la distanza tra il nostro elemento e gli altri.

Le dimensioni del pulsante devono essere proporzionate, di solito si usa l’altezza della scritta per impostare il padding sopra e sotto. Mentre il padding destra e sinistra due o tre volte circa l’altezza della scritta.

Attenzione da non fare:

Non utilizzare Padding troppo piccoli sia sopra/ sotto sia destra/sinistra.
Non creare mai più di una linea di testo all’interno del pulsante.
Non creare pulsanti troppo fantasiosi.

Gerarchia dei pulsanti

Una parte fondamentale ricorrente in molti elementi di grafica è la gerarchia. Anche nei pulsanti hanno delle gerarchie, e vengono divisi nel seguente modo:

Pulsante primario: viene utilizzato per le azioni più importanti oppure alle quali vogliamo dare più importanza. Esempio nei siti web per accedere a pagine rilevanti o dare input di invio. Mentre per gli applicativi vengono utilizzate generalmente per dare l’input alle azioni più importanti, come confermare un acquisto o inviare un messaggio.

Pulsante Secondario e Terziario: vengono utilizzati per quelle azioni che non sono fondamentali ma che servono per la navigazione dell’applicativo. In genere sono pulsanti che si usano di meno di quelli primari.

Come disegnare bottoni in Figma

Creare un pulsante in Figma è un processo semplice e veloce utilizzando Auto Layout. Ecco i passaggi:

1. Creare il testo del pulsante

• Selezionate lo strumento Testo e scrivete il contenuto del pulsante (ad esempio, “Invia”).

• Assicuratevi che il testo sia impostato su Auto Width:

• Questo consente al box di testo di adattarsi automaticamente alla lunghezza del contenuto.

2. Aggiungere un’icona (opzionale)

• Se il pulsante include un’icona, posizionatela accanto al testo.

3. Applicare l’Auto Layout

Selezionate il testo (e l’icona, se presente).
Attivate l’Auto Layout premendo Shift+A oppure dal pannello di destra.

Se avete solo un elemento (ad esempio, solo il testo senza icone):

• Prima create un gruppo selezionando il testo e premendo Cmd+G (Mac) o Ctrl+G (Windows).

• Poi applicate l’Auto Layout al gruppo.

4. Personalizzare il pulsante

Una volta attivato l’Auto Layout, potete personalizzare il pulsante nel pannello di destra:

• Spaziatura interna (Padding): Regolate il padding per definire lo spazio tra il testo/icone e i bordi del pulsante.

• Spaziatura tra elementi: Regolate la distanza tra l’icona e il testo, se presente.

• Colore di Fondo: Create uno sfondo per il pulsante aggiungendo un riempimento (Fill) , se necessario.

• Colore Traccia: aggiungete una traccia (Stroke), se necessario.

• Raggiatura: Impostate gli angoli del pulsante (es. arrotondati o squadrati).

Esercitazione

Replicare la seguente schermata tenendo le proporzioni corrette nei vari pulsanti e nella barra di ricerca.

⚠️ Attenzione: Nome file “Lezione 4”.