Hvordan lage en gradient i Figma

Når du ikke kan bestemme deg for én farge, er gradienter et utmerket alternativ. I Figma kan du lage ulike gradientbakgrunner, sette en gradient på en form og tekst, lage strekgradienter og mye mer. Du kan til og med lage mesh-gradienter med uskarphet-effekten eller med en Figma community mesh-gradient-plugin.

Siden Figma har så mange forskjellige måter å lage en gradient på, kan nye brukere slite med å forstå dem alle fra begynnelsen. Selvfølgelig er eksperimentering en del av læringsprosessen, men det er mye enklere å ha alle instruksjonene på ett sted. Og denne artikkelen gir akkurat det.

Hvordan lage forskjellige gradientstiler i Figma

Figma tilbyr ulike gradientstiler som du kan bruke til å fylle ut bakgrunner eller objekter på lerretet med flere farger.

• Lineær:  Lineære gradienter har to farger som blander seg i en rett linje.
• Radial:  Med radielle gradienter starter den første fargen fra et enkelt punkt og blander seg inn i den andre i alle retninger.
• Vinkel:  I vinkelgradienter kan du bestemme retningen som gradienten beveger seg i ved å legge til vinkler. Det er et utmerket alternativ for å lage 3D-bilder.
• Diamant:  Som navnet antyder, starter diamantgradienter fra ett punkt og sprer seg ut i form av en diamant.

Fremgangsmåten for å lage noen av disse gradientstilene er de samme. Den eneste forskjellen er i stilen du velger. Slik lager du et gradientdesign i Figma:

1. Åpne en tom Figma-fil.
   
2. Trykk på "Rektangelverktøy" fra venstre verktøylinje.
   
3. Bruk verktøyet til å tegne et rektangel på lerretet som skal brukes som gradientreferanse.
   
4. Velg det opprettede rektangelet.
   
5. Klikk på gjeldende farge under "Fyll" på høyre panel for å åpne fargevelgeren.
   
6. Trykk på rullegardinmenyen og endre standard "Solid" til hvilken gradientstil du ønsker. To fargestoppere eller bokser vises.
   
7. Velg hvert fargestopp og velg fargen du vil legge til i gradienten.
   
8. Trykk på de fire prikkene ved siden av "Fyll" for å lagre gradienten som en stil.
   

Etter det kan du justere gjennomsiktighetsverdien, plassere fargestoppene der du vil at den ene fargen skal slutte og den andre skal begynne, legge til en annen fargestopp, flytte dem rundt på lerretet eller endre gradientvinkelen. Når du er ferdig med å justere, lagre gradienten igjen (trinn 8).

Merk:  For å slette et fargestopp du har lagt til, velg stoppet og trykk "Slett" eller "Tilbake" på tastaturet.

Nå kan du bruke gradientstilen på hvilket som helst objekt du vil.

Hvordan lage en mesh-gradient i Figma

Mesh-gradienter er populære blant store selskaper og merker. Hvis du er en hyppig Instagram-bruker, ser du den hver dag appens logo. Derfor kan det være nyttig å vite hvordan du lager dem i situasjoner når du trenger å legge litt interesse til prosjektene dine.

Som nevnt kan mesh-gradienter opprettes med en plugin levert av Figma-fellesskapet. Men det er en mer enkel måte å legge til flere farger hvor du vil på lerretet uten behov for eksterne verktøy.

Slik lager du en mesh-gradient i Figma:

1. Skriv inn en ny Figma-fil.
   
2. Lag en ramme.
   
3. Kryss av for "Klippinnhold" i det høyre panelet slik at det som går utenfor rammen blir klippet.
   
4. Begynn å legge til forskjellige former eller lag ditt eget objekt med "Penn"-verktøyet inne i rammen.
   
5. Endre "Fyll" for hvert nytt skjema slik at det skiller seg fra resten.
   
6. Velg alle formene.
   
7. Under "Effekter", trykk på rullegardinmenyen og velg "Layer blur."
   
8. Åpne "Layer blur"-innstillingene og øk verdien til du ikke lenger ser klare grenser mellom figurene.
   
9. Lagre stilen som ovenfor og bruk den på andre objekter.

En annen måte å lage en mesh-gradient på er å bruke vinkelstilen. Det gir et litt annerledes, men like interessant fascinerende resultat som den første opplæringen.

Her er hva du må gjøre:

1. Åpne et tomt lerret.
   
2. Bruk formen du ønsker og legg den til på lerretet.
3. Under «Fyll» endrer du «Solid» til «Angular».
   
4. Velg fargene for gradienten.
   
5. Juster vinkelen og andre aspekter av gradienten.
   
6. Legg til en annen form, fortrinnsvis "Eclipse", dvs. en sirkel.
   
7. Legg den oppå den andre formen på lerretet.
   
8. Legg til en lineær gradient og endre fargen til den som matcher resten godt.
   
9. Under "Effekter", bruk "Layer blur"-effekten og uskarp linjene i den nye formen for å blande den inn i den første.
   

Hvordan gradient et bilde i Figma

Bortsett fra å lage en gradient, kan du også overlegge et eksisterende bilde med en gradient for å legge til en dimensjon. Det gir den en "fade"-effekt eller en illusjon av en usynlig lyskilde som skinner på bildet fra utsiden.

Slik legger du til en gradient til et bilde i Figma:

1. Åpne en ny fil i Figma.
   
2. Dra og slipp bildet du vil legge til gradienten på på lerretet.
   
3. Legg til en form som passer til størrelsen på bildet på toppen.
   
4. Velg en gradientstil under "Fyll"-delen.
   
5. Velg fargene på gradienten fra fargevelgeren.
   
6. Juster opasitet, vinkel osv.
   

Du kan også bruke "Penn"-verktøyet og tegne en form i området der du vil at gradienten skal være.

Slik gradienterer du en tekst i Figma

Å lage en gradient på en tekst i Figma er ganske lik hvordan du lager en gradient for en hvilken som helst annen form. Her er trinnene:

1. Åpne et nytt lerret i Figma.
   
2. Trykk på "Tekst"-verktøyet fra verktøylinjen til venstre.
   
3. Klikk hvor som helst på lerretet og begynn å skrive.
4. Velg teksten og gå over til "Fyll".
   
5. Velg gradientstilen.
   
6. Trykk på hver fargeboks og finn fargen du vil legge til i gradienten.
   

Vanlige spørsmål

Hvor mange farger kan jeg legge til en gradient i Figma?

Du kan legge til så mange farger du vil i både standard og mesh Figma gradientstiler. Men prøv å ikke gå over bord. Siden gradienter har flere overgangsfarger, kan mer enn fem være for mye, selv for en mesh-gradient.

Kan jeg importere en gradient til Figma?

Du kan importere hvilken som helst gradient du vil til Figma. Du kan for eksempel lime inn kode fra CSS (Cascading Style Sheets) ved å åpne "Kode"-panelet og lime inn koden. Du kan også importere gradienter fra Adobe Illustrator.

Hvor kan jeg finne gratis Figma-gradienter?

Du kan finne gratis og betalte Figma-gradienter i  Figma-fellesskapet . Den har en mengde lekre og unike design laget av Figma-brukere. Du kan filtrere etter plugins, filer og widgets. Bare skriv "gradient" i søkefeltet øverst og finn den du liker.

Bli funky med fargerike gradienter

Gradienter er en utmerket måte å gjøre et design distinkt og personlig. Og Figma lar deg gjøre en jevn overgang mellom to eller flere farger du velger. Men ikke overdriv. Bland farger som passer godt sammen og prøv å holde deg innenfor samme fargepalett.

Har du allerede prøvd å lage en gradient i Figma? Fortell oss i kommentarene nedenfor hvilken gradientstil du brukte og hva du brukte den til.