Figma-gradienter: tips til glattere resultater

Lav Figma-gradienter ved at vælge et lag, klikke på dets farveprøve og ændre fyldtypen fra Ensfarvet til Lineær, Radial, Konisk eller Diamant. Håndtag vises på lærredet: træk dem for at indstille blandingens retning og rækkevidde, og klik på gradientbjælken i farvevælgeren for at tilføje farvestop. Det tager sekunder. At få resultatet glat, fyldigt og identisk i kode kræver nogle flere vaner, som denne guide handler om.

De fire gradienttyper i Figma

Lineær passer til de fleste baggrunde og knapper. Radial passer til glød og spotlys. Konisk tegner farvehjul, urskiver og metallisk glans. Diamant er sjældent nødvendig. Den giver en facetteret glød i fire retninger, som er særpræget i illustrationer, men skal blive til et bitmapbillede på nettet. Se typer af gradienter for, hvordan hver type fungerer i design generelt.

Arbejd i gradienteditoren

1. 1

   Indstil retningen med håndtagene

   Det ene håndtag angiver den første farves placering, det andet den sidstes. Træk sluthåndtaget ud over rammens kant for en blidere blanding, eller træk det ind for en kortere og stejlere.

2. 2

   Tilføj stop på bjælken

   Klik hvor som helst på gradientbjælken i farvevælgeren for at tilføje et stop, og giv det en farve. Vælg et stop, og tryk Delete for at fjerne det.

3. 3

   Brug stoppenes opacitet til udtoning

   Hvert stop har sin egen opacitet. Toner du en farve ud til 0% opacitet, kan gradienten ligge over et foto eller et andet fyld.

4. 4

   Læg fyld oven på hinanden

   Ét lag kan rumme flere fyld. Tilføj en anden gradient med gennemsigtige områder over den første for at lægge glød over grundblandingen.

5. 5

   Gem som en stil

   Gem det færdige fyld som en farvestil, så hele teamet bruger samme gradient. Figma-variabler kan ikke rumme gradienter, men det kan stile.

Ret grå midter og mudrede blandinger

Figma blander farvestop direkte, omtrent som CSS gør som standard, og har ingen mulighed for at blande i et perceptuelt farverum. En lang overgang mellem fjerne kulører, som blå til orange eller blå til gul, bliver grå i midten. Løsningen er et midterstop: vælg den farve, du ønsker i midten, typisk en klarere mellemkulør, og tilføj den manuelt. Mudrede gradienter forklarer farveteorien.

Meshlignende gradienter i Figma

Figma har ikke et værktøj til mesh-gradienter, men en overbevisende version er hurtig at bygge. Tegn fire eller fem overlappende ellipser i dine farver i en ramme med mørk eller lys baggrund. Gruppér dem, tilføj kraftig lagsløring til gruppen, og beskær rammens indhold. Flyt ellipserne for at justere farvebalancen. Det er samme idé som lagteknikken i CSS-mesh-gradienter, og mesh-gradienter gennemgår designsiden.

Tilføj korn for at skjule farvebånd

Glatte gradienter eksporteret som 8-bit PNG eller JPEG kan vise synlige trin, især i mørke, langsomme overgange. Et let støjlag bryder trinene op. Nyere Figma-versioner har muligheder for støj og tekstur i panelet Effekter. Ellers kan du lægge et gentaget støjbillede over gradienten med en blandingstilstand som Overlejring eller Blødt lys ved lav opacitet. Farvebånd i gradienter forklarer, hvorfor det virker, og kornede gradienter, hvorfor det også ser bedre ud.

Eksportér Figma-gradienter og match dem i CSS

I udviklertilstand eller inspektionspanelet viser Figma CSS til gradientfyld. Brug den som udgangspunkt, og tjek tre ting. Først vinklen: håndtagene på en ikke-kvadratisk ramme kan blive til en vinkel, du ikke selv ville have valgt, så afrund den til en enkel værdi. Dernæst farveprofilen: bruger filen Display P3, kan samme hex-værdier se anderledes ud i en sRGB-browser. Til sidst lagdelte fyld: de bliver til kommaseparerede gradienter med det øverste Figma-fyld 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);
}

Eksportér billeder ved 2x for skarpe resultater på skærme med høj pixeltæthed, og vælg helst PNG til gradienter med gennemsigtighed. Gradienter, der skal forblive vektorer, eksporteres som SVG, hvor lineære og radiale fyld bliver SVG-gradienter. Se SVG-gradienter for at forstå resultatet. Diamantfyld, slørede meshes og støj bliver altid til pixels.

Laver du mange gradientbaggrunde til opslag, præsentationer og bannere, sparer et værktøj, der renderer samme materiale i alle størrelser, dig for at eksportere igen. I Gradiently renderes en Mark live i hvert format frem for at blive beskåret fra én eksport.