Kako stvoriti gradijent u Figmi

Kada se ne možete odlučiti za jednu boju, preljevi su izvrsna opcija. U Figmi možete izraditi razne gradijentne pozadine, staviti gradijent na oblik i tekst, stvoriti potezne gradijente i još mnogo toga. Možete čak stvoriti mrežne gradijente s efektom zamućenja ili pomoću dodatka Figma zajednice mrežnog gradijenta.

Budući da Figma ima toliko različitih načina za stvaranje gradijenta, novi korisnici bi mogli imati poteškoća da ih sve shvate od početka. Naravno, eksperimentiranje je dio procesa učenja, ali puno je lakše imati sve upute na jednom mjestu. A ovaj članak pruža upravo to.

Kako stvoriti različite stilove gradijenta u Figmi

Figma nudi različite stilove gradijenta koje možete koristiti za ispunjavanje pozadina ili objekata na platnu s više boja.

• Linearni:  Linearni gradijenti imaju dvije boje koje se stapaju u ravnu liniju.
• Radijalno:  s radijalnim gradijentima, prva boja počinje od jedne točke i stapa se s drugom u svim smjerovima.
• Kutni:  u kutnim gradijentima možete odrediti smjer u kojem se gradijent kreće dodavanjem kutova. To je izvrsna opcija za stvaranje 3D slika.
• Dijamant:  Kao što naziv sugerira, dijamantni gradijenti počinju od jedne točke i šire se u obliku dijamanta.

Koraci za izradu bilo kojeg od ovih stilova gradijenta su isti. Jedina je razlika u stilu koji odaberete. Evo kako stvoriti gradijent dizajn u Figmi:

1. Otvorite praznu Figma datoteku.
   
2. Dodirnite "Alat za pravokutnik" na lijevoj alatnoj traci.
   
3. Pomoću alata nacrtajte pravokutnik na platnu koji ćete koristiti kao referencu gradijenta.
   
4. Odaberite stvoreni pravokutnik.
   
5. Kliknite na trenutnu boju pod "Fill" na desnoj ploči da biste otvorili alat za odabir boja.
   
6. Pritisnite padajući izbornik i promijenite zadani "Solid" na bilo koji stil gradijenta koji želite. Pojavit će se dva graničnika u boji ili okvira.
   
7. Odaberite svaku boju i odaberite boju koju želite dodati gradijentu.
   
8. Dodirnite četiri točke pored "Ispuni" da biste spremili gradijent kao stil.
   

Nakon toga možete podesiti vrijednost prozirnosti, postaviti graničnike boje na mjesto gdje želite da jedna boja završi i počne druga, dodati još jedan graničnik boje, pomicati ih po platnu ili promijeniti kut gradijenta. Kada završite s podešavanjem, ponovno spremite gradijent (korak 8).

Napomena:  Za brisanje točke boje koju ste dodali, odaberite stanicu i pritisnite “Delete” ili “Backspace” na tipkovnici.

Sada možete primijeniti stil gradijenta na bilo koji objekt koji želite.

Kako stvoriti gradijent mreže u Figmi

Mrežasti gradijenti popularni su među velikim tvrtkama i markama. Ako ste česti korisnik Instagrama, svaki dan vidite logotip aplikacije. Stoga znanje o tome kako ih izraditi može biti korisno u situacijama kada trebate dodati malo interesa svojim projektima.

Kao što je spomenuto, gradijenti mreže mogu se stvoriti pomoću dodatka koji pruža Figma zajednica. Ali postoji jednostavniji način za dodavanje više boja gdje god želite na svom platnu bez potrebe za vanjskim alatima.

Evo kako stvoriti mrežni gradijent u Figmi:

1. Unesite novu Figma datoteku.
   
2. Napravite okvir.
   
3. Označite okvir "Clip content" na desnoj ploči tako da sve što izađe izvan okvira bude izrezano.
   
4. Počnite dodavati razne oblike ili izradite vlastiti objekt s alatom "Pen" unutar okvira.
   
5. Promijenite "ispunu" svakog novog obrasca tako da se razlikuje od ostalih.
   
6. Odaberite sve oblike.
   
7. U odjeljku "Efekti" pritisnite padajući izbornik i odaberite "Zamućenje sloja".
   
8. Otvorite postavke "Layer blur" i povećavajte vrijednost dok više ne budete vidjeli jasne granice između oblika.
   
9. Spremite stil kao gore i upotrijebite ga na drugim objektima.

Drugi način stvaranja gradijenta mreže je korištenje kutnog stila. Daje nešto drugačiji, ali jednako zanimljiv fascinantan rezultat poput prvog tutorijala.

Evo što trebate učiniti:

1. Otvorite prazno platno.
   
2. Upotrijebite oblik koji želite i dodajte ga na platno.
3. U odjeljku "Ispuna" promijenite "Solid" u "Angular".
   
4. Odaberite boje za gradijent.
   
5. Podesite kut i druge aspekte gradijenta.
   
6. Dodajte još jedan oblik, po mogućnosti "Eclipse", tj. krug.
   
7. Stavite ga na vrh drugog oblika na platnu.
   
8. Dodajte linearni gradijent i promijenite boju u onu koja dobro odgovara ostatku.
   
9. U odjeljku "Efekti" upotrijebite efekt "Zamućenje sloja" i zamutite linije novog oblika da biste ga uklopili u prvi.
   

Kako napraviti gradijent slike u Figmi

Osim stvaranja gradijenta, također možete prekriti postojeću sliku s gradijentom kako biste dodali neku dimenziju. Daje joj efekt blijeđenja ili iluziju nevidljivog izvora svjetlosti koji izvana obasjava sliku.

Evo kako dodati gradijent slici u Figmi:

1. Otvorite novu datoteku u Figmi.
   
2. Povucite i ispustite sliku kojoj želite dodati gradijent na platno.
   
3. Dodajte oblik koji odgovara veličini slike na vrhu.
   
4. Odaberite stil gradijenta u odjeljku "Ispuna".
   
5. Odaberite boje gradijenta iz alata za odabir boja.
   
6. Podesite neprozirnost, kut itd.
   

Također možete koristiti alat "Pen" i nacrtati oblik u području gdje želite da bude gradijent.

Kako gradijentirati tekst u Figmi

Stvaranje gradijenta na tekstu u Figmi prilično je slično stvaranju gradijenta za bilo koji drugi oblik. Evo koraka:

1. Otvorite novo platno u Figmi.
   
2. Pritisnite alat "Tekst" na alatnoj traci s lijeve strane.
   
3. Pritisnite bilo gdje na platnu i počnite pisati.
4. Odaberite tekst i prijeđite na "Ispuni".
   
5. Odaberite stil gradijenta.
   
6. Pritisnite svaki okvir s bojom i pronađite boju koju želite dodati gradijentu.
   

FAQ

Koliko boja mogu dodati gradijentu u Figmi?

Možete dodati onoliko boja koliko želite u standardnim i mrežastim stilovima Figma gradijenta. Ali pokušajte ne pretjerati. Budući da gradijenti imaju više prijelaznih boja, više od pet bi moglo biti previše, čak i za mrežasti gradijent.

Mogu li uvesti gradijent u Figmu?

Možete uvesti bilo koji gradijent koji želite u Figmu. Na primjer, možete zalijepiti kod iz CSS-a (Cascading Style Sheets) tako da otvorite ploču "Kôd" i zalijepite kod. Također možete uvesti gradijente iz Adobe Illustrator.

Gdje mogu pronaći besplatne Figma gradijente?

Besplatne i plaćene Figma gradijente možete pronaći u  Figminoj zajednici . Sadrži mnoštvo prekrasnih i jedinstvenih dizajna koje su kreirali korisnici Figme. Možete filtrirati prema dodacima, datotekama i widgetima. Samo upišite "gradient" u traku za pretraživanje na vrhu i pronađite onaj koji vam se sviđa.

Budite zabavni sa šarenim prijelazima

Gradijenti su izvrstan način da dizajn učinite jasnim i personaliziranim. A Figma vam omogućuje glatki prijelaz između bilo koje dvije ili više boja koje odaberete. Ipak, nemojte pretjerivati. Pomiješajte boje koje se dobro slažu i pokušajte ostati unutar iste palete boja.

Jeste li već pokušali napraviti gradijent u Figmi? Recite nam u komentarima ispod koji stil gradijenta ste koristili i za što ste ga koristili.