La prima consegna del corso l’ho mandata alle due di notte. Il progetto non era difficile, ma avevo trentasei schermate tutte disegnate a mano, e quando la docente mi ha chiesto di cambiare il colore del bottone principale ho dovuto rifarlo trentasei volte.
Da lì ho cominciato a prendere appunti ogni volta che qualcuno, in revisione, faceva in due secondi una cosa che a me costava dieci minuti. Li ho divisi per momento del lavoro, perché i trucchi che servono quando imposti un file non sono gli stessi che ti salvano la sera prima della consegna. Le scorciatoie sono quelle del Mac: su Windows Cmd diventa Ctrl e Option diventa Alt.
Quando apri il file
Le pagine prima dei frame. Una pagina per le bozze, una per il progetto che si consegna, una per i componenti. A me sembrava burocrazia, poi ho capito che in revisione la docente apre il file condiviso dal suo computer, e se trova tutto in una pagina sola si perde lei prima di te.
Stili di colore e di testo da subito. Anche se hai solo due colori e due grandezze di testo. Selezioni un elemento, nel pannello a destra clicchi sui quattro puntini accanto al colore e crei uno stile. Il giorno che ti chiedono di cambiare il colore del bottone lo cambi in un punto e cambia ovunque. È il trucco che mi avrebbe risparmiato quella notte.
La griglia. Ctrl+G mostra e nasconde la griglia del frame. Impostarla all’inizio (colonne, margini, spaziature) ti evita di allineare a occhio.
Mentre costruisci
Auto layout, Shift+A. Questa è quella che mi ha cambiato di più il lavoro. Selezioni un gruppo di elementi, Shift+A, e diventano una fila o una colonna che si adatta al contenuto. Scrivi un testo più lungo nel bottone e il bottone si allarga da solo. Metti una card in più in una lista e la lista si allunga.
All’inizio l’auto layout mi faceva arrabbiare, perché vuole decidere lui le distanze. Poi ho capito che le decide come gliele dico io, basta impostarle nel pannello.
Componenti, Cmd+Option+K. Tutto quello che si ripete (bottoni, card, header) diventa un componente. Le copie si chiamano istanze e seguono l’originale: modifichi il componente e cambiano tutte. Se un’istanza deve essere diversa per una ragione precisa, la stacchi con Cmd+Option+B, ma prima chiediti se non ti serve piuttosto una variante.
Le varianti. Il bottone normale, quello disattivato e quello al passaggio del mouse si fanno come varianti di un unico componente. Nel pannello a destra, sul componente, Add variant. In revisione è la cosa che fa capire subito se hai pensato agli stati o solo alla schermata “bella”.
Option sopra un elemento per misurare. Selezioni un oggetto, tieni premuto Option e passi sopra un altro: Figma ti mostra la distanza in pixel tra i due. Smetti di chiederti se quel margine è 16 o 18.
Cmd+clic per entrare nei gruppi. Invece di fare doppio clic tre volte per arrivare al testo dentro una card dentro una lista, Cmd+clic seleziona direttamente l’elemento più interno.
Copiare solo lo stile. Cmd+Option+C copia le proprietà di un elemento (colore, bordo, ombra, testo), Cmd+Option+V le incolla su un altro. Utile quando sistemi un titolo e vuoi che altri cinque diventino uguali.
Rinominare tutto insieme. Selezioni più livelli e premi Cmd+R: si apre una finestra per rinominarli in blocco, anche con numerazione automatica. Il pannello livelli pieno di “Rectangle 47” è la prima cosa che si nota quando qualcuno apre il tuo file.
Prima di consegnare
Shift+1 e Shift+2. Il primo inquadra tutto il contenuto della pagina, il secondo zooma sulla selezione. Li uso per controllare il file come lo vedrà chi lo apre.
Seleziona i simili. Cmd+Option+A seleziona tutti i livelli simili a quello selezionato. Se trovi un testo con il font sbagliato, lo selezioni, Cmd+Option+A, e li correggi tutti in una volta.
I commenti come lista di cose da fare. Premi C e clicchi su un punto del disegno per lasciare un commento. Le revisioni del corso funzionano così: la docente lascia i commenti direttamente sul file, io li risolvo uno per uno e li segno come risolti. A fine giro so esattamente cosa ho sistemato e cosa no, senza rileggere una mail di due pagine.
Esportare tutto in un colpo. Selezioni i frame, nel pannello a destra imposti il formato in Export, poi Cmd+Shift+E esporta tutto. Se la consegna chiede PNG a 2x e un PDF, aggiungi due righe di esportazione e parte tutto insieme.
La cronologia delle versioni. Nel menu del file c’è Show version history. Prima di una modifica grossa salvo una versione con un nome (“prima della revisione 3”), così se la strada nuova non convince torno indietro in un attimo.
Un paio di plugin
Non ne installo tanti, perché rallentano e distraggono. Quelli che tengo sono due: uno per le icone e uno per riempire le schermate con nomi e testi credibili al posto del lorem ipsum. Così si capisce subito se una card regge un nome lungo o un titolo di tre righe, cosa che con il latino finto non vedi.
Perché in un corso online questi trucchi pesano di più
In aula ti giri e chiedi al compagno. Online il file è il punto d’incontro: la docente lo apre, lo commenta, a volte lo modifica durante la lezione in diretta mentre tu guardi. Se il file è in ordine, la mezz’ora di revisione si passa a parlare del progetto. Le prime volte, con il mio, se ne andava metà a capire dov’era cosa.
Studio nel Bachelor in AI & Digital Communication Design di DAM Academy Online. Figma è uno degli strumenti con cui lavoro di più tra i brief del corso, ma la lista vale per chiunque lo usi per consegnare un progetto a qualcun altro.
Matteo F. frequenta il secondo anno del Bachelor in AI & Digital Communication Design di DAM Academy Online e lavora part-time in una tipografia.