Figma Top Plugin Cover

Plugin Figma: gli 11 che preferiamo

Figma, come ormai ben saprete, è uno strumento potentissimo che ci permette di collaborare con colleghi e amici sullo stesso file. L’azienda ha sempre creduto fortemente nella filosofia della collaborazione fra persone e questa cosa non si riflette solo sui nostri documenti di design, ma anche con la “Community di Figma“.

La community è un aggregatore che unisce le persone che generano contenuti con quelli che cercano contenuti.
Ci possiamo accedere semplicemente selezionando Community nel pannello in homepage e da lì usare la barra di ricerca per iniziare.

Qui potremo trovare file fatti da altri, come Design Systems, kit di componenti, applicazioni e siti già disegnati e addirittura illustrazioni. Vi invito quindi a fare un salto e vedere cosa la Community ha creato ultimamente!

Ma la cosa non finisce qua, perché all’interno dello stesso portale, potremo anche trovare e cercare i Plugin.

Ma esattamente, cosa sono i Plugin di Figma?

I plugin sono delle micro applicazioni richiamabili all’interno di Figma e che vanno a interagire direttamente con il contenuto del nostro file di lavoro.
Avremo quindi i plugin che automatizzano alcuni processi, come la stilizzazione in blocco di una serie di colori non ancora campionati oppure la generazione di contenuti come foto e gradienti nella pagina.

Insomma, scoprirete presto che esiste un plugin più o meno per qualunque task dobbiate fare.
In questo articolo parleremo però di quelli che usiamo più spesso all’interno di Trapstudio e che abbiamo imparato a conoscere e apprezzare con il tempo. Se un plugin è finito in questa lista è perché risolve egregiamente un problema, ha un’applicazione facile da usare, è estremamente rapido ed è gratis.

Nota: tutti i plugin sono gratis, come ad esempio Stark (è un servizio che valuta l’accessibilità del design che gli facciamo vedere). Tuttavia, proprio come nel caso di Stark, per usarlo è necessario sottoscrivere un abbonamento mensile sul loro sito e poi loggare con il proprio user all’interno del plugin.

Contenuti

Questa è una selezione di plugin che si occupano di generare contenuti nel nostro documento, come immagini, icone e addirittura testi. Vale la pena provarli perché in questo modo non saremo obbligati a uscire da Figma per usare Google Immagini o il vostro sito Lorem Ipsum preferito.

Unsplash

Figma Top Plugin Unsplash

Questo plugin si appoggia direttamente alla libreria di Unsplash, un sito che propone immagini di altissima qualità (sia come dimensioni che come tecnica di scatto). Una volta aperto, ci troveremo davanti a un pannello con 3 tab:

  • Editorial – immagini selezionate dal team di Unsplash
  • Presets – un elenco di categorie come ad esempio animali o astrattismo
  • Search – un campo di input dove digitare quello che stiamo cercando
Unsplash Working

Il funzionamento è molto semplice: la selezione che faremo dal plugin andrà a sovrascrivere direttamente la shape che stiamo selezionando nel documento.

Unsplash

LottieFiles

Figma Top Plugin LottieFiles

Lottie è una libreria per iOS, Android e React Native che renderizza le animazioni fatte con After Effects in tempo reale, permettendo alle app di usare le animazioni in maniera semplice, come se fossero immagini.

Visto l’enorme successo della libreria, molti si sono cimentati nel creare le proprie animazioni, caricandole poi direttamente sul sito. Ed è proprio così che è nato LottieFiles, un sito ricchissimo di contenuti da scaricare (si parla sempre di animazioni) e addirittura un editor online per modificare animazioni già esistenti. Dateci un occhio

Il plugin Figma associato a questo sito permette di accedere liberamente alla libreria e di caricare le animazioni direttamente sul documento interessato.

LottieFiles

Iconify

Figma Top Plugin Iconify

Una delle cose più scomode, quando si tratta di lavorare in ambito UI, è quella di importare icone in SVG da librerie esterne. Infatti, solitamente, occorre andare su un sito repository, cercare l’icona che ci serve, scaricarla nella nostra cartella di download e poi trascinarla all’interno del documento.

Un processo abbastanza lungo, soprattutto perché occorre passare da Figma a browser e da cartella dei download a Figma in continuazione.

Esiste un plugin che ha raggiunto una fama strepitosa che risolve questo problema. Aprendo Iconify, non dovremo far altro che cercare l’icona e trascinarla nel frame su cui stiamo lavorando. Il plugin è sempre interno al documento, quindi i passaggi sono davvero ridotti all’osso.

Iconify

Suggerimento personale: Nel caso non vogliate utilizzare un plugin per le icone e voleste avere più controllo sui vostri set, esiste un leggerissimo software gratuito, chiamato Iconset che ci permette di organizzare le nostre icone, cercarle per cartelle e importare i set che più preferiamo.

In Trapstudio Iconify e Iconset hanno riscosso molto successo.
Siccome il discorso delle icone è basato interamente sulle preferenze personali, abbiamo voluto proporre entrambe le soluzioni.

Iconset

Content Reel

Figma Top Plugin Content Reel

Content Reel fa parte dei plugin creati direttamente dal team di Microsoft per Figma.
Questo significa un supporto eccellente, con aggiornamenti costanti e bug risolti relativamente alla svelta. Content Reel non è altro che un plugin che genera contenuti in maniera trasversale, fornendoci immagini, icone e testi.

Il plus, oltre ad essere un plugin unico che assimila le funzionalità dei plugin precedenti, è quello che se abbiamo preferenze in termini di testi e immagini, possiamo aggiungerli alla libreria, così da poterli riutilizzare in futuro.

Perché usare questo plugin che ha la funzionalità dei 3 plugin precedenti? Questione di gusti, semplicemente. Con questo avete tutte le opzioni di creazione contenuto che volte, ma le opzioni sono molto meno verticali.

Content Reel

Verifica, controllo e handoff

Il prossimo elenco è una risorsa eccellente nel caso in cui volessimo usare plugin in grado di semplificarci la vita e ridurre drasticamente i tempi un po’ più noiose ed esecutive.

Rename it

Figma Top Plugin Rename It

Rename it ci permette di cercare nella sidebar di sinistra i nomi che abbiamo dato ai livelli, ai componenti e ai frame e cambiarli secondo i parametri che andremo a impostare.

La cosa comoda è che potremo sia sostituire una parola specifica con un’altra (esempio: il classico “Group” possiamo trasformarlo in “Card” o “Input”), sia andare a rimuovere delle parole.

Il plugin permette infatti di selezionare i nomi e cancellare le prime lettere, cercare per fattori particolari e uniformare i contenuti. Insomma, provatelo e divertitevi perché le opzioni sono davvero tantissime.

Rename It

Text Counts

Figma Top Plugin Text Counts

Questo è uno di quei plugin semplicissimi che fa esattamente quello che promette: selezionando un livello di testo, ci dirà quante battute, parole o spazi ci sono all’interno di un paragrafo. Apparentemente, l’utilità è molto situazionale, quindi ognuno potrebbe usarlo per motivi completamente diversi.

In Trapstudio lo utilizziamo per contare il numero di battute di una singola riga di paragrafo e verificare siano sempre fra le 75 e le 90, il numero ideale in termini di leggibilità.

Text Counts

Design Lint

Figma Top Plugin Design Lint

Design Lint è uno strumento utilissimo se, come noi, siete appassionati di Design System e creazione di stili di livello e di testo. Lanciando il plugin, avremo la possibilità di fargli analizzare dei livelli a nostra scelta e ricevere un report.

Questo report ci evidenzierà gli elementi che non sono collegati ad alcun livello. Immaginate di lavorare a un enorme progetto e di rendervi conto, dopo duplicazioni su duplicazioni, che uno degli elementi più utilizzati è privo di stili assegnati. Con un check iniziale con Design Lint vi risparmierete moltissimo lavoro dopo.

Design Lint

Font Replacer

Figma Top Plugin Font Replacer

Un altro plugin estremamente semplice e lineare: trova un determinato font (famiglia e peso) e lo sostituisce con un altro a vostra scelta. La libreria da cui trova delle alternative è quella del vostro computer e più risultare un elenco lunghissimo.

Nel caso non avessimo utilizzato degli stili di livello precedentemente e fosse necessaria una modifica, questo plugin potrebbe davvero risparmiarci tantissimo tempo.

Font Replacer

A11y – Color Contrast Checker

Figma Top Plugin Color Contrast Checker

Appena lanciato il plugin di Microsoft, ci verrà chiesto di selezionare un frame e cliccare su Check. Ci verrà subito indicato il livello di contrasto e di accessibilità che i nostri testi hanno rispetto allo sfondo. Essenziale se ci si vuole concentrare sul design per tutti.

A11y – Color Contrast Check

User Interface

Questa ultima seleziona di plugin è più dedicata alle fondamenta della UI: la tipografia e il colore (più un piccolo bonus da 12esima posizione).

Typescales

Figma Top Plugin Typescales

Non ci stancheremo mai di ripetere quando questo plugin sia eccezionale. Una volta aperto, ci chiederà di impostare una misura per il paragrafo (che solitamente oscilla fra i 14 e i 18 punti), di selezionare il numero di dimensioni che vogliamo generare più grandi e più piccole del paragrafo e infine una scala di conversione (Golden Ratio, Major Third o molte altre).

Cliccando su Generate, verrà incollata sul nostro documento l’intera scala modulare, con delle misure proporzionate e la possibilità di editarla a mano, così da poter poi convertire il tutto in stili di testo dedicati.

Typescales

Color Designer

Figma Top Plugin Color Designer

Tutti quanti abbiamo le nostre preferenze in termini di tool per la generazione di palette e schemi di colore, ma siamo sicuri che questo plugin possa mettere d’accordo tutti quanti.

Si incomincia selezionando un colore sul nostro documento e poi si procede generando le tinte, le ombre e il metodo per l’armonia (complementari, analoghi, triade eccetera).
Possiamo anche utilizzare questo plugin per generare gradienti e selezionare colori da palette già impostate, ma è sicuramente un plus comodo.

Solo la prima parte vale tutto il plugin.

Color Designer

SmoothShadow

Figma Top Plugin SmoothShadow

Le ombre sono la croce e la delizia della UI, soprattutto perché ogni anno compaiono dei trend che le adottano e altri no. Intere correnti stilistiche che includono o escludono lo stesso elemento.

E poi, una volta deciso di mettere o meno un’ombra, non è così facile perché possiamo creare migliaia di sfumature diverse, rischiando così di perdere tantissimo tempo.

Questo plugin risolve il problema generando un’ombra con la migliore transizione possibile e applicandolo ai livelli che ci interessa. Attenzione, maneggiare con cura.

SmoothShadows