Le variabili colore di Figma sono uno degli strumenti più utili per organizzare i colori all’interno di un Design System.
Permettono di definire un colore una sola volta e riutilizzarlo in componenti, pagine e interfacce diverse. Se il colore principale cambia, è sufficiente modificare la variabile per aggiornare tutti gli elementi collegati.
Figma ha introdotto anche la possibilità di gestire l’opacità direttamente nelle variabili colore, rendendo ancora più semplice creare diverse varianti dello stesso colore.
C’è però una distinzione importante da conoscere quando si lavora con una palette colori in Figma: l’opacità non equivale a una variazione della luminosità del colore.
Preferisci il video?
Ho creato un video tutorial di circa dieci minuti su YouTube:
Vai al video FIGMA: variabili e stili colore per creare tonalità riutilizzabili
Variabili colore con opacità in Figma
Immaginiamo di avere una variabile colore chiamata Indigo, con valore #4F2CFF.
Possiamo utilizzare la stessa variabile per creare un set di tonalità diverse partendo dallo stesso colore di base, impostando l’opacità al 90%, 80%, 70% e così via.
Ma attenzione: questo non significa realmente che stai creando un set di colori più chiari o più scuri basandoti su un unico colore di base.
Un colore con opacità non viene semplicemente trasformato in una tonalità più chiara. Il colore viene combinato con quello che si trova sotto.
Per esempio:
- indaco al 20% su sfondo bianco → molto chiaro;
- indaco al 20% su sfondo grigio → tonalità differente;
- indaco al 20% su sfondo nero → molto più scuro.
Quindi la stessa variabile colore Figma con opacità può produrre risultati visivi diversi a seconda dello sfondo.
Ed è proprio questo il punto da tenere presente quando si costruisce un Design System.
Un esempio pratico
Immaginiamo di avere un pulsante con sfondo indaco.
La nostra variabile di partenza è Indigo, e poi creiamo tutte le altre variabili basate su Indigo con vari livelli di opacità.
Se applichiamo la variabile Indigo-200, che quindi usa il colore di base indaco con un’opacità del 20% e il pulsante si trova su uno sfondo bianco, otterremo un colore molto chiaro.
Se lo stesso pulsante viene posizionato su uno sfondo nero, il risultato sarà completamente diverso (con relativi problemi di accessibilità, tra l’altro!).
Se invece costruiamo il colore utilizzando Indigo + un layer bianco, la variazione viene determinata dal rapporto tra indaco e bianco, indipendentemente dallo sfondo.
Questo rende il risultato più prevedibile quando la variante deve rappresentare una specifica tonalità della nostra palette.
Opacità e luminosità non sono la stessa cosa
L’opacità indica quanto un colore è trasparente e quanto lascia vedere ciò che si trova sotto.
Quando invece vogliamo creare una variante più chiara o più scura di un colore, stiamo lavorando sulla sua tonalità.
In termini molto semplici:
Opacità: colore + sfondo
Tint: colore + bianco
Shade: colore + nero
Per esempio, se voglio creare una versione chiara del mio blu che rimanga coerente indipendentemente dallo sfondo, posso utilizzare il blu insieme a un layer bianco.
Se voglio creare una versione scura, posso utilizzare un layer nero.
Questo comportamento è diverso dall’utilizzare semplicemente una variabile blu con un’opacità ridotta.
Come creo le varianti di colore in Figma
Nel mio Design System preferisco utilizzare una combinazione di variabili colore e styles di Figma.
Parto da una variabile che contiene il colore di base:
Indigo → #4F2CFF
Poi creo degli styles semantici che utilizzano quella variabile e aggiungono un ulteriore layer.
Per lo stile Primary light:
Indigo + bianco 30%
Per lo stile Primary dark:
Indigo + nero 30%
In questo modo il colore di base rimane centralizzato nella variabile, mentre gli styles definiscono le sue diverse applicazioni.
Posso quindi avere, per esempio:
PrimaryPrimary LightPrimary DarkPrimary HoverPrimary Disabled
tutti costruiti a partire dal colore principale.
Perché usare gli styles insieme alle variabili colore
Questo approccio mi piace soprattutto perché mantiene distinti due livelli del Design System.
La variabile rappresenta il colore di base.
Lo style rappresenta invece il modo in cui quel colore viene utilizzato o trasformato.
Se domani modifico il valore della variabile Indigo, tutte le varianti che la utilizzano vengono aggiornate.
È quindi possibile mantenere una palette più semplice e costruire le diverse varianti senza duplicare continuamente i valori dei colori.
Naturalmente questa non è l’unica strategia possibile per organizzare i colori in un Design System Figma. La scelta dipende dalla struttura del progetto e da come sono organizzati componenti, token e stili.
Per esempio, potresti decidere di rendere anche “primary” una variabile, e poi negli stili del gruppo Primary potresti usare quella variabile anziché la variabile del colore primitivo.
Tutto dipende dalle necessità del progetto e dal tuo modo di lavorare, non credo esista un unico modo giusto.
Quando usare l’opacità nelle variabili colore
L’opacità è invece molto utile quando vogliamo proprio ottenere un effetto di trasparenza.
Può essere utilizzata, per esempio, per:
- overlay;
- elementi sovrapposti;
- icone o testi semi-trasparenti;
- stati disabled;
- effetti visivi;
- superfici che devono lasciar intravedere lo sfondo.
In questi casi è corretto che il risultato dipenda dal colore sottostante.
Se invece stiamo costruendo una palette di shade e tint, dobbiamo considerare che l’opacità potrebbe non produrre il risultato cromatico che ci aspettiamo.
Variabili colore o styles: quale approccio scegliere?
La nuova gestione dell’opacità nelle variabili colore di Figma è sicuramente utile e può rendere più semplice la gestione di alcuni Design System.
Io continuo però a preferire, in determinati casi, la combinazione tra variabili colore e styles.
Non perché uno dei due approcci sia corretto e l’altro sbagliato, ma perché rappresentano esigenze differenti.
Se voglio rappresentare una trasparenza, utilizzo l’opacità.
Se voglio creare una variante cromatica stabile, posso utilizzare un colore di base e costruire tint e shade attraverso layer bianchi o neri.
La cosa importante è sapere quale risultato vogliamo ottenere prima di scegliere lo strumento.
Conclusioni
Le variabili colore di Figma permettono di costruire Design System più modulari e facili da mantenere. La possibilità di gestire anche l’opacità direttamente nella variabile aggiunge un ulteriore livello di flessibilità.
È però importante distinguere tra opacità e variazione cromatica.
Un colore al 20% di opacità non è semplicemente un colore più chiaro: il risultato dipende anche dallo sfondo.
Per questo, quando costruisco shade e tint all’interno di un Design System, preferisco utilizzare il colore di base come variabile e gestire le sue varianti attraverso gli styles.
Sono due strategie valide, da utilizzare in base al risultato che vogliamo ottenere.