Come creare un pulsante in Figma

Di Lee StantonLee Stanton Autore Lee Stanton è uno scrittore versatile concentrato sul panorama del software, che copre sia le applicazioni mobili e desktop che le tecnologie online. Per saperne di più• A cura di Evan GowerEvan Gower Editor Con oltre un decennio di esperienza nell'editoria digitale. Evan guida il nostro team con un occhio attento alle tendenze tecnologiche emergenti. Leggi di più17 agosto 2023

I pulsanti di progettazione su Figma possono essere creati in diversi modi utilizzando le proprietà dei componenti e del layout automatico sulla piattaforma. Pertanto, i pulsanti possono essere personalizzati utilizzando etichette, dimensioni e icone. Se non sei sicuro di come creare pulsanti su Figma, sei nel posto giusto.

Questo articolo spiegherà come creare pulsanti e come ottenere il massimo da Figma.

I pulsanti sono elementi comuni utilizzati durante la progettazione di un'interfaccia utente funzionale. Puoi creare un pulsante in un disegno Figma. Se sei nuovo a Figma, devi prima afferrare le basi.

Ecco una guida passo passo per la creazione dei pulsanti:

Puoi aggiungere colori creandone alcuni utilizzando il selettore colori oppure puoi accedere ai colori esadecimali da Internet.

Il colore del testo all'interno del pulsante dipende da se contrasta meglio con uno sfondo bianco o nero. Puoi utilizzare entrambe le opzioni per vedere quale funziona meglio. Se non ti piace nessuna delle opzioni, puoi regolare lo stile e il colore del pulsante.

Ci sono tre pulsanti base che possono essere creati su Figma.

I pulsanti principali sono in tinta unita con testo bianco o nero. Questo pulsante attira gli utenti mentre utilizzano un'app. Ecco come puoi crearne uno:

Di solito è un pulsante bianco ma delineato con il colore scelto. Anche il testo del pulsante può avere lo stesso colore. Questo è il secondo pulsante più importante che puoi creare. Dovrebbe anche attirare gli occhi dell'utente.

I pulsanti terziari non sono importanti quanto i primi due. Possono funzionare come pulsanti di collegamento, annullamento dell'iscrizione o indietro. Spesso sono in testo semplice e in alcuni casi possono essere sottolineati.

È possibile creare un pulsante terziario che assomigli a un pulsante primario o secondario. Puoi anche modificare la larghezza del tratto per ottenere una migliore visibilità.

Con gli strumenti sulla piattaforma, puoi acquisire esperienza pratica utilizzando il layout automatico e lo strumento di testo. Con la guida passo passo, la creazione di un pulsante dovrebbe essere relativamente semplice da realizzare. Per creare un pulsante, devi creare il tuo livello di testo, convertirlo in una cornice di layout automatico e definire lo stile del pulsante.

In questo passaggio viene utilizzato lo strumento testo.

Ora puoi anche giocare con la dimensione del carattere aumentandolo o diminuendolo.

A questo punto, il pulsante deve essere ulteriormente modificato per renderlo glamour. Con il layout automatico puoi rendere le cose un po' più vivaci. Il layout automatico è una funzionalità potente su Figma e può essere applicato per progetti reattivi. Questi design si adattano automaticamente a modifiche quali dimensioni del contenuto, posizionamento degli oggetti e tipo di dispositivo.

Il layout automatico può essere applicato per trasformare i livelli in fotogrammi o in fotogrammi esistenti. Per applicare il layout a una cornice esistente, seleziona il livello di testo, quindi premi la scorciatoia "Maiusc" "A". Una volta applicato il layout, noterai alcune modifiche.

Puoi iniziare aggiungendo colore.

La prossima cosa è riparare l'imbottitura del telaio. Dopo che il testo della lettera è stato convertito in un layout di cornice automatica, viene automaticamente aggiunta una spaziatura interna tra il testo e il limite della cornice. L'imbottitura a questo punto appare uguale su tutti i lati. Puoi modificare l'imbottitura inferiore e superiore in modo che siano più piccole dell'imbottitura destra e sinistra.

Puoi aggiornare il riempimento come preferisci. L'imbottitura sinistra e destra o l'imbottitura superiore e inferiore possono essere modificate contemporaneamente con le scorciatoie seguenti:

A questo punto, il pulsante sembra a posto, ma puoi ancora aggiornare l'etichetta. È necessario fare doppio clic sul testo per consentire la modifica. Digita le parole "Iscriviti". Il pulsante si ridimensiona durante la digitazione. Ecco come si progetta un pulsante utilizzando il layout automatico e lo strumento testo. Ora puoi provare qualcosa di nuovo, come trasformare il pulsante in un componente o aggiungere una variante.