Figma: guida completa per iniziare da zero

Figma è diventato lo standard per il design di interfacce, e sapersi muovere almeno un po' è utile anche a chi non fa il designer: sviluppatori che ricevono i file, chi gestisce un progetto, chi vuole disegnare la propria idea prima di farla realizzare. In questo articolo trovi i concetti che contano davvero — quattro, non quaranta — e l'ordine in cui impararli.

Cos'è e come funziona

Figma è uno strumento di design di interfacce che gira nel browser, con collaborazione in tempo reale: più persone possono lavorare sullo stesso file contemporaneamente, come su un documento condiviso.

Il piano gratuito è generoso e sufficiente per imparare e per progetti personali. Esiste anche un'applicazione installabile, che è sostanzialmente lo stesso strumento in una finestra dedicata.

Una precisazione utile: Figma serve a disegnare interfacce, non a costruire siti. Quello che produci è un progetto visivo, non codice funzionante — anche se aiuta molto chi poi lo svilupperà. Il quadro degli altri strumenti di design è in migliori tool per designer.

I quattro concetti che contano

Qui sta la differenza tra usare Figma male e usarlo bene. Sono pochi ma vanno capiti in quest'ordine.

1. Frame, non rettangoli

Il frame è un contenitore. Sembra un rettangolo ma non lo è: ha proprietà proprie, può contenere altri elementi, può ritagliare ciò che esce dai bordi e può ridimensionarsi in modo intelligente.

Ogni schermata che disegni è un frame. E i frame si annidano: una scheda dentro una sezione dentro una pagina.

L'errore numero uno dei principianti è usare rettangoli al posto dei frame. Sembra funzionare finché il progetto è piccolo, poi diventa ingestibile.

2. Auto layout

È la funzione che cambia tutto, ed è quella che vale la pena imparare per prima anche se sembra tecnica.

L'auto layout fa sì che gli elementi si dispongano automaticamente: se allunghi un testo, il pulsante che lo contiene si allarga da solo; se aggiungi un elemento a un elenco, gli altri si spostano.

Senza auto layout, ogni modifica richiede di risistemare tutto a mano. Con l'auto layout, il progetto si adatta.

Concettualmente è molto vicino al modo in cui funziona il CSS moderno — motivo per cui chi conosce flexbox lo trova immediatamente familiare, e chi lo impara qui capisce meglio come verrà sviluppato.

Se devi imparare una cosa sola di Figma, impara questa.

3. Componenti

Un componente è un elemento riutilizzabile: lo definisci una volta e ne usi copie ovunque. Modificando l'originale, cambiano tutte.

Un pulsante, una scheda prodotto, una barra di navigazione. Su un progetto di trenta schermate, la differenza tra avere componenti e non averli è tra modificare un elemento e modificarne centoventi.

Le varianti raggruppano gli stati di uno stesso componente — pulsante normale, premuto, disattivato — in un unico elemento con un selettore.

4. Stili e variabili

Colori, caratteri e spaziature definiti una volta e richiamati per nome, invece di essere scritti a mano ogni volta.

Il vantaggio non è la comodità, è la coerenza. Senza, ti ritrovi con sette sfumature di blu leggermente diverse sparse nel progetto — e quando il cliente chiede di cambiare il colore principale, sono ore di lavoro invece di trenta secondi.

Come iniziare, in ordine

Il percorso che funziona, saltando le funzioni avanzate che all'inizio non servono:

1. Muoviti nell'area di lavoro. Zoom, spostamento, selezione. Dieci minuti.

2. Disegna una schermata semplice con frame, testi e rettangoli. Anche brutta: serve a prendere confidenza.

3. Impara l'auto layout e rifai la stessa schermata usandolo. È qui che scatta la comprensione.

4. Trasforma un elemento ripetuto in componente e usalo più volte.

5. Definisci gli stili di colore e testo del tuo progetto.

6. Collega le schermate con la prototipazione, per rendere il progetto navigabile.

7. Prova la modalità di consegna, quella che mostra misure e valori a chi sviluppa.

Un consiglio concreto: ricostruisci un'app che usi ogni giorno. Aprila, guardala e rifalla in Figma. Imparerai più in un pomeriggio così che in dieci ore di video, perché ti costringe a risolvere problemi veri di allineamento, spaziatura e gerarchia.

Gli errori dei principianti

Rettangoli invece di frame. Già detto, ma è il primo per frequenza.

Nomi come "Rectangle 47". Su un file di venti schermate, un elenco di livelli senza nomi è illeggibile — per te tra un mese e per chiunque altro. Nomina mentre lavori, non dopo.

Posizionare tutto a occhio. Usa una griglia e valori di spaziatura coerenti (multipli di 4 o 8 è la convenzione più diffusa). Un progetto con spaziature casuali si riconosce subito.

Non usare componenti perché "tanto è un progetto piccolo". I progetti piccoli crescono.

Disegnare solo lo stato ideale. Cosa succede quando l'elenco è vuoto? Quando il testo è tre volte più lungo? Quando c'è un errore? Gli stati non ideali sono metà del lavoro reale, e sono la parte che gli sviluppatori si trovano a inventare quando mancano.

Ignorare il mobile. Se il progetto andrà anche su telefono — e andrà — va disegnato anche lì, non lasciato all'interpretazione.

Trascurare il contrasto. Testo grigio chiaro su fondo bianco è elegante e illeggibile per molte persone. È un requisito di accessibilità, non una preferenza estetica.

Non pensare alle prestazioni. Immagini enormi e caratteri decorativi ovunque sono facili da disegnare e pesanti da sviluppare: vale la pena conoscere i vincoli di velocità di un sito prima di progettarli.

Se sei uno sviluppatore

Vale la pena saperlo, perché è un caso frequente: non serve imparare a disegnare per usare Figma da sviluppatore.

Ti bastano tre cose: aprire un file e navigarlo, selezionare un elemento per leggerne misure, colori e caratteri, ed esportare gli asset che ti servono.

Sono venti minuti di apprendimento che eliminano una quantità sorprendente di scambi di messaggi con chi ha fatto il design.

E l'auto layout ha un vantaggio in più: capire come è stato costruito il progetto ti dice già come andrà strutturato il codice. Se il design è il tuo punto di partenza per imparare a sviluppare, il percorso è in frontend vs backend.

In sintesi

Figma è lo standard per il design di interfacce, gira nel browser e ha un piano gratuito sufficiente per imparare.

I concetti che contano sono quattro: frame (contenitori, non rettangoli), auto layout (la funzione che fa la differenza), componenti (definisci una volta, usi ovunque), stili e variabili (coerenza).

Il percorso più efficace per imparare: ricostruire in Figma un'app che già usi. Insegna più di qualunque corso, perché ti mette davanti a problemi reali.

Se devi imparare una cosa sola: l'auto layout. È quello che trasforma un disegno statico in un progetto che si adatta — ed è anche il concetto più vicino a come le interfacce vengono davvero costruite.

Se vuoi capire come si passa dal design al codice funzionante, nei corsi Codegrind si affronta tutto il percorso.