Come creare un gradiente in Figma

Quando non puoi decidere un colore, le sfumature sono un’opzione eccellente. In Figma puoi creare vari sfondi sfumati, inserire una sfumatura su una forma e un testo, creare sfumature di tratto e molto altro. Puoi anche creare gradienti mesh con l’effetto sfocatura o con un plug-in per gradienti mesh della community Figma.

Poiché Figma ha così tanti modi diversi per creare un gradiente, i nuovi utenti potrebbero avere difficoltà a coglierli tutti dall’inizio. Naturalmente, sperimentare fa parte del processo di apprendimento, ma è molto più semplice avere tutte le istruzioni in un unico posto. E questo articolo fornisce esattamente questo.

Come creare diversi stili di gradiente in Figma

Figma offre vari stili di gradiente che puoi utilizzare per riempire sfondi o oggetti sulla tela con più colori.

• Lineare: i gradienti lineari hanno due colori che si fondono insieme in una linea retta.
• Radiale: con i gradienti radiali, il primo colore inizia da un singolo punto e si fonde con l’altro in tutte le direzioni.
• Angolare: nei gradienti angolari è possibile determinare la direzione in cui si sposta il gradiente aggiungendo angoli. È un’opzione eccellente per creare immagini 3D.
• Diamante: come suggerisce il nome, i gradienti del diamante iniziano da un punto e si estendono a forma di diamante.

I passaggi per creare uno qualsiasi di questi stili di sfumatura sono gli stessi. L’unica differenza è nello stile selezionato. Ecco come creare un disegno sfumato in Figma:

1. Apri un file Figma vuoto.

   

2. Tocca lo “Strumento Rettangolo” dalla barra degli strumenti di sinistra.

   

3. Utilizzando lo strumento, disegna un rettangolo sulla tela da utilizzare come riferimento del gradiente.

   

4. Seleziona il rettangolo creato.

   

5. Fare clic sul colore corrente sotto “Riempimento” nel pannello di destra per aprire il selettore colori.

   

6. Premi il menu a discesa e modifica il “Solido” predefinito in qualsiasi stile di sfumatura desideri. Appariranno due interruzioni o riquadri di colore.

   

7. Seleziona ciascuna interruzione di colore e scegli il colore che desideri aggiungere al gradiente.

   

8. Tocca i quattro punti accanto a “Riempi” per salvare la sfumatura come stile.

   

Successivamente, puoi regolare il valore di trasparenza, posizionare le interruzioni di colore dove vuoi che un colore finisca e il secondo inizi, aggiungi un’altra interruzione di colore, spostale sulla tela o modifica l’angolo del gradiente. Una volta terminata la regolazione, salva nuovamente la sfumatura (passaggio 8).

Nota: per eliminare un’interruzione di colore che hai aggiunto, seleziona l’interruzione e premi “Elimina” o “Backspace” sulla tastiera.

Ora puoi applicare lo stile sfumato a qualsiasi oggetto desideri.

Come creare un gradiente mesh in Figma

I gradienti mesh sono popolari tra le grandi aziende e i marchi. Se sei un utente abituale di Instagram, vedrai ogni giorno il logo dell’app. Pertanto, sapere come crearli può essere utile in situazioni in cui è necessario aggiungere un po’ di interesse ai tuoi progetti.

Come accennato, i gradienti mesh possono essere creati con un plugin fornito dalla comunità Figma. Ma esiste un modo più semplice per aggiungere più colori dove vuoi sulla tela senza la necessità di strumenti esterni.

Ecco come creare un gradiente mesh in Figma:

1. Inserisci un nuovo file Figma.

   

2. Crea una cornice.

   

3. Seleziona la casella “Contenuto clip” nel pannello di destra in modo che tutto ciò che esce dall’inquadratura venga ritagliato.

   

4. Inizia ad aggiungere varie forme o crea il tuo oggetto con lo strumento “Penna” all’interno della cornice.

   

5. Modifica il “Riempimento” di ogni nuovo modulo in modo che differisca dal resto.

   

6. Seleziona tutte le forme.

   

7. Nella sezione “Effetti”, premi il menu a discesa e seleziona “Sfocatura livello”.

   

8. Apri le impostazioni “Sfocatura livello” e aumenta il valore finché non vedi più confini chiari tra le forme.

   

9. Salva lo stile come sopra e usalo su altri oggetti.

Un altro modo per creare un gradiente mesh è utilizzare lo stile angolare. Fornisce un risultato affascinante leggermente diverso ma ugualmente interessante come il primo tutorial.

Ecco cosa devi fare:

1. Apri una tela bianca.

   

2. Usa la forma che desideri e aggiungila alla tela.
3. In “Riempimento”, cambia “Solido” in “Angolare”.

   

4. Scegli i colori per il gradiente.

   

5. Regola l’angolo e altri aspetti del gradiente.

   

6. Aggiungi un’altra forma, preferibilmente “Eclipse”, ovvero un cerchio.

   

7. Mettilo sopra l’altra forma sulla tela.

   

8. Aggiungi un gradiente lineare e cambia il colore con quello che si abbina bene al resto.

   

9. In “Effetti”, utilizza l’effetto “Sfocatura livello” e sfoca le linee della nuova forma per fonderla con la prima.

   

Come sfumare un’immagine in Figma

Oltre a creare una sfumatura, puoi anche sovrapporre un’immagine esistente con una sfumatura per aggiungere una certa dimensione. Dà un effetto “dissolvenza” o l’illusione di una fonte di luce invisibile che brilla sull’immagine dall’esterno.

Ecco come aggiungere un gradiente a un’immagine in Figma:

1. Apri un nuovo file in Figma.

   

2. Trascina e rilascia l’immagine a cui desideri aggiungere il gradiente sulla tela.

   

3. Aggiungi una forma che corrisponda alle dimensioni dell’immagine in alto.

   

4. Seleziona uno stile di sfumatura nella sezione “Riempimento”.

   

5. Scegli i colori del gradiente dal selettore colori.

   

6. Regola l’opacità, l’angolo, ecc.

   

Puoi anche utilizzare lo strumento “Penna” e disegnare una forma nell’area in cui desideri che si trovi il gradiente.

Come sfumare un testo in Figma

Creare una sfumatura su un testo in Figma è molto simile a come crei una sfumatura per qualsiasi altra forma. Ecco i passaggi:

1. Apri una nuova tela in Figma.

   

2. Premi lo strumento “Testo” dalla barra degli strumenti a sinistra.

   

3. Fai clic in un punto qualsiasi dell’area di disegno e inizia a scrivere.
4. Seleziona il testo e vai su “Riempi”.

   

5. Scegli lo stile del gradiente.

   

6. Premi ciascuna casella di colore e trova il colore che desideri aggiungere al gradiente.

   

Domande frequenti

Quanti colori posso aggiungere a un gradiente in Figma?

Puoi aggiungere tutti i colori che desideri negli stili di gradiente Figma standard e mesh. Ma cerca di non esagerare. Poiché i gradienti hanno più colori di transizione, più di cinque potrebbero essere troppi, anche per un gradiente mesh.

Posso importare un gradiente in Figma?

Puoi importare qualsiasi gradiente desideri in Figma. Ad esempio, puoi incollare il codice da CSS (Cascading Style Sheets) aprendo il pannello “Codice” e incollando il codice. Puoi anche importare sfumature da Adobe Illustrator.

Dove posso trovare gradienti Figma gratuiti?

Puoi trovare gradienti Figma gratuiti e a pagamento nella comunità Figma . Presenta una miriade di design meravigliosi e unici creati dagli utenti Figma. Puoi filtrare per plugin, file e widget. Basta digitare “gradiente” nella barra di ricerca in alto e trovare quello che ti piace.

Diventa funky con sfumature colorate

Le sfumature sono un ottimo modo per rendere un design distinto e personalizzato. E Figma ti consente di effettuare una transizione graduale tra due o più colori che scegli. Tuttavia, non esagerare. Mescola i colori che stanno bene insieme e cerca di rimanere all’interno della stessa tavolozza di colori.

Hai già provato a creare un gradiente in Figma? Raccontaci nei commenti qui sotto quale stile di gradiente hai utilizzato e per cosa lo hai utilizzato.