Gradienter i Figma: tips för jämnare resultat

För att göra en gradient i Figma markerar du ett lager, klickar på fyllningsrutan och byter fyllningstyp från Solid till Linear, Radial, Angular eller Diamond. Handtag dyker upp på arbetsytan: dra i dem för att bestämma blandningens riktning och räckvidd, och klicka på gradientfältet i väljaren för att lägga till färgstopp. Det tar några sekunder. Att få den jämn, rik och identisk när den väl hamnar i kod kräver några vanor till, och det är vad den här guiden handlar om.

De fyra gradienttyperna i Figma

Linear passar de flesta bakgrunder och knappar. Radial passar glöd och strålkastarljus. Angular ritar färghjul, mätare och metallglans. Diamond behövs sällan; den ger en fasetterad, fyrvägs glöd som ser särpräglad ut i illustration men måste bli en bitmapp på webben. Hur varje typ beter sig i design i allmänhet får du veta i typerna av gradienter.

Så använder du gradientredigeraren

1. 1

   Ställ in riktningen med handtagen

   Ett handtag markerar var den första färgen sitter, det andra var den sista gör det. Dra slutandtaget förbi ramens kant för en mjukare blandning, eller dra in det för en kortare, brantare.

2. 2

   Lägg till stopp på fältet

   Klicka var som helst på gradientfältet i färgväljaren för att lägga till ett stopp och ge det en färg. Markera ett stopp och tryck på Delete för att ta bort det.

3. 3

   Använd stoppets opacitet för toningar

   Varje stopp har sin egen opacitet. Genom att tona en färg till 0 % opacitet kan en gradient läggas över ett foto eller en annan fyllning.

4. 4

   Stapla fyllningar

   Ett lager kan ha flera fyllningar. Lägg till en andra gradient ovanpå den första, med genomskinliga områden, för att lägga en glöd över en grundblandning.

5. 5

   Spara den som en stil

   Spara den färdiga fyllningen som en färgstil så att hela teamet använder samma gradient. Figma-variabler rymmer inte gradienter, men stilar gör det.

Åtgärda grå mitt och grumliga blandningar

Figma blandar färgstopp direkt, ungefär som CSS gör som standard, och har inget alternativ för att blanda i ett perceptuellt färgrum. En lång blandning mellan avlägsna nyanser, till exempel blått till orange eller blått till gult, sjunker ihop till grått i mitten. Lösningen är ett mellanstopp: välj den färg du vill att mittpunkten ska ha, oftast en ljusare nyans däremellan, och lägg till den för hand. Grumliga gradienter förklarar färgteorin.

Mesh-liknande gradienter i Figma

Figma har inget verktyg för meshgradienter, men en övertygande version går snabbt att bygga. Rita fyra eller fem ellipser i dina färger, överlappande, inuti en ram med mörk eller ljus bakgrund. Gruppera dem, lägg på en stor Layer blur på gruppen och klipp ramens innehåll. Flytta runt ellipserna för att balansera om färgen. Det är samma idé som den lagerbaserade tekniken i CSS-meshgradienter, och meshgradienter tar upp designsidan.

Lägg till brus för att dölja bandning

Jämna gradienter som exporteras som 8-bitars PNG eller JPEG kan visa synliga steg, särskilt i mörka, långsamma toningar. Ett lätt brusskikt bryter upp de stegen. Nyare versioner av Figma har brus- och texturalternativ i panelen Effects; annars lägger du en kakelbar brusbild ovanpå gradienten med ett blandningsläge som Overlay eller Soft light på låg opacitet. Gradientbandning förklarar varför det fungerar, och brusiga gradienter varför det också ser bättre ut.

Exportera och matcha Figma-gradienter i CSS

I Dev Mode eller panelen Inspect visar Figma CSS för gradientfyllningar. Se det som en utgångspunkt och kontrollera tre saker. Först vinkeln: handtagen du drog på en icke-kvadratisk ram kan översättas till en vinkel du inte hade valt, så avrunda den till ett rent värde. Sedan färgprofilen: om din fil använder Display P3 kan samma hexvärden se annorlunda ut i en sRGB-webbläsare. Och sist staplade fyllningar: de blir kommaseparerade gradienter, med översta Figma-fyllningen först i listan.

/* 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);
}

För bilder exporterar du i 2x för skarpa resultat på skärmar med hög täthet, och föredrar PNG för gradienter med genomskinlighet. För gradienter som måste förbli vektor skriver SVG-exporten linjära och radiella fyllningar som SVG-gradienter; i SVG-gradienter ser du vad du får. Diamantfyllningar, suddiga mesher och brus kommer alltid ut som pixlar.

Om du bygger många gradientbakgrunder till inlägg i sociala medier, presentationer och banners sparar ett verktyg som renderar samma material i varje storlek dig från att exportera om. I Gradiently renderas ett Mark live i varje format i stället för att beskäras från en export.