Gradienti in Figma: consigli per risultati più morbidi

Per fare un gradiente in Figma, seleziona un livello, clicca il campione del suo riempimento e cambia il tipo di riempimento da Solid a Linear, Radial, Angular o Diamond. Sul canvas compaiono delle maniglie: trascinale per impostare la direzione e la portata della sfumatura, e clicca la barra del gradiente nel selettore per aggiungere punti di colore. Bastano pochi secondi. Farlo sembrare morbido, ricco e identico una volta arrivato nel codice richiede qualche abitudine in più, ed è di questo che parla questa guida.

I quattro tipi di gradiente in Figma

Il lineare va bene per la maggior parte di sfondi e pulsanti. Il radiale va bene per bagliori e fari. L’angolare disegna ruote di colore, quadranti e riflessi metallici. Il diamante serve di rado; dà un bagliore sfaccettato in quattro direzioni che è distintivo nell’illustrazione ma sul web deve diventare una bitmap. Per come si comporta ogni tipo nel design in generale, vedi i tipi di gradiente.

Usare l’editor dei gradienti

1. 1

   Imposta la direzione con le maniglie

   Una maniglia segna dove sta il primo colore, l’altra dove sta l’ultimo. Trascina la maniglia finale oltre il bordo del frame per una sfumatura più dolce, oppure tirala dentro per una più corta e ripida.

2. 2

   Aggiungi punti sulla barra

   Clicca in un punto qualsiasi della barra del gradiente nel selettore colori per aggiungere un punto, poi dagli un colore. Seleziona un punto e premi Canc per rimuoverlo.

3. 3

   Usa l’opacità dei punti per le dissolvenze

   Ogni punto ha una propria opacità. Sfumare un colore fino allo 0% di opacità permette a un gradiente di sovrapporsi a una foto o a un altro riempimento.

4. 4

   Impila i riempimenti

   Un livello può contenere più riempimenti. Aggiungi un secondo gradiente sopra il primo, con aree trasparenti, per sovrapporre un bagliore a una sfumatura di base.

5. 5

   Salvalo come stile

   Salva il riempimento finito come stile di colore così tutto il team usa lo stesso gradiente. Le variabili di Figma non contengono gradienti, ma gli stili sì.

Correggere centri grigi e sfumature sporche

Figma sfuma direttamente i punti di colore, un po’ come fa il CSS per impostazione predefinita, e non ha un’opzione per sfumare in uno spazio colore percettivo. Una lunga sfumatura tra tinte distanti, come blu e arancione o blu e giallo, si affloscia in grigio al centro. La soluzione è un punto centrale: scegli il colore che vuoi che abbia il punto medio, di solito una tinta intermedia più vivace, e aggiungilo a mano. I gradienti sporchi spiegano la teoria del colore.

Gradienti tipo mesh in Figma

Figma non ha uno strumento per i gradienti mesh, ma una versione convincente si costruisce in fretta. Disegna quattro o cinque ellissi nei tuoi colori, sovrapposte, dentro un frame con lo sfondo scuro o chiaro. Raggruppale, aggiungi al gruppo una grande Layer blur e ritaglia il contenuto del frame. Sposta le ellissi per riequilibrare il colore. È la stessa idea della tecnica a strati dei gradienti mesh in CSS, e i gradienti mesh trattano il lato del design.

Aggiungere grana per nascondere il banding

I gradienti lisci esportati in PNG o JPEG a 8 bit possono mostrare gradini visibili, soprattutto nelle dissolvenze lente e scure. Un leggero strato di rumore li spezza. Le versioni recenti di Figma includono opzioni di rumore e texture nel pannello Effects; altrimenti, metti sopra il gradiente un’immagine di rumore ripetibile con una modalità di fusione come Overlay o Soft light a bassa opacità. Il banding nei gradienti spiega perché funziona, e i gradienti granulosi perché sembra anche più bello.

Esportare e far corrispondere i gradienti di Figma in CSS

In Dev Mode o nel pannello Inspect, Figma mostra il CSS dei riempimenti a gradiente. Consideralo un punto di partenza e controlla tre cose. Primo, l’angolo: le maniglie che hai trascinato su un frame non quadrato possono tradursi in un angolo che non avresti scelto, quindi arrotondalo a un valore pulito. Secondo, il profilo colore: se il tuo file usa Display P3, gli stessi valori esadecimali possono sembrare diversi in un browser sRGB. Terzo, i riempimenti impilati: diventano gradienti separati da virgole, con il riempimento di Figma più in alto elencato per primo.

/* Figma: linear fill, #0f172a to #4338ca to #a5b4fc, top left to bottom right */
.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #a5b4fc 100%);
}

/* Figma: angular fill */
.dial {
  background-image: conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9);
}

Per le immagini, esporta a 2x per risultati nitidi sugli schermi ad alta densità, e preferisci il PNG per i gradienti con trasparenza. Per i gradienti che devono restare vettoriali, l’esportazione SVG scrive i riempimenti lineari e radiali come gradienti SVG; vedi i gradienti SVG per capire cosa ottieni. I riempimenti a diamante, le mesh sfocate e il rumore escono sempre come pixel.

Se costruisci molti sfondi a gradiente per post social, presentazioni e banner, uno strumento che genera lo stesso materiale a ogni dimensione ti evita di riesportare. In Gradiently un Mark viene generato dal vivo a ogni formato e non ritagliato da un’unica esportazione.