Figma Tutorial – Creare Icone personalizzate non sarà mai così semplice

Condividi

Oggi vogliamo mostrarti un modo piuttosto semplice per creare icone personalizzate semplici, belle e di impatto mediante l’utilizzo di uno dei software di progettazione UI / UX design più in voga del momento, Figma.

Cosa è Figma

Figma è una applicazione per la progettazione di design user friendly. Uno strumento per la grafica vettoriale adatto alla creazione di prototipi di design per app e siti web, principale concorrente del medesimo software di casa Adobe, ovvero XD.

Hai bisogno di un set di icone professionale?

È facile scaricare dei kit gratuiti, che però non saranno mai perfettamente complementari con il nostro design, ma soprattutto con la nostra Brand Image. Lascia che il tuo prossimo set di icone sia memorabile e mai più monotono e scontato!

A partire da soli € 0,99 !

Come creare icone personalizzate con Figma

Innanzitutto scarichiamo l’applicazione dal sito ufficiale di Figma, è disponibile sia per Windows che per Mac. C’è da dire che Figma è un’applicazione molto leggera che può sostenere livelli su livelli senza mai appesantirsi, quindi non preoccupatevi se avete un macinino, potrete tranquillamente progettare e disegnare in Figma senza nessun problema.

Ti consiglio anche di dare un’occhiata ad uno dei nostri video per alcuni consigli sulla creazione di Icone :

Creiamo un nuovo documento

Una volta scaricato, installato ed avviato il programma ci troveremo dinnanzi alla schermata principale, piuttosto facile ed intuitiva, di Figma. Da li, tramite il pulsante in alto a destra, scegliete “New” e nella finestra che vi si aprirà scegliete “Blank Canvas” :


figma - schermata principale
Create un nuovo documento Blank

Impostiamo il Frame

Dopo aver creato il documento in bianco creiamo il frame sul quale andremo a creare le nostre icone. Tramite il menù in alto a sinistra scegliamo l’icona a forma di “cancelletto” e creiamo un nuovo Frame nella schermata principale; creiamo un frame rettangolare che prenda parte della schermata, qualcosa di simile :

creare icone con figma - frame
Creiamo il frame sul quale lavoreremo

Creiamo la griglia

Dal menù in alto selezioniamo lo strumento “sposta” (Move), ovvero quello a forma di puntatore. Spostiamoci sulla schermata di destra e selezioniamo la voce “Layout grid” facendo un semplice click.

creare icone - figma griglia
Creiamo una griglia

Ampliamo la griglia con i righelli

La griglia ci aiuterà a lavorare in maniera più pulita e precisa, è quindi importante impostarla per bene prima di procedere nel creare icone vere e proprie. Se i righelli (rules) non sono visibili nella parte alta e sinistra della vostra schermata scegliete View >> Show Rules dal menù in alto, vi appariranno, come detto, i righelli nella parte alta e sinistra della schermata di lavoro.

Partendo da quello di sinistra, facciamo un click sul righello e lasciando il mouse cliccato trasciniamo la guida fino al Frame contando 10 pixels (10 quadratini) dall’inizio del frame :

importare i righelli in figma
Trasciniamo la guida contando 10 pixels dal frame

Ripetiamo il processo posizionando un’altra guida nella parte destra del frame facendo sempre saltare 10 pixels, mentre per le guide di sopra e sotto fate saltare circa 5 pixels. Cercate di ottenere qualcosa di simile :

creare una griglia con figma
Definiamo la nostra griglia di lavoro

Inseriamo le prime shapes (forme)

Una volta creata ed ampliata la nostra griglia di lavoro è ora di iniziare a creare le prime forme che andranno a comporre la nostra icona finale. Scegliamo, innanzitutto, lo stile che vogliamo utilizzare per creare le nostre icone. Se sei interessato a creare icon UI – UX prosegui, altrimenti puoi passare direttamente alla sezione “Creare icone classiche” :

Icone UI – UX

Questa tipologia di icone vengono utilizzate per garantire una facile lettura complessiva dell’interfaccia che dovrà risultare più pulita ed intuitiva possibile. Si tratta di icone solitamente composte da semplici linee che vanno a comporre il design finale. Abbiamo creato un video in merito postato ad inizio articolo e che ti consigliamo di guardare.

1. Creiamo un rettangolo

Procediamo creando un semplice smartphone. Dal menù in alto a sinistra di Figma scegliamo lo strumento rettangolo, tracciamo una forma rettangolare e posizioniamola a centro Frame :

creare icone personalizzate
Creiamo il nostro rettangolo principale

2. Sistemiamo i settaggi del rettangolo

Una volta creato il rettangolo primario andiamo ad assegnargli i valori corretti; dalla schermata di destra, qualora fosse assegnato un colore di sfondo togliamolo facendo click sul segno “-” sotto la voce Fill. Sotto la voce Stroke, invece, clicchiamo sul segno “+” e assegniamo i valori seguenti : colore di traccia #737373 , dimensione di traccia “20” e traccia posizionata internamente (inside) :

creare icone
Assegniamo i giusti valori di style alla forma principale

Una volta creata la forma principale non ci resta che aggiungere i dettagli. Innanzitutto arrotondiamo i bordi ; con lo strumento “move” (quello a forma di puntatore) selezionato, se passi il mouse sulla forma vedrai apparire quattro piccoli cerchi ai bordi, questi servono per dare rotondità alle shapes. Clicca su uno dei quattro cerchi e trascina il mouse fino ad impostare un raggio di circa 30px. Puoi, in alternativa, selezionare il valore “Corner radius” dalla schermata di destra ed assegnare il valore di 30px :

creare icone - arrotondare bordi figma
Arrotondiamo i bordi della forma

3. Inserire i restanti elementi

Una volta settata la forma principale iniziamo a creare i restanti elementi, come schermo, pulsante home etc. Dal menù in alto clicchiamo sulla piccola freccia accanto alla forma “rettangolo”. Si aprirà un menù a tendina, da qui selezioniamo lo strumento “linea” e tracciamo una linea subito sotto la parte superiore della forma principale dello smartphone. Una volta tracciata la linea assegniamo 20 come valore di “Stroke” e #737373 come colore :

creare icone - definiamo i dettagli
Iniziamo a comporre gli elementi della nostra icona

Duplichiamo la linea appena creata (menù in alto > Edit > Duplicate) e trasciniamola nella parte sotto ma posizionata un po’ più in alto rispetto alla distanza assegnata alla linea di sopra :

Creare icone - definire i dettagli

Dal menù di sopra clicchiamo nuovamente sulla freccia piccola posta accanto alla forma quadrata. Dal menù a tendina questa volta scegliamo lo strumento “ellipse” (cerchio) e creiamo un cerchio nella parte inferiore/centrale della nostra icona. Questa volta dobbiamo usare un colore di sfondo e deselezionare la traccia (stroke), qualora fosse selezionata, cliccando sul segno “-” dalla schermata di destra sotto la voce “stroke”. Assegniamo, invece, il colore usato fino ad ora (737373) sotto la voce “Fill” fino ad ottenere qualcosa di simile :

creare icone
Inseriamo l’ultimo elemento : il pulsante Home

4. Espandere gli oggetti

Finita la progettazione della nostra icona, uno dei passi più importanti : selezionate tutti gli elementi, cliccate con il tasto destro e scegliete “Group selection”. Con il gruppo selezionato fate click dal menù in alto centrale su “Union selection” (i due quadrati sovrapposti) e dopo di che selezionate “Object >> Flatten selection”. Questo vi permetterà di ridimensionare l’intero oggetto senza distorcerlo.

Flatten selection figma
Selezioniamo tutti gli elementi e clicchiamo su Object > Outline stroke

Ed ecco il nostro risultato finito. Ricorda che la semplicità è alla base quando si parla di UI / UX design. Un’icona tra l’altro, proprio come un logo, deve essere ben visibile e riconoscibile a grandi e piccole dimensioni. Qualora ci fossero troppi elementi confusionari, se ridotta di dimensioni (e ricordate che le icone sono progettate per piccole dimensioni) l’icona risulterebbe illeggibile :

creare icone
Le icone devono essere ben riconoscibili a grandi e piccole dimensioni

Realizzare icone personalizzate classiche

Creiamo un’icona stile Photoshop

Vediamo adesso come creare icone classiche utilizzabili, ad esempio, anche come icone personalizzate sulle applicazioni del tuo PC/Mac, o anche per il web. Questo sempre grazie agli innumerevoli strumenti che ci offre Figma. Supponiamo di voler ricreare l’icona di Adobe Photoshop :

creare icone photoshop stile
Creare icone stile Photoshop

Dunque creiamo un nuovo documento ed impostiamo un nuovo Frame e la griglia seguendo i primi due passi (sopra) di questa guida :

figma tutorial
Definiamo la nostra griglia di lavoro

1. Creiamo un quadrato con #001E36 di sfondo

Dal menù in alto scegliamo lo strumento “Forma rettangolare” e creiamo una forma che va a coprire l’intera area della nostra griglia centrale. Assegniamo un colore di FILL , utilizzate il colore 001E36.

creare icone stile photoshop
Creiamo la forma base ed assegniamo il giusto colore di sfondo

2. Arrotondiamo i bordi

Con lo strumento “Move” (puntatore) selezionato passiamo il mouse sopra la forma appena creata, ai bordi vedrete apparire dei piccoli cerchi. Selezioniamo uno di questi piccoli cerchi e trasciniamo il mouse fino ad arrotondare i bordi di 90px. Potete anche selezionare la voce “Corner radius” dal menù laterale ed assegnare il valore di 90 :

arrotondiamo i bordi
Arrotondiamo i bordi della forma

3. Inseriamo il testo

Dal menù in alto selezioniamo lo strumento “Testo” , immediatamente riconoscibile con la sua icona a forma di “T”. Clicchiamo al centro della forma e scriviamo il testo dell’icona di Photoshop, ovvero “Ps”. Il font utilizzato nelle icone di Adobe è “Adobe Clean”, io ho comunque utilizzato un font molto simile chiamato “Raanana” e facilmente reperibile. Assegnate il colore 31A8FF :

figma tutorial

4. Espandere forma e testo

Selezioniamo il livello della forma base ed il testo, clicchiamo su “Object >> Outline stroke” ed il gioco è fatto :

figma tutorial

Hai bisogno di un Sito E-commerce professionale?

È facile scaricare dei kit gratuiti, che però non saranno mai perfettamente complementari con il nostro design, ma soprattutto con la nostra Brand Image. Lascia che il tuo prossimo Sito web, e-commerce o WordPress sia memorabile e mai più monotono e scontato! Il tuo Brand è la parte più importante del tuo business.

A partire da soli € 0,99 !

Informazioni Autore

Salvatore Maniscalco

Designer, sviluppatore, creativo. Nel settore della comunicazione dal 2008, gestisce i progetti con l'entusiasmo del primo giorno. Appassionato di scrittura, lettura e musica. Contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo