Tutti gli articoli

Sfumature delicate in Figma: tre livelli radiali invece di un riempimento

Puoi costruire un riquadro dai colori sfumati con più riempimenti radiali semplici. Ogni livello ha il proprio centro di colore e il bordo diventa trasparente, lasciando vedere gli altri colori.

Schema della sfumatura menta con tre livelli radiali e codici HEX
«Мятный свет», dal post n. 644 di CreoPrompt: colori e posizione dei tre livelli radiali.

Analizza la struttura del riquadro

Nel post n. 644 sono mostrate otto combinazioni per Figma. Il principio comune è usare più Radial Fill, non una sola sfumatura con un lungo elenco di punti multicolore. Ogni riempimento crea una zona morbida separata.

Per l'esercizio usa un rettangolo con angoli arrotondati e una base chiara e sobria. Riproduci prima la combinazione «Мятный свет» (Luce menta), poi cambia i colori. Sarà più facile capire che cosa dipende dalla palette e che cosa dalla posizione dei centri.

Nelle istruzioni originali ogni livello radiale ha due punti estremi: un colore con opacità 100% e lo stesso colore con opacità 0%. Il bordo semitrasparente permette ai livelli di sovrapporsi senza creare fasce nette.

I colori del primo esempio

La scheda «Мятный свет» indica tre colori e i riferimenti per le posizioni. Mantieni questi valori nel primo esercizio per confrontare il risultato con l'originale invece di scegliere tutto insieme.

  • #A4FCF5: livello menta, centro in alto a sinistra.
  • #CDAFFA: livello lilla, centro in alto a destra.
  • #F7CBBF: livello pesca, centro in basso a sinistra.

Imposta prima il livello menta dal colore pieno alla trasparenza. Poi aggiungi lilla e pesca seguendo la stessa logica. Controlla che il punto trasparente mantenga il colore del proprio livello, come indicato nella scheda originale.

Sposta il centro invece di aggiungere nuovi colori

Se la macchia intensa si trova proprio al centro e sembra troppo netta, spostala verso il bordo della figura. Il post ammette il centro leggermente fuori dal riquadro. All'interno rimane così una parte più morbida della zona colorata.

Modifica un parametro alla volta. Prima la posizione del centro, poi l'estensione del passaggio e infine, se necessario, l'opacità. Spostare tutti e tre i livelli insieme rende difficile capire la causa del risultato.

Se l'ultimo livello copre completamente gli altri, controlla il suo bordo trasparente e le dimensioni dell'area colorata. Aggiungere un quarto colore non correggerà un riempimento già diventato quasi uniforme.

Prova un altro abbinamento

Secondo esempio dal post: puoi costruire un'altra palette seguendo la stessa logica di livelli radiali separati.
Secondo esempio dal post: puoi costruire un'altra palette seguendo la stessa logica di livelli radiali separati.

Ripeti la procedura sul secondo esempio usando i valori della sua scheda. Confronta la posizione delle macchie di colore, non soltanto la tonalità generale. Due sfumature possono avere colori simili ma una distribuzione della luce completamente diversa.

Tutti e otto gli esempi sono disponibili nella raccolta gratuita di sfumature delicate. Qui non serve un prompt testuale: la risorsa mostra le azioni direttamente nell'editor grafico.

Usa la sfumatura sotto il testo

Inserisci una breve didascalia sul riquadro e controllala in ogni zona colorata. Il contrasto va valutato dove il testo si trova davvero. Una buona lettura sulla zona lilla non garantisce lo stesso risultato su quella menta più chiara.

Se lo sfondo disturba, allontana il centro del colore dalla didascalia oppure attenua quello specifico livello. Non serve scurire tutto il riquadro. Per una card dell'interfaccia salva una versione con testo e una senza per vedere come funziona lo sfondo nella composizione.

Il risultato dell'esercizio è un riquadro modificabile dalla struttura chiara. Puoi adattarlo al colore del progetto senza cercare una nuova immagine: la struttura dei livelli resta, cambiano i valori e la posizione delle aree colorate.

Pacchetto di design 2026

Risorse per i tuoi prossimi progetti

Il Pack per designer contiene sfondi, texture e altre risorse per comporre i progetti. Puoi aprire separatamente la raccolta gratuita di sfumature e riprodurre prima una delle sue versioni.