Figma-gradienter: tips for jevnere resultater

For å lage en Figma-gradient velger du et lag, klikker på fargeprøven for fyllet og endrer fylltypen fra ensfarget til lineær, radiell, konisk eller diamantformet. Håndtak vises på lerretet: dra dem for å styre retning og rekkevidde, og klikk på gradientlinjen i fargevelgeren for å legge til fargestopp. Det tar sekunder. Å få den til å se jevn, fyldig og identisk ut når den blir kode, krever noen flere vaner. Det handler denne guiden om.

De fire gradienttypene i Figma

Lineært fyll passer de fleste bakgrunner og knapper. Radielt passer glød og spotlys. Konisk tegner fargehjul, urskiver og metallisk glans. Diamant trengs sjelden; det gir en fasettert glød i fire retninger som virker særegen i illustrasjoner, men må bli et punktgrafikkbilde på nett. For hvordan hver type oppfører seg i design generelt, se gradienttyper.

Bruk gradienteditoren

1. 1

   Sett retningen med håndtakene

   Ett håndtak markerer hvor første farge ligger, det andre hvor siste ligger. Dra endehåndtaket forbi rammekanten for en mykere blanding, eller trekk det inn for en kortere, brattere overgang.

2. 2

   Legg til stopp på linjen

   Klikk hvor som helst på gradientlinjen i fargevelgeren for å legge til et stopp, og gi det en farge. Velg et stopp og trykk Delete for å fjerne det.

3. 3

   Bruk ugjennomsiktighet til uttoning

   Hvert stopp har sin egen ugjennomsiktighet. Ved å tone en farge til 0% kan gradienten ligge over et foto eller et annet fyll.

4. 4

   Stable fyll

   Ett lag kan ha flere fyll. Legg en ny gradient med gjennomsiktige områder over den første for å legge glød over grunnblandingen.

5. 5

   Lagre som stil

   Lagre det ferdige fyllet som en fargestil, så hele teamet bruker samme gradient. Figma-variabler kan ikke inneholde gradienter, men stiler kan.

Fiks grå midtpartier og grumsete blandinger

Figma blander fargestopp direkte, omtrent slik CSS gjør som standard, og har ikke noe valg for å blande i et perseptuelt fargerom. En lang overgang mellom fjerne fargetoner, som blått til oransje eller blått til gult, blir grå i midten. Løsningen er et midtstopp: velg fargen du vil ha i midtpunktet, vanligvis en klarere mellomtone, og legg den til for hånd. Grumsete gradienter forklarer fargeteorien.

Mesh-lignende gradienter i Figma

Figma har ikke et mesh-gradientverktøy, men en overbevisende versjon er rask å lage. Tegn fire eller fem overlappende ellipser i fargene dine inne i en ramme med mørk eller lys bakgrunn. Grupper dem, legg til kraftig laguskarphet på gruppen og klipp innholdet til rammen. Flytt ellipsene for å balansere fargene. Dette er samme idé som lagteknikken i mesh-gradienter i CSS, og mesh-gradienter dekker designsiden.

Legg til korn for å skjule fargebånd

Jevne gradienter eksportert som 8-bits PNG eller JPEG kan vise tydelige trinn, særlig i mørke, langsomme overganger. Et lett støylag bryter opp trinnene. Nyere versjoner av Figma har valg for støy og tekstur i effektpanelet; ellers kan du legge et gjentakende støybilde over gradienten med en blandingsmodus som Overlegg eller Mykt lys ved lav ugjennomsiktighet. Fargebånd i gradienter forklarer hvorfor det virker, og kornete gradienter hvorfor det også ser bedre ut.

Eksporter og gjenskap Figma-gradienter i CSS

I utviklermodus eller inspeksjonspanelet viser Figma CSS for gradientfyll. Bruk den som utgangspunkt og sjekk tre ting. Først vinkelen: håndtakene du dro på en ikke-kvadratisk ramme, kan gi en vinkel du ikke ville valgt, så rund den til en ryddig verdi. Deretter fargeprofilen: bruker filen Display P3, kan samme heksadesimale verdier se ulike ut i en sRGB-nettleser. Til slutt stablede fyll: de blir kommaseparerte gradienter, med det øverste Figma-fyllet først.

/* Figma: linear fill, #0f172a to #4338ca to #a5b4fc, top left to bottom right */
.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #a5b4fc 100%);
}

/* Figma: angular fill */
.dial {
  background-image: conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9);
}

For bilder eksporterer du i 2x for skarpe resultater på skjermer med høy pikseltetthet, og velger helst PNG for gradienter med gjennomsiktighet. For gradienter som må forbli vektor, skriver SVG-eksport lineære og radielle fyll som SVG-gradienter; se SVG-gradienter for å forstå resultatet. Diamantfyll, uskarpe mesh-blandinger og støy blir alltid piksler.

Lager du mange gradientbakgrunner til sosiale innlegg, presentasjoner og bannere, sparer et verktøy som gjengir samme materiale i alle størrelser deg for ny eksport. I Gradiently gjengis en Mark direkte i hvert format fremfor å beskjæres fra én eksport.