Figma Top Plugin Cover 3

Plugin Figma: gli 11 plugin che preferiamo nel 2024

Come ricorderete, anni fa pubblicammo un articolo che elencava i nostri plugin preferiti. I tempi sono cambiati, Figma si è evoluto e il nostro modo di lavorare – complice anche la mole sempre maggiore di progetti – è cambiato come tutto il resto.

Alcuni plugin Figma sono rimasti salvati nella nostra libreria, mentre altri hanno lasciato spazio ad alternative più valide o aggiornate. Vediamo insieme brevemente cosa abbiamo rimosso e perché, prima di darvi un elenco aggiornato.

Cosa è cambiato

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. La filosofia dietro ai plugin è rimasta la stessa, molti utenti continuano a crearne di nuovi per nicchie specifiche o per attività macro-scopiche (come far riorganizzare l’intero file a un algoritmo, pulendolo da tutti i layer extra).

Tuttavia, negli anni Figma è andato avanti tantissimo, inglobando nel suo workflow le stesse funzionalità che all’epoca erano esclusiva di alcuni plugin. Come ad esempio il vecchio “Rename it”, che ci permetteva di rinominare diversi livelli in maniera smart. Anche “find and replace”, che cercava dei testi nel documento, cambiandoli, era un plugin estremamente utile che abbiamo usato in lungo e in largo. Ora è tutto relegato alla combinazione [CMD] + [R] nativamente su Figma. Se vogliamo spingerci ulteriormente oltre, con l’avvento della AI (quante cose che sono successe dalla prima stesura di questo articolo!), possiamo relegare il naming e la pulizia del file (o anche le traduzioni) direttamente a Figma. Selezionate l’icona delle stelline nella tab in basso e vi basterà fare un prompt delle vostre richieste.

I nostri 11 plugin Figma preferiti (aggiornati 2024)

Unsplash

Nonostante le nuove funzionalità di Figma per la generazione avanzata di contenuti tramite AI, questo plugin non abbiamo mai smesso di usarlo. Anche lui si è evoluto, modificando leggermente il flusso di ricerca.

Il pannello consisterà nelle seguenti voci:
Search – un campo di input dove digitare quello che stiamo cercando
Editorial – immagini selezionate dal team di Unsplash
Presets – un elenco di categorie come ad esempio animali o astrattismo

UPDATE Unsplash 1

Search ovviamente sarà quella di apertura, nella quale potremo filtrare il taglio dell’immagine (orizzontale, verticale o quadrata), la licenza (se gratuita o premium) e l’ordine di presentazione (rilevanza o cronologico).
Nonostante al suo interno ora ci siano moltissime foto premium, consigliamo di continuare ad usarlo senza problemi perché la qualità del materiale è sempre altissima anche del reparto gratuito.

UPDATE Unsplash 2

Unsplash

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 (alcuni servizi ci permettono però di copiare direttamente il codice SVG, così poter saltare un passaggio).
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.

UPDATE Iconify 1 1

Iconify

Brandfetch

Uno strumento fondamentale per chi lavora su progetti che richiedono l’uso di loghi ufficiali di aziende famose è Brandfetch. Questo plugin consente di cercare e inserire rapidamente loghi di brand internazionali direttamente nel file Figma, eliminando la necessità di passare da un sito all’altro per il download e il caricamento. Basta cercare il nome del brand, selezionare il logo, e Brandfetch ci troverà tutte le diverse varianti disponibili (logo, logotipo, dark, verticale eccetera). Una volta trovato quello giusto, lo aggiunge istantaneamente alla nostra area di lavoro. Un plugin semplice, ma che fa risparmiare tempo prezioso, particolarmente utile nelle fasi di mockup e design.

UPDATE Brandfetch 1

Brandfetch

Beautiful Shadows

Beautiful Shadows è un plugin creato per chi vuole aggiungere ombre con un’estetica raffinata e personalizzata ai propri elementi di design. Una volta selezionato il frame, il plugin genera ombre che si fondono armoniosamente con gli altri elementi della UI, conferendo profondità e definizione all’elemento. Con Beautiful Shadows è possibile regolare intensità, direzione e sfumatura dell’ombra in modo intuitivo, senza dover passare per impostazioni complesse. Ideale per UI soprattutto in ambito skeumorfico. Siamo sicuri che per la semplicità d’utilizzo, troverà molti fan tra di voi.

UPDATE Beautiful Shadows 1

Beautiful Shadows

Visual Contrast: Everything clearly with APCA

Parliamo di contrasto e dei due grandi mondi che monitorano quest’area: APCA e WCAG. Entrambi i sistemi misurano i livelli di contrasto percepiti dall’utente. La differenza principale è che il WCAG copre l’interezza del sito web, mentre l’APCA ha un focus sulla leggibilità dei testi.

L’APCA (Advanced Perceptual Contrast Algorithm) è diventato uno standard emergente, offrendo una precisione superiore rispetto alla scala WCAG tradizionale (in quello che è il suo ambito specifico visto prima). A differenza dei metodi convenzionali, l’APCA considera la percezione visiva umana, risultando in misurazioni che riflettono meglio il contrasto effettivo percepito dall’occhio umano: Visual Contrast: Everything Clearly with APCA è un plugin che sfrutta questo nuovo algoritmo per analizzare accuratamente il contrasto degli elementi nel layout.
Utilizzando l’APCA, il plugin aiuta a garantire che ogni componente dell’interfaccia sia leggibile e accessibile, soprattutto per chi ha disabilità visive. Con un solo click, Visual Contrast fornisce una valutazione chiara del contrasto su più livelli di dimensioni. Una cosa molto comoda è che, in caso di test fallito, si potrà selezionare dove i requisiti non sono rispettati per avere una proposta di successo direttamente dal plugin.

UPDATE Visual Contrast Everything clearly with APCA 1

Visual Contrast: Everything clearly with APCA

A11y – Color Contrast Checker

Il diretto “competitor” è lo standard WCAG (Web Content Accessibility Guidelines), nonché ancora il più utilizzato. Le linee guida WCAG offrono criteri specifici per garantire che il contrasto dei colori sia adeguato, facilitando la leggibilità e migliorando l’esperienza degli utenti con disabilità visive.

Non staremo qua a dire quale scegliere e in che ambito, anche perché ogni progetto richiede standard metrici diversi. Tuttavia, nel caso abbiate necessità di lavorare con il WCAG, questo plugin fa al caso vostro: A11y – Color Contrast Checker è un plugin che applica queste linee guida direttamente all’interno di Figma, consentendo di verificare velocemente il livello di contrasto tra colore foreground con background. Selezionando un elemento e cliccando su “Check,” il plugin analizza il contrasto e segnala eventuali problemi di accessibilità. Essenziale per chi desidera progettare con inclusività, A11y – Color Contrast Checker semplifica il rispetto dei criteri WCAG, aiutando a creare interfacce accessibili per tutti gli utenti. La scala di valutazione è in AAA – simpatica la valutazione in AAAMAZING quando tutti i requisiti di contrasto sono raggiunti.

UPDATE A11y Color Contrast Checker 1

A11y – Color Contrast Checker

Color Variables Style Guide

Per chi cerca un modo efficiente di gestire e documentare le variabili di colore, Color Variables Style Guide è il plugin ideale. Questo strumento consente di esportare rapidamente tutte le variabili di colore utilizzate, visualizzandole in formati HEX, RGB, HSL o LCH, con la possibilità di scegliere la disposizione in formato tabella o griglia. Perfetto per creare una style guide completa e facilmente consultabile, Color Variables Style Guide aiuta a mantenere coerenza e chiarezza nei progetti, fornendo al team una panoramica visiva di tutte le scale cromatiche utilizzate. In caso di aggiornamenti delle variablili di colore con l’avanzamento del progetto, sarà sufficiente riesportare nuovamente il tutto, richiamando il plugin.

UPDATE Color Variables Style Guide 1

Color Variables Style Guide

Local Print

Local Print è un plugin avanzato che non solo stampa e organizza le variabili del progetto (come visto in precedenza), ma evidenzia anche le relazioni tra variabili collegate fra loro. Questa funzione è particolarmente utile per chi lavora con design system complessi, in cui è essenziale comprendere come una modifica a una variabile influisca sulle altre. Con una visualizzazione chiara e dettagliata, Local Print rende semplice individuare e gestire le interconnessioni, assicurando che ogni variazione sia tracciata e valutata in modo accurato, senza lasciare spazio a errori.

Nei sistemi complessi, vengono generate variabili per diverse scale di colore, che a loro volta vengono poi utilizzate per generare stati più o meno complessi. Esempio: abbiamo green-10, green-20 eccetera come scala colore. Decidiamo quindi di creare una collezione di variabili specifica per i cambi di stato. Invece di avere modal-success: [#color] avremo invece modal-success: green-50. Questo plugin ci permette quindi di dare evidenza proprio a questa casistica specifica.

UPDATE Local print 1

Local Print

Table Creator

Table Creator è il plugin perfetto per chi ha bisogno di generare tabelle complesse e personalizzate in Figma. Questo strumento consente di configurare facilmente il numero di colonne e righe, creando automaticamente tutte le celle e gli stili necessari per una tabella ordinata e coerente. Table Creator permette anche di personalizzare ulteriormente le tabelle con opzioni di stile, rendendolo ideale per progettare dashboard, report e qualsiasi altra interfaccia che richieda dati strutturati. Un vero alleato per risparmiare tempo e creare layout tabellari senza complicazioni. Verrà creata una pagina specifica con tutti i componenti necessari all’editing della tabella e una tabella vera e propria che incorpora tutte le diverse istanze.

UPDATE Table Creator 2
UPDATE Table Creator 1

Table Creator

Prop Star

Propstar è un plugin potente per generare tutte le possibili istanze di un componente, includendo ogni combinazione di varianti e proprietà, e organizzandole in una tabella ordinata e ben etichettata. Con pochi clic, si può selezionare uno o più componenti o set di componenti e, tramite il comando “Create property table” in Propstar, generare automaticamente una tabella che mostra sia il componente principale che tutte le sue possibili istanze.

Questo plugin offre anche diverse impostazioni personalizzabili: si possono, ad esempio, includere le istanze booleane per ottenere ogni permutazione possibile del componente o disabilitarle per una visualizzazione più pulita. Per chi ha la versione Pro, Propstar consente di attivare le istanze nidificate, mostrando così le proprietà delle istanze annidate direttamente nella tabella. Altre opzioni Pro includono la personalizzazione di colori, dimensioni dei font, peso dei bordi e opacità, così da poter adattare la tabella alle esigenze del progetto.

UPDATE Propstar 1

Propstar

Color Wheel Palette Generator

Color Wheel Palette Generator è un plugin indispensabile per chi desidera creare palette di colore sulle solide basi della ruota colore.
Basato – appunto – su una ruota dei colori interattiva, il plugin offre la possibilità di generare combinazioni in diverse tipologie, come Complementare, Split, Triade e molte altre. Con pochi clic, è possibile esplorare e selezionare le armonie cromatiche più adatte al progetto, facilitando la creazione di schemi di colore coerenti. Ideale per chi vuole andare oltre le palette standard, Color Wheel Palette Generator apre un mondo di possibilità. Inoltre, esportando la palette scelta, verranno proposti tutti i colori selezionati nella loro tinta ma con luci e ombre graduali.

UPDATE Color Wheel Palette Generator 2
UPDATE Color Wheel Palette Generator 1

Color Wheel Palette Generator