Figma: che cos’è e come funziona
Hai deciso che è il momento di realizzare un tuo blog personale o una Web app tutta tua e per farlo vorresti un software che fosse non solo gratuito, ma magari anche facile da usare? È così, vero? Allora sono lieto di farti sapere che sei nel posto giusto al momento giusto, perché ho proprio la soluzione che fa per te e si chiama Figma.
Nella guida di oggi voglio infatti parlarti di Figma, spiegandoti che cos’è e come funziona questo software, accessibile direttamente da browser o da applicazione per Windows e macOS, pensato proprio per realizzare interfacce grafiche di siti e Web app. È disponibile anche su smartphone e tablet, ma in maniera più limitata.
Figma è gratuito (nella sua versione base) e ti mette a disposizione un’infinità di frame e template pronti all’uso con cui creare il tuo progetto in modo facile e veloce, grazie alla sua interfaccia intuitiva. Come dici? Ti ho incuriosito e non vedi l’ora di saperne di più? Allora mettiti bello comodo e prenditi cinque minuti di tempo libero: ti garantisco che dopo aver letto questa mia guida, realizzare il tuo sito Web sarà un gioco da ragazzi. Buona lettura e, soprattutto, buon divertimento!
Indice
- Caratteristiche e prezzi di Figma
- Come creare un account Figma
- Scaricare e installare Figma
- Come funziona Figma
- Come funziona Figma per smartphone e tablet
Caratteristiche e prezzi di Figma
Figma — come appena accennato — è un tool per il Web design che ti permette di creare interfacce grafiche per applicazioni e siti Web, sia desktop che mobile, senza necessita di conoscere e digitare alcun tipo di codice, soprattutto, il suo punto di forza è nei numerosi frame, template e strumenti gratuiti che mette a disposizione.
Figma è accessibile in versione gratuita, che permette di usare tutti gli strumenti utili alla creazione di siti Web e Web app e anche di sfruttare le funzionalità base del tool FigJam, pensato per condividere i progetti con il tuo team, grazie alla possibilità di inserire note, creare diagrammi di flusso, etichette, mappe concettuali e molto altro.
Tuttavia, se usi Figma a scopo professionale, puoi attivare un piano abbonamento Figma Professional a partire da 12 euro/mese e avere accesso ad alcune funzioni aggiuntive, come una chat audio all’interno dell’interfaccia del programma (per parlare con i tuoi collaboratori senza usare software esterni) e altri strumenti per collaborare con il tuo team di design in remoto.
Figma si può usare come Web app direttamente da browser, accessibile dopo essersi registrati al sito e aver creato un account; in alternativa è possibile scaricare gratuitamente il software per Windows o macOS e installarlo sul proprio computer: l’interfaccia è identica e per iniziare occorre sempre creare un account gratuito, come ti spiegherò tra pochissimo.
Infine, c’è la versione mobile del software, che però risulta più limitata e serve più che altro per visualizzare i progetti già creati su PC: [maggiori info qui](#Come-funziona-Figma-per smartphone-e-tablet).
Come creare un account Figma
Per usare la versione gratuita di Figma da browser Web o installare l’applicazione desktop, la prima cosa che devi fare è creare un account gratuito.
Per procedere, collegati alla pagina ufficiale di Figma, quindi premi su Get Started e, nel popup che si apre, se hai un account Google, fai clic su Continue with Google, quindi effettua l’accesso con le credenziali.
Se non hai un account Google, puoi anche registrarti a Figma con il tuo indirizzo email: nel popup di accesso inserisci nel campo apposito la tua email, poi alla voce Password, scegli una password sicura, che sarà quella di accesso a Figma, quindi premi su Create account.
Ora, sia che tu abbia effettuato l’accesso con Google sia che tu stia effettuando una nuova registrazione, sempre nel popup, nel menu a tendina What kind of Work you do?, seleziona “che tipo di lavoro fai” (es. Design), se non sai cosa scegliere premi su Other (“altro”).
Nel secondo menu a tendina How you primarily use Figma?, seleziona a che scopo vuoi utilizzare il software scegliendo una delle voci: Personal Use (per uso personale), For Work (per lavoro), For teaching or taking a class (a scopo educativo). Fatto ciò, clicca su Create account.
D’ora in poi se vuoi usare Figma dal browser Web del tuo computer, collegati alla sua home page, fai clic su Log in e accedi con account Google o email, a seconda di come ti sei registrato.
Scaricare e installare Figma
Come ti ho detto, puoi usare tutte le funzionalità di Figma direttamente dal browser Web, tuttavia se preferisci installare Figma sul tuo computer, collegati alla pagina di download quindi, nel menu a destra, fai clic su Download app for Windows o Download app for macOS, a seconda del sistema operativo che usi.
A download completato, se stai usando Windows, esegui semplicemente il file .exe scaricato per avviare il programma.
Se usi Mac, apri invece il file .dmg ottenuto, quindi trascina l’icona di Figma nella finestra delle Applicazioni e avvia il programma. Nel popup di Mac, che si apre solo al primo avvio del programma, premi su Apri, poi avvia Figma.
Nella schermata di avvio, qualunque sia il sistema operativo che stai usando, premi su Log in with your browser, quindi, nella pagina del browser che si è aperta, effettua l’accesso a Figma, poi premi su Open the desktop app e il gioco è fatto.
Se invece non hai un account Figma, nella pagina iniziale fai clic su Create One, quindi segui le istruzioni che ti ho fornito nel precedente capitolo, per associare le credenziali Google o creare un nuovo account via email.
Come funziona Figma
Sia che usi Figma per Web, sia che tu abbia installato il software sul tuo PC o Mac, come ti ho già detto, l’interfaccia è identica, perciò puoi comunque seguire le indicazioni che sto per fornirti sul funzionamento e i comandi base del programma.
Come usare Figma
Al primo avvio di Figma vedrai un popup di benvenuto, premi su Do this later, quindi fai clic su Start for free e premi su Design with Figma; se invece premi su Whiteboard in FigJam, potrai usare il tool di condivisione.
Adesso, sempre nel popup, scegli eventualmente un frame per il tuo nuovo progetto (es. iPhone 14, Desktop ecc.); se, invece, vuoi iniziare un progetto da zero, premi su Blank canvas.
In ogni caso, dopo il primo avvio, nella schermata iniziale per creare un nuovo progetto, fai clic su New Design File e potrai cominciare a creare il tuo sito o la tua app.
Nella schermata del progetto puoi vedere nella barra degli strumenti in alto i comandi: Main menu (logo di Figma), da cui puoi salvare, esportare e cambiare molte impostazioni del progetto; Move Tools (cursore del mouse), premendo sulla freccia destra puoi selezionare Move, per selezionare un oggetto, o Scale, per scalare; Region Tools (quadrato con angoli esterni), per inserire un frame ovvero quello che potremo definire la cornice del progetto; Shape Tools (quadrato), che serve per inserire forme; Pen (penna), per creare archi e linee; Text (lettera T), per inserire del testo; Resources (tre quadrati con il simbolo + a destra), per installare plugin e componenti esterni; Hand Tool (la mano), per afferrare e trascinare; Add comment (fumetto), per inserire commenti.
Per cominciare a creare il tuo progetto grafico, fai prima di tutto clic su Frame, nella barra degli strumenti, per stabilire le dimensioni dell’area di lavoro: puoi vedere che nel menu a destra ci sono una serie di template (es. iPhone, Desktop), selezionandone uno la tavola di disegno sarà già definita nelle dimensioni e nelle proporzioni.
Quindi, fai clic su una delle dimensioni predefinite del frame o disegnalo liberamente con il mouse nell’area di lavoro.
In ogni caso, dopo aver creato il frame, sempre nel menu di destra puoi personalizzarlo: nella sezione Frame puoi cambiare il template, modificare l’orientamento e anche definire delle dimensioni personalizzate (in pollici) nei campi W (larghezza) e H (altezza). Alla sezione Fill, puoi cambiare il colore di sfondo, premendo sul quadrato e scegliendo un colore.
Per creare più di una pagina del tuo sito Web ripeti l’operazione creando un nuovo frame, quindi selezionalo e spostalo dove più ti piace, trascinando il mouse, ad esempio sotto il primo se vuoi scorrere le pagine di un sito mobile.
Dopo aver creato il frame, con la barra degli strumenti in alto puoi inserire forme, testo e modificarli nell’aspetto servendoti del solito menu a destra, per dar sfogo alla tua fantasia.
Ogni volta che inserisci un elemento nell’area di lavoro, puoi vedere anche una nuova voce apparire nel menu dei Layer che si trova a sinistra, ovvero l’elemento viene inserito in un nuovo livello del progetto, così da determinare ad esempio quale oggetto apparirà avanti e quale dietro.
Se vuoi inserire un elemento esterno nel progetto, ad esempio un’immagine: apri Esplora file (Windows) o Finder (macOS), quindi trascina il file all’interno dell’area di lavoro di Figma e adatta il contenuto alle dimensioni dello schermo semplicemente selezionandolo e muovendo gli angoli o i lati. Usa poi i comandi della barra degli strumenti per effettuare altre modifiche all’aspetto.
Puoi vedere in ogni momento un’anteprima di come sarà il tuo sito o la tua applicazione semplicemente premendo sul pulsante ▶ che si trova in alto a destra.
Se ti se ti chiedendo come salvare su Figma il tuo progetto, devi sapere che il programma salva automaticamente le modifiche quando crei un progetto: puoi accedere a tutti i tuoi lavori nella schermata iniziale, cliccando sull’immagine di anteprima di un progetto.
Per raggiungere la schermata iniziale di Figma mentre stai lavorando a un progetto, premi su Main Menu nella barra degli strumenti e seleziona Back to File.
Se vuoi, puoi anche salvare offline un progetto sul tuo computer: premi su Main Menu nella barra degli strumenti, quindi seleziona File e premi su Save local copy, così si avvierà il download del progetto in formato .fig.
Per esportare un progetto in un formato diverso da .fig, nel menu a destra seleziona in alto Design, quindi alla sezione Export, fai clic su PNG e dal menu a tendina seleziona uno dei formato per il file di esportazione (es. JPG, SVG, PDF) poi premi sul pulsante Export in basso.
Dopo aver creato il design del tuo sito Web con Figma, per pubblicarlo ti basta seguire le indicazioni che ti ho fornito nella mia guida dedicata a come pubblicare un sito.
Se invece quella che hai creato e vuoi pubblicare è un’applicazione, in questo caso, dopo aver realizzato l’interfaccia grafica con Figma, dovrai usare un software chiamato Bravo Studio, trovi un tutorial completo collegandoti a questa pagina del sito ufficiale, qui fai clic su Bravo in action e un video tutorial ti mostrerà ogni passaggio da compiere.
Creare menu e pulsanti attivi
Figma, oltre alle semplici funzioni di disegno per la creazione grafica del sito o dell’app, ti permette anche di creare pulsanti attivi collegati a una pagina del progetto o a un link esterno, grazie a una funzione specifica.
Prima di tutto, per creare un menu dal punto di vista grafico, ti basta il solo strumento Text, quindi digita il testo del pulsante: nel menu di destra, alla sezione Text puoi modificare il testo in ogni aspetto, dalla grandezza al tipo di carattere.
Quando hai definito l’aspetto del pulsante, seleziona la cornice del testo e premi Maiusc+A (se usi Windows) o shift+a (se usi Mac) sulla tastiera, così si trasformerà in un layout e potrai vedere nuove opzioni nel menu a destra.
Nel menu a destra, nella sezione Fill puoi cambiare il colore di sfondo, mentre nella sezione Frame puoi cambiare le dimensioni e smussare gli angoli, impostando un valore numerico accanto al simbolo dell’angolo arrotondato.
Nel campo Effect, poi invece dare al testo un effetto al testo del pulsante, come opacità e rilievo. In ogni caso, selezionando il pulsante e usando il menu a destra puoi modificare ogni dettaglio grafico del testo e dello sfondo del bottone.
Quando hai creato un pulsante, puoi duplicarlo per realizzare un menu, semplicemente selezionandolo e premendo Ctrl+D (se usi Windows) o cmd+d (se usi Mac) sulla tastiera, e poi cambiare il testo all’interno.
Per rendere attivo il pulsante e collegarlo a un link, cioè far si che cliccandoci sopra si venga reindirizzati a un sito esterno: seleziona il testo evidenziandolo con il mouse e premi sul simbolo della catena che si trova in altro al centro della pagina, poi nel popup inserisci l’URL di collegamento.
Se invece il pulsante deve collegare gli utenti a un’altra pagina dello stesso sito o dell’app, allora seleziona la cornice del testo cliccandoci sopra, quindi nel menu a destra premi sulla voce Prototype.
Ora, posizionati con il cursore su uno dei lati del pulsante (o anche di una forma o di un’immagine) e apparirà il simbolo di un cerchio con + al centro: fai clic sul cerchio e, tenendo premuto, trascinalo verso la pagina di destinazione del progetto, quindi rilascia.
Fatto ciò, vedrai una linea che parte dal bordo del pulsante e arriva alla pagina di destinazione: fai clic sulla linea che unisce il pulsante e l’altra pagina, quindi nel popup che si apre, alla sezione Animation, premi sul menu a tendina Smart Animation e scegli un’animazione da dare al pulsante (vedrai l’anteprima nel riquadro più giù).
Importare un template
Se non vuoi creare il design del tuo sito Web o della tua applicazione da zero, Figma ti mette a disposizione numerosi template e modelli grafici gratuiti da importare.
Per scaricarli, collegati alla pagina della community di Figma, qui, se vuoi restringere gli elementi da vedere nell’elenco, seleziona: Web o Mobile, per vedere i template; Icons, per la raccolta di singoli elementi grafici; Wireframes, se stai sviluppando applicazioni per i modelli già pronti.
Quando hai scelto l’elemento che ti interessa fai clic sull’immagine di anteprima e premi su Get a copy: sarai reindirizzato alla pagina di Figma nel browser, dove il tuo nuovo template è già aperto e pronto per essere modificato.
Come funziona Figma per smartphone e tablet
Figma è disponibile anche in versione per dispositivi mobili Android e iOS/iPadOS, tuttavia l’applicazione mobile è di ausilio alla Web app e al software per il computer ed è utile per vedere le anteprime dei progetti, condividerli, ma non per il design vero e proprio.
In parole povere, puoi vedere i progetti creati, ma non puoi realizzarli o modificarli direttamente da smartphone e tablet.
Una volta scaricata l’app, avviala e, se hai già creato un account Figma, fai tap su Log in to Figma; premi invece su Sign Up se devi ancora registrarti.
In ogni caso, sarai reindirizzato nel browser del tuo dispositivo e qui, per effettuare l’accesso, puoi seguire esattamente le informazioni che ti ho fornito nel capitolo precedente, poi al termine premi su Continue with mobile App e tornerai nella schermata dell’app che è pronta per l’uso.
Nella schermata principale alla sezione Files trovi tuti i progetti creati prima con Figma per Web o con l’applicazione desktop, per aprirne uno fai tap sull’immagine di anteprima.
Una volta aperto il progetto premi il simbolo ▶, in basso, per vedere l’anteprima, mentre l’icona a forma di fumetto ti permette di vedere o nascondere eventuali commenti.
Se, invece, premi sul simbolo del quadrato con la freccia all’interno puoi condividere il progetto via email o anche usando WhatsApp e i vari social network (Facebook, Instagram, LinkedIn ecc.).
Autore
Salvatore Aranzulla
Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e cura la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.
