Dimentica il concetto di "pagina bianca" o "tavolo da disegno". In Figma tutto si progetta dentro i Frame. Un Frame non è un semplice rettangolo, ma un contenitore intelligente che simula lo schermo di un dispositivo reale.

Quando ne crei uno, Figma ti permette di scegliere dal menu a destra le dimensioni esatte dei modelli esistenti (es. iPhone 14, Desktop standard, MacBook). Tutto ciò che disegnerai vivrà dentro questi schermi digitali.

A differenza di altri software di grafica, dove i tracciati sono linee rigide con un inizio e una fine, Figma usa i Vector Networks.

Con lo strumento Penna puoi collegare più linee allo stesso identico punto di ancoraggio, creando ragnatele di forme in modo molto più naturale, veloce e flessibile. È lo strumento perfetto per disegnare icone millimetriche direttamente nell'interfaccia.

Nel menu a sinistra hai il pannello dei Layers. In Figma l'ordine visivo è tutto: i livelli funzionano a incastro (come le scatole cinesi).

Se trascini un testo o un bottone dentro un Frame, quel livello diventerà automaticamente "figlio" del Frame nel pannello a sinistra. Tenere d'occhio questo pannello serve a capire se un elemento è davvero dentro lo schermo o se sta fluttuando nel vuoto.

Questo è lo strumento più importante di Figma. L'Auto Layout (attivabile con la scorciatoia Shift + A) permette a un Frame di comportarsi come un vero sito web.

Se crei un bottone con una scritta dentro e applichi l'Auto Layout, il bottone si allungherà o si rimpicciolirà da solo mentre scrivi le parole, mantenendo i margini perfetti. Serve a creare interfacce flessibili che si adattano a qualsiasi dimensione di schermo senza dover ridisegnare tutto a mano.

Immagina di dover disegnare un'app con 50 schermate, e in ognuna c'è la stessa barra di navigazione in alto. Se devi cambiare il colore di quella barra, dovresti farlo 50 volte.

In Figma selezioni la barra, clicchi sull'icona dei quattro rombi in alto e la trasformi in un Componente (Component). Questo diventerà il tuo "Master". Potrai copiarlo in tutte le pagine che vuoi: quando modificherai il colore sul Componente Master, tutte le altre 50 copie si aggiorneranno all'istante in un millisecondo.

Per fare un lavoro professionale non si possono scegliere i colori o i caratteri a caso ogni volta. Figma permette di salvare questi elementi nei Design Styles.

Scegli il tuo font principale e il tuo colore primario e salvali nel pannello di destra chiamandoli, ad esempio, "Titolo Grande" e "Colore Brand". Applicando questi stili ai testi e alle forme, si assicura che l'intera applicazione sia visivamente coerente e si potrà modificare l'intero progetto modificando una sola voce.

La magia di Figma è che non si crea un'immagine statica. Cliccando sulla scheda Prototype in alto a destra, è possibile collegare gli schermi tra loro.

Se trascini una linea blu da un pulsante della prima pagina verso la seconda pagina, crei un'interazione. Premendo il tasto Play in alto, potrai testare l'app sul computer o sullo smartphone come se fosse vera, cliccando sui pulsanti e vedendo le transizioni reali.

Figma è nato per fare da ponte tra i designer e i programmatori che dovranno scrivere il codice del sito o dell'app.

Selezionando qualsiasi elemento del disegno e attivando la Dev Mode, Figma traduce la grafica in righe di codice reali (CSS, iOS o Android). Mostra le distanze esatte in pixel, i codici dei colori e le dimensioni dei font, rendendo il passaggio del lavoro agli sviluppatori pulito e senza errori di interpretazione.

Quando il progetto è finito, è necessario salvare le singole icone, i loghi o le immagini per poterli inserire nel sito web o nell'applicazione reale.

Seleziona l'oggetto che ti interessa, vai in fondo al menu di destra e cerca la voce Export. Da qui puoi decidere in che formato salvarlo: PNG o JPG per le immagini classiche, oppure SVG, che mantiene le icone vettoriali leggerissime e perfettamente nitide su qualsiasi schermo.