Sådan opretter du en gradient i Figma

Når du ikke kan bestemme dig for én farve, er gradienter en glimrende mulighed. I Figma kan du lave forskellige gradientbaggrunde, sætte en gradient på en form og tekst, oprette streggradienter og meget mere. Du kan endda oprette mesh-gradienter med sløringseffekten eller med et Figma community mesh-gradient-plugin.

Da Figma har så mange forskellige måder at skabe en gradient på, kan nye brugere måske kæmpe for at forstå dem alle fra begyndelsen. Selvfølgelig er eksperimentering en del af læringsprocessen, men det er meget nemmere at have alle instruktionerne på ét sted. Og denne artikel giver præcis det.

Sådan opretter du forskellige gradientstile i Figma

Figma tilbyder forskellige gradientstile, som du kan bruge til at udfylde baggrunde eller objekter på lærredet med flere farver.

• Lineær:  Lineære gradienter har to farver, der blander sig i en lige linje.
• Radial:  Med radiale gradienter starter den første farve fra et enkelt punkt og blander sig i det andet i alle retninger.
• Vinkel:  I vinkelgradienter kan du bestemme retningen, som gradienten bevæger sig i, ved at tilføje vinkler. Det er en fremragende mulighed for at skabe 3D-billeder.
• Diamant:  Som navnet antyder, starter diamantgradienter fra et punkt og spredes ud i form af en diamant.

Trinnene til at lave nogen af ​​disse gradientstile er de samme. Den eneste forskel er i den stil, du vælger. Sådan opretter du et gradientdesign i Figma:

1. Åbn en tom Figma-fil.
   
2. Tryk på "Rektangelværktøj" fra venstre værktøjslinje.
   
3. Brug værktøjet til at tegne et rektangel på lærredet for at bruge som gradientreference.
   
4. Vælg det oprettede rektangel.
   
5. Klik på den aktuelle farve under "Fyld" i højre panel for at åbne farvevælgeren.
   
6. Tryk på rullemenuen og skift standard "Solid" til den gradientstil, du ønsker. Der vises to farvestop eller kasser.
   
7. Vælg hvert farvestop, og vælg den farve, du vil tilføje til gradienten.
   
8. Tryk på de fire prikker ved siden af ​​"Fyld" for at gemme gradienten som en stil.
   

Derefter kan du justere gennemsigtighedsværdien, placere farvestoppene, hvor du vil have en farve til at slutte og den anden til at begynde, tilføje endnu et farvestop, flytte dem rundt på lærredet eller ændre gradientvinklen. Når du er færdig med at justere, skal du gemme gradienten igen (trin 8).

Bemærk:  For at slette et farvestop, du har tilføjet, skal du vælge stoppet og trykke på "Slet" eller "Tilbage" på dit tastatur.

Nu kan du anvende gradientstilen til ethvert objekt, du ønsker.

Sådan opretter du en mesh-gradient i Figma

Mesh-gradienter er populære blandt store virksomheder og mærker. Hvis du er en hyppig Instagram-bruger, ser du det hver dag appens logo. Det kan således være nyttigt at vide, hvordan man opretter dem i situationer, hvor du har brug for at tilføje interesse til dine projekter.

Som nævnt kan mesh-gradienter oprettes med et plugin fra Figma-fællesskabet. Men der er en mere ligetil måde at tilføje flere farver, hvor du vil på dit lærred uden behov for eksterne værktøjer.

Sådan opretter du en mesh-gradient i Figma:

1. Indtast en ny Figma-fil.
   
2. Lav en ramme.
   
3. Sæt flueben i feltet "Klip indhold" i højre panel, så det, der går uden for rammen, bliver klippet.
   
4. Begynd at tilføje forskellige former eller skab dit eget objekt med "Pen"-værktøjet inde i rammen.
   
5. Skift "Fyld" for hver ny formular, så den adskiller sig fra resten.
   
6. Vælg alle figurerne.
   
7. Under "Effekter" skal du trykke på rullemenuen og vælge "Layer sløring".
   
8. Åbn indstillingerne for "Layer blur" og øg værdien, indtil du ikke længere ser klare grænser mellem formerne.
   
9. Gem stilen som ovenfor, og brug den på andre objekter.

En anden måde at skabe en mesh-gradient på er ved at bruge den kantede stil. Det giver et lidt anderledes, men lige så interessant fascinerende resultat som den første tutorial.

Her er hvad du skal gøre:

1. Åbn et tomt lærred.
   
2. Brug den form, du ønsker, og tilføj den til lærredet.
3. Under "Fyld" skal du ændre "Solid" til "Angular".
   
4. Vælg farverne til gradienten.
   
5. Juster vinklen og andre aspekter af gradienten.
   
6. Tilføj en anden form, helst "Eclipse", dvs. en cirkel.
   
7. Læg den oven på den anden form på lærredet.
   
8. Tilføj en lineær gradient og skift farven til den, der passer godt til resten.
   
9. Under "Effekter" skal du bruge "Layer blur"-effekten og sløre linjerne i den nye form for at blande den ind i den første.
   

Sådan gradienterer du et billede i Figma

Udover at oprette en gradient, kan du også overlejre et eksisterende billede med en gradient for at tilføje en dimension. Det giver det en "fade"-effekt eller en illusion af en usynlig lyskilde, der skinner på billedet udefra.

Sådan tilføjer du en gradient til et billede i Figma:

1. Åbn en ny fil i Figma.
   
2. Træk og slip det billede, du vil tilføje gradienten til, på lærredet.
   
3. Tilføj en form, der passer til størrelsen af ​​billedet på toppen.
   
4. Vælg en gradueringsstil under afsnittet "Fyld".
   
5. Vælg farverne på gradienten fra farvevælgeren.
   
6. Juster opaciteten, vinklen osv.
   

Du kan også bruge "Pen"-værktøjet og tegne en form i det område, hvor du vil have gradienten.

Sådan graduerer du en tekst i Figma

Oprettelse af en gradient på en tekst i Figma ligner ret meget, hvordan du opretter en gradient til enhver anden form. Her er trinene:

1. Åbn et nyt lærred i Figma.
   
2. Tryk på "Tekst"-værktøjet fra værktøjslinjen til venstre.
   
3. Klik hvor som helst på lærredet, og begynd at skrive.
4. Vælg teksten og gå over til "Fyld".
   
5. Vælg gradientstilen.
   
6. Tryk på hver farveboks, og find den farve, du vil tilføje til gradienten.
   

Ofte stillede spørgsmål

Hvor mange farver kan jeg tilføje til en gradient i Figma?

Du kan tilføje så mange farver, som du vil, i både standard og mesh Figma gradient stilarter. Men prøv ikke at gå overbord. Da gradienter har flere overgangsfarver, kan mere end fem være for meget, selv for en mesh-gradient.

Kan jeg importere en gradient til Figma?

Du kan importere enhver gradient, du ønsker, til Figma. For eksempel kan du indsætte kode fra CSS (Cascading Style Sheets) ved at åbne "Kode"-panelet og indsætte koden. Du kan også importere forløb fra Adobe Illustrator.

Hvor kan jeg finde gratis Figma-gradienter?

Du kan finde gratis og betalte Figma-gradienter i  Figma-fællesskabet . Den har et væld af smukke og unikke designs skabt af Figma-brugere. Du kan filtrere efter plugins, filer og widgets. Bare skriv "gradient" i søgefeltet øverst og find den, du kan lide.

Bliv funky med farverige gradienter

Gradienter er en fremragende måde at gøre et design distinkt og personligt. Og Figma giver dig mulighed for at lave en jævn overgang mellem to eller flere farver, du vælger. Overdriv det dog ikke. Bland farver, der passer godt sammen, og prøv at forblive inden for den samme farvepalet.

Har du allerede prøvet at lave en gradient i Figma? Fortæl os i kommentarerne nedenfor, hvilken gradientstil du brugte, og hvad du brugte den til.