Come iniziare con Figma nel 2026: la guida per principianti aggiornata alla Figma di oggi

Vai su figma.com e registrati con email, Google o GitHub. Inizierai dal piano gratuito Starter. Non serve carta di credito. Se sei studente o docente, controlla anche il programma education di Figma per ottenere accesso esteso. [1][2]

Crea un nuovo file di design e guardati intorno prima di provare a progettare qualcosa di serio. La canvas è il tuo spazio di lavoro principale. Disegna un frame, aggiungi un rettangolo, aggiungi del testo e sposta gli elementi. In UI3 la toolbar è in alto, il pannello dei livelli a sinistra e il pannello delle proprietà a destra. [5][19]

I frame sono contenitori per i tuoi design. I livelli mostrano la struttura di tutto ciò che si trova nel file. Il pannello delle proprietà controlla dimensioni, posizione, colore, effetti, layout ed export. Dedica i primi trenta minuti a cliccare in queste aree. Sembra banale, ma crea la mappa mentale di cui avrai bisogno per tutto il resto. [3][20]

La Dev Mode mostra ciò che serve agli sviluppatori: misure, valori simili al CSS, asset e dettagli di implementazione. Non devi padroneggiarla il primo giorno, ma aprirla presto ti aiuta a capire che i file Figma non sono solo immagini belle. Sono pensati per diventare interfacce reali. [6][21]

Auto Layout è il motore di layout responsivo di Figma. Si comporta in modo simile a CSS flexbox dentro uno strumento di design. Inserisci elementi in un frame, attivi Auto Layout e il frame gestisce spaziatura, allineamento, padding e ridimensionamento. Se l’etichetta di un pulsante diventa più lunga, il pulsante può crescere con essa. Se aggiungi un elemento a una lista, la lista può espandersi in modo prevedibile. Ogni design system serio in Figma si basa su Auto Layout, quindi è la prima funzionalità avanzata da imparare davvero. [5][22]

I componenti sono elementi di design riutilizzabili. Se trasformi un pulsante in componente, puoi riutilizzarlo in molte schermate e aggiornare tutte le istanze da una sola fonte. Le varianti ti permettono di tenere insieme stati diversi: primary, secondary, disabled, loading, hover, active e così via. È così che i team evitano il caos del copia-incolla e mantengono coerenti prodotti grandi. [23][24]

Le variabili salvano valori riutilizzabili come colori, spaziature, dimensioni tipografiche e raggi dei bordi. Invece di digitare sempre lo stesso colore hex, fai riferimento a una variabile. Se il colore del brand cambia, aggiorni la variabile una volta e tutto ciò che è collegato si aggiorna. Per un principiante l’abitudine importante è semplice: iniziare a trattare colori e spaziature come valori di sistema riutilizzabili fin dal primo progetto reale. [25]

La prototipazione trasforma schermate statiche in un’esperienza cliccabile. Colleghi un frame a un altro, scegli trigger come click o hover e aggiungi transizioni come dissolve, slide o smart animate. Non servono animazioni complesse per iniziare. Costruisci prima un flusso semplice di due o tre schermate. È già sufficiente per mostrare a un cliente, a un collega o a uno stakeholder come dovrebbe comportarsi l’interfaccia. [3][26]

Stark ti aiuta a controllare problemi di accessibilità dentro Figma, inclusi contrasto e altre criticità di usabilità. Per un principiante il valore non è solo il risultato del plugin: ti insegna un’abitudine fondamentale, cioè che una buona interfaccia non deve solo essere bella, ma leggibile e utilizzabile da più persone. [8]

Il plugin Unsplash ti permette di cercare e inserire foto stock gratuite senza uscire da Figma. Fa risparmiare tempo e ti aiuta a evitare l’errore tipico dei principianti: prendere immagini casuali dal web senza capire i diritti d’uso. [9]

Content Reel riempie i tuoi design con contenuti segnaposto realistici, come nomi, date, dettagli di profilo e frammenti di testo. I mockup sembrano più vicini a prodotti reali e non tutti uguali con Lorem Ipsum ovunque. [10]

Iconify ti dà accesso a più di 100.000 icone da molti set popolari. Invece di cercare file SVG manualmente, puoi cercare, inserire e stilizzare icone direttamente in Figma. Per un principiante elimina molta frizione nella creazione di mockup puliti. [32]

Magician è un plugin assistito dall’AI per generare idee di design, icone, testi e asset visivi da prompt. I risultati non sono sempre pronti per la produzione, ma è utile per esplorare rapidamente quando sei bloccato o ti serve un punto di partenza. [33][34]

Autoflow ti aiuta a disegnare frecce e connettori puliti tra frame o oggetti. È utile quando vuoi spiegare un flusso utente, mappare transizioni tra schermate o mostrare come un prototipo passa da uno step all’altro. Per i principianti rende i flussi più facili da comunicare senza perdere tempo a disegnare linee a mano. [35]