Figma: le 12 scorciatoie che usiamo di più

Vi abbiamo spiegato come introdurre Figma agli sviluppatori che lavorano con voi (o come muovervi nel caso foste voi stessi degli sviluppatori) e vi abbiamo anche elencato quali sono i plugin che utilizziamo più spesso in Trapstudio e che ormai fanno parte del nostro processo di lavoro. Ora è il momento delle scorciatoie (o shortcut) più utili che possono semplificarvi il flusso di produzione ulteriormente.

Dando per scontato che conosciate come tornare indietro su Figma, ovvero annullare l’ultima azione fatta con Command/Control + Z, vi ricordiamo che ognuna di queste scorciatoie da tastiera che vedremo è raggiungibile come opzione direttamente dal pannello di lavoro in alto, nella barra orizzontale di status. Si chiamano scorciatoie proprio perché è possibile, con una combinazione di tasti specifica, attivare lo stesso effetto che si otterrebbe andando a cercare l’opzione attraverso i menu a tendina.

Le combinazioni che vi proponiamo le troverete ottime per velocizzare il vostro processo di lavoro su Figma, anche se non sono tutte quelle che il software ha integrate. Per vedere l’elenco completo, potrete selezionare l’icona del punto di domanda nel cerchio nero in basso a destra e poi cliccare su “Keyboard Shortcuts” (senza neanche farlo apposta, c’è una combinazione di tasti anche per questa funzione).

Vi si aprirà davanti un pannello diviso per argomenti con tutte le azioni possibili. Vi invitiamo ad esplorarlo perché, come sempre, quello che va bene per noi non è detto che vada bene anche per voi.

Pannello degli asset

Cominciamo con il richiamare direttamente il pannello degli asset in una modale, pronta per essere filtrata attraverso una barra di ricerca testuale. Gli asset non sono altro che i componenti principali presenti localmente sul vostro file oppure presi da una libreria condivisa. Potrete modificare la visualizzazione degli elementi passando dalla vista griglia alla vista a griglia.

 Mostra/Nascondi Pannello Asset: SHIFT + I
⊞ Mostra/Nascondi Pannello Asset: SHIFT + I

Ridimensionamento frame

Una delle cose più difficili da comprendere, nell’universo della logica di Figma, è sicuramente tutta la parte dei Frame. I Frame sono contenitori, ma a differenza dei gruppi di oggetti (Group), questi hanno delle dimensioni specifiche, che possono essere dettate manualmente andando ad operare con il Width e l’Height nel pannello di destra, con le impostazioni dell’Auto-Layout (anch’esso viene considerato un Frame) oppure con le opzioni di Constraint, sempre nel pannello di destra.
Ipotizzando però che quello che vogliamo fare sia semplicemente forzare le dimensioni del Frame affinché sia grande esattamente come gli elementi che contiene, ci basterà utilizzare la combinazione qui sotto. Quando si tratta di modificare il componente principale, facendo riadattare anche le sue istanze, risulta utilissimo.

 Ridimensiona frame selezionato: OPTION + SHIFT + ⌘ + R
⊞ Ridimensiona frame selezionato: ALT + SHIFT + CTRL + R

Parlando di Frame, lo sapevate che è possibile crearne uno nuovo sia premendo F che premendo A. Su Sketch si utilizzava il tasto A e hanno mantenuto questa cosa, offrendo una doppia opzione e rendere più facile la transizione a chi veniva da quel software.

Forme geometriche

Questa tripletta di scorciatoie è comodissima, anche se l’origine è da cercare nei primissimi software di disegno vettoriale (Adobe Illustrator). Quindi, con tutta probabilità, ne eravate già a conoscenza, ma nel caso rinfrescare la memoria non guasta mai.

 e ⊞ Rettangolo: R
 e ⊞ Quadrato: SHIFT + R
 e ⊞ Ellisse: O
 e ⊞ Cerchio: SHIFT + O
 e ⊞ Linea retta: L

Auto-layout

Se i Frame sono difficili da comprendere, l’Auto-Layout lo è ancora di più. Ci dedicheremo ad un articolo specifico che ne parli a breve, ma nel frattempo, se siete già un po’ pratici dell’argomento, ecco una combinazione per creare e rimuovere un Auto-Layout dal vostro file.

 e ⊞ Crea Auto-Layout: SHIFT + A
 Rimuovi Auto-Layout: SHIFT + Option + A
⊞ Rimuovi Auto-Layout: SHIFT + Alt + A

Griglia

Ecco una scorciatoia per chi, come noi, ha la passione delle colonne e dei ritmi verticali. Una volta creata una griglia, delle colonne o delle righe orizzontali, potremo nasconderle o attivarle con questa combinazione di tasti:

 Mostra/Nascondi Griglia: Control + G
⊞ Mostra/Nascond Griglia: Control + Shift + 4

Seleziona colore

Stiamo lavorando velocemente e creando palette di colori attraverso immagini o riferimenti inseriti dentro il nostro file e vogliamo campionare quello che vediamo. Selezionando una forma o un elemento, ci basterà attivare il Color Picker con questo tasto:

 e ⊞ Seleziona Colore: I

Opacità

Sebbene le opacità non siano molto apprezzate nel mondo degli sviluppatori che vanno a trasformare le nostre interfacce digitali in veri e propri prodotti funzionanti, potrebbe essere necessario utilizzarle, soprattutto se riusciamo a farlo velocemente e per fare qualche prova. Personalmente, è un comando che troviamo molto comodo, ma ricordatevi sempre di campionare nuovamente il colore che ottenete (con la scorciatoia precedente).

 e ⊞ 10%: 1
 e ⊞ 20%: 2
 e ⊞ 30%: 3
E così via fino a  e ⊞ 100%: 0
Potete anche modificare l’opacità in maniera più dettagliata, ad esempio premendo velocemente 3 e 5 per ottenere 35% di opacità.

Allineamento

Per quanto riguarda l’allineamento degli elementi, esiste una combinazione di tasti che vi permette di evitare l’utilizzo delle icone collocate in alto nel pannello di destra.
Ricordatevi sempre che per utilizzare questo comando, occorre avere almeno due elementi selezionati, in modo tale che Figma possa utilizzarli come riferimento nella transizione. In alternativa, questa combinazione funziona anche se si seleziona un solo elemento, purché sia all’interno di un Frame.

Duplica selezione

Questo comando, in realtà, va utilizzato insieme al mouse e permette di duplicare le selezioni che abbiamo attive. In questo modo potremo creare delle copie degli elementi e collocarli direttamente dove più preferiamo. La procedura completa si divide in due passaggi:

Seleziona elemento direttamente della canvas:
 ⌘ + Click
⊞ CTRL + Click

Duplica selezione corrente:
 Option + Trascinamento del cursore
⊞ Alt + Trascinamento del cursore

Copia e incolla proprietà oggetto

Questa combinazione, probabilmente, è fra quelle più comode che si possono utilizzare in fase di lavoro. Partiamo spiegando brevemente cosa siano le proprietà di un elemento (sempre inteso come forma geometrica o font). Le proprietà sono tutte le caratteristiche che sono state associate all’elemento, come ad esempio il border radius in caso di angoli retti, il colore (solidi o radiali), il peso e la famiglia (nel caso di font) e le ombre applicate.

Rifletti immagine

Dopo aver imparato a duplicare, trasformare e allineare i nostri elementi, non ci resta che imparare a specchiarli. Una funzione che trova poche applicazioni, in realtà, ma che risulta utilissima quando si tratta di operare con le immagini.

 e ⊞ Specchio Orizzontale: SHIFT + H
 e ⊞ Specchio Verticale: SHIFT + V

Componenti rapidi

In Trapstudio siamo, da sempre, amanti di Design System flessibili e strutturati, organizzati con metodo e pulizia. Questo ci porta inevitabilmente a creare e smontare componenti con regolarità. Diciamo che, per l’approccio costruttivo che abbiamo internamente, i componenti andrebbero sempre e solo creati, perché smontarli per applicare modifiche non rientra nelle nostre corde. Ma, scherzi a parte, spesso è necessario prendere componenti esistenti e ripartire da zero. In ogni caso, provate entrambe le funzioni e implementatele nel vostro flusso di lavoro: non ve ne pentirete.

Concludendo

Speriamo che questo breve elenco possa velocizzarvi e aiutarvi a muovere il vostro cursore con sempre più sicurezza all’interno di quello che è il nostro software preferito di design.
Figma è flessibile e offre strumenti che, una volta padroneggiati, difficilmente vi faranno cambiare strumento.
Fateci sapere quali scorciatoie avete provato e quali preferite, oppure diteci se ne avete provate alcune che non abbiamo messo nell’elenco: non si smette mai di imparare cose nuove.