Guida Figma per principianti: le basi per iniziare

Inutile girarci intorno, la verità è semplice: Figma è un programma davvero unico e potente.

E se hai appena iniziato ad utilizzarlo o magari hai intenzione di farlo presto, troverai questo articolo molto utile.

Abbiamo infatti deciso di realizzare una piccola guida Figma con le informazioni di base necessarie per iniziare a lavorare con questo software.

Poche informazioni ma buone, giusto quelle che ti servono per un primo, ma proficuo approccio.

progettazione su tabletPrima di iniziare, però, vediamo quali sono i motivi per cui dovresti iniziare a utilizzare Figma:

i file sono salvati in remoto, è disponibile sia per desktop che per mobile, offre funzionalità di tipo collaborativo per i team, i prezzi sono accessibili ed è disponibile anche una versione free, “gira” sia su Mac che su Windows, permette di importare progetti da Sketch.

Inizialmente pensato per il design di prodotto, Figma nel tempo ha ampliato le proprie possibilità di applicazione e oggi è utilizzato oltre che per il wireframing e la prototipazione UX anche per creare mockup, grafiche per social media, icone e talvolta persino loghi.

Che ne dici può bastare?

Passiamo alla pratica. Di seguito in sintesi i passi che devi seguire per iniziare a lavorare con Figma.

Guida Figma per iniziare in 14 step

1) Crea il tuo account Figma e clicca su Design File per iniziare a lavorare sul tuo primo progetto.

2) Come vedi l’interfaccia è abbastanza semplice e intuitiva. In alto a sinistra trovi il menu dei tools che hai a disposizione (inizia a darci un’occhiata); nel menu laterale di sinistra troverai sempre gli elementi che crei; mentre nel menu di destra i valori relativi a ciascun elemento.

3) Puoi scegliere tra differenti frames per il tuo progetto: smartphone, tablet, desktop, social media e molti altri tipi di supporto.

4) Disponi di un’ampia scelta anche per quel che riguarda le forme geometriche da inserire e le tipologie di tratto.

5) I livelli appaiono automaticamente ogni volta che crei o aggiungi un nuovo elemento e ovviamente li puoi anche raggruppare.

6) Sul menu laterale di sinistra puoi selezionare le differenti pagine del progetto (se si tratta di un progetto multi-pagina ovviamente).

7) Le immagini possono essere trascinate all’interno del progetto in modalità drag-and-drop e “aggiustate” dal menu laterale di destra.

8) Figma di default mette già a disposizione tutti i Google Font ma permette anche di installare font personalizzati. Dal menu di destra puoi giocare con le proprietà del testo.

9) Attraverso il pulsante Style è possibile salvare configurazioni di stile che possono essere recuperate anche per altri progetti.

10) I Componenti sono funzioni che aiutano a creare coerenza all’interno del progetto. Per creare un “componente” seleziona più livelli e dal menu contestuale scegli “Crea componente”.

11) Puoi inoltre creare dei “vincoli” legati alle dimensioni del frame definendo il modo in cui gli elementi devono comportarsi in caso di ridimensionamenti.

12) Gli shortcuts possono essere molto utili per velocizzare il tuo lavoro. Puoi consultarli cliccando sulla voce di menu di help (il pulsante “?”).

13) Accedi alla modalità di Prototyping per farti un’idea di come gli utenti interagiranno con il tuo progetto finito. Trovi questa funzione nel pannello di ispezione a destra.

14) Figma permette di collaborare in real-time con altri componenti del tuo team. Puoi farlo attraverso i commenti e la condivisione del progetto, funzionalità che trovi nel menu.

Solo 14 tips per una guida Figma?

Se sei alle prime armi con questo strumento crediamo che per il momento possa bastare. Prova ad esercitarti ora e inizia a… fare!