Gör ett 2 × 2-prov innan du publicerar en genererad shader. Duplicera designen. Lägg samma shader effect på en bildfylld frame och en sluten vektorform, båda i 320 × 180 och 1280 × 720 pixlar. Kontrollera först viloläget, sedan en hel uppspelningsloop och sist musresponsen. Kör fallen ett i taget och spara fyra ja-eller-nej-rader. Dela först när alla fyra klarar exakt samma kriterier.
Det här ändrades den 1 september 2026
I Figmas release notes står att generativa shaders nu kan få animation och interaktion. Du kan be Figma agent bygga en egen shader fill eller shader effect som innehåller rörelse och reagerar på musrörelser. Samma notis lägger till publicering till Figma Community, privat delning till en organisation och en kodvy där shaderns kod kan visas och laddas ned.
Detta är fortfarande en öppen beta. Figmas aktuella hjälpcenterartikel varnar för att funktioner kan ändras och att prestandaproblem kan förekomma. Den anger funktionen som tillgänglig i Figma Design på alla planer, men generering kräver åtkomst till Figma agent. Renderingen använder WebGPU, så systemet och webbläsaren måste också uppfylla Figmas minimikrav. Uppgifterna är kontrollerade den 2 september 2026 och bör läsas på nytt om plan eller betastatus avgör ett inköp.
Välj en effect när befintliga lager ska jämföras
Figma skiljer mellan två typer. En shader fill är en egen visuell fyllning, till exempel ett mönster, en gradient eller en procedurell textur. En shader effect modifierar i stället ett befintligt visuellt lager med exempelvis distorsion, korn eller färgjustering. För just detta prov är effect det tydligare valet: du kan lägga samma effekt på två olika underlag och se om rörelse och pekarrespons beter sig likadant.
Fyllningar är rätt när själva genereringen ska vara motivet. Effects är rätt här eftersom lagrets befintliga bild eller vektor ska gå att känna igen under provet. Det avgränsar också artikeln från sajtens andra Figma-nyheter: Around och Evenly handlar om mellanrum vid kanterna, medan Balance och Pretty handlar om textbrytning. Här är frågan om en visuell effekt fungerar före delning.
Lås beställningen innan du provar
Figma rekommenderar att du testar shaders på flera slags lager och använder en kopia av designen. Konkretisera rådet genom att duplicera den frame där effekten ska användas och skapa fyra numrerade testfall: B1 bild 320 × 180, B2 bild 1280 × 720, V1 vektor 320 × 180 och V2 vektor 1280 × 720. Behåll samma proportioner så att storleken, inte beskärningen, är den avsedda skillnaden inom varje lagertyp.
Beställ sedan ett beteende som går att mäta. Följande prompt och kontrollista hör ihop; sekunderna och procentsatsen är valda för detta redaktionella prov och är inte Figma-standarder:
Build me a shader effect with thin violet and cyan contour bands over the layer. At rest, the bands must be still. When played, move them smoothly from left to right in a seamless 6-second loop. While the pointer is inside the layer, create one local ripple centered on the pointer with a radius equal to 20 percent of the layer’s shortest side. After the pointer leaves, return to the base motion within 1 second. Include controls for line spacing, motion speed and ripple strength.
Prompten beställer tre observerbara lägen: stilla före Play, en loop över tid och en lokal reaktion på pekaren. Den beställer också samma relativa radie på små och stora lager. Det gör att ett underkännande kan kopplas till ett uttalat krav, i stället för till ett nytt önskemål som uppstod först när resultatet syntes.
Prov 1: kontrollera viloläget och kanterna
Börja med B1 utan att trycka Play. Kontrollera att konturbanden syns men står stilla. Titta särskilt vid lagrets fyra kanter: effekten ska följa formen och får inte rita utanför den. Upprepa samma kontroll på B2, V1 och V2. Skriv ja bara om mönstret är stilla, lagrets grundmotiv fortfarande går att identifiera och ingen synlig remsa hamnar utanför gränsen.
Det här steget fångar två fel som rörelse lätt döljer. Ett tunt glapp längs en kant kan försvinna för ögat när mönstret börjar flyta, och en alltför stark effekt kan se livfull ut men samtidigt utplåna bildens eller vektorns funktion. Jämför därför med den duplicerade designen, inte med minnet.
Prov 2: spela upp ett fall i taget
Välj B1 och klicka Play ovanför lagrets övre högra hörn. Titta igenom minst två hela loopar, alltså 12 sekunder med testprompten ovan. Övergången mellan sekund 6 och nästa varv ska inte ge ett synligt hopp, mönstret ska röra sig från vänster till höger och effekten ska ligga kvar inom lagret. Gör sedan samma sak med B2, V1 och V2.
Figmas hjälpcenter anger att endast en animerad eller interaktiv shader kan köras per sida åt gången. Om de tre andra testfallen står stilla medan B1 spelas är det därför inte ett fel i dem. Välj och spela upp varje fall separat. Notera däremot om ett stort lager hackar där ett litet går jämnt; betan och WebGPU-kravet gör att prestanda måste bedömas i den dator och webbläsare där arbetet faktiskt ska visas.
Prov 3: för pekaren från kant till kant
Med B1 igång för du pekaren långsamt in från vänster kant, i en cirkel genom mitten och ut genom höger kant. Rippeln ska följa pekaren lokalt, ha en radie nära en femtedel av lagrets kortaste sida och återgå till grundrörelsen inom 1 sekund efter att pekaren lämnat lagret. Upprepa från överkant till underkant. Kör samma två vägar på de tre återstående fallen.
Bedöm inte bara om ”något händer”. En reaktion kan finnas men vara förskjuten från pekaren, kapas vid en vektorkant eller fylla nästan hela det lilla lagret. De konkreta kriterierna är därför centrum, relativ storlek, återgångstid och avgränsning. Om en punkt faller ska du spara testfallet och revidera prompten eller kontrollen – inte godkänna effekten för att den ser intressant ut.
Fatta ett dokumenterat beslut med fyra rader
Skapa en rad för B1, B2, V1 och V2. Varje rad får tre kolumner: vila, loop och pekare. Sätt ja eller nej och lägg till en kort felnotering, till exempel ”V1: nej på pekare – rippeln kapas vid högerkant”. Effekten är redo att delas först när samtliga 12 rutor är ja. Ett nej betyder revidera, köra om samma 2 × 2-prov och spara en ny version.
Ändra en sak i taget. Om V1 faller på rippelns kant men de andra fallen klarar sig, be agenten justera hur rippeln klipps mot vektorformen och behåll loopens tid och rörelseriktning. Om du samtidigt ändrar färger, hastighet och radie går det inte att veta vilken förändring som löste felet. För ett bredare urval mellan visuella kandidater kan du använda samma princip som i ett kontaktark där en sak bedöms i taget.
Dela först efter provet – använd koden vid behov
När alla rader är godkända kan en shader enligt Figma göras till en stil, publiceras till Figma Community eller delas privat till en organisation. Den privata organisationsvägen anges i release-notisen som tillgänglig på Organization- och Enterprise-planer. Kontrollera behörigheten i det konto som ska publicera; en godkänd effekt och rätt att dela den är två olika frågor.
Om agentens iterationer inte löser ett reproducerbart fel kan kodvyn visa och ladda ned koden bakom shadern. Du behöver inte läsa kod för att genomföra grundprovet, men en utvecklare kan använda den sparade felraden – lager, storlek och kontrolläge – för att leta på rätt ställe. Figmas tekniska bakgrund beskriver hur WebGPU-lösningen kan använda både musposition och tid för att styra grafik inom lager. Det förklarar varför pekarfelet och loopfelet bör rapporteras var för sig.
Källor och kontrolltid
Tre officiella Figma-sidor lästes den 2 september 2026. Öppen beta, planåtkomst och tekniska krav kan ändras och bör kontrolleras igen när de påverkar ett arbetsflöde eller ett köpbeslut.
- Figma Release Notes – den daterade nyheten om animation, interaktion, publicering och kodåtkomst.
- Create shaders with the Figma agent – betastatus, WebGPU, typerna fill och effect, teststeg och begränsningen per sida.
- Behind the build: Generative plugins and shaders at Figma – teknisk bakgrund om WebGPU, musposition och tid.
Du har en duplicerad design med B1, B2, V1 och V2. Samma sparade shader effect och samma kontrollvärden används i alla fyra fallen. Varje fall har provats i vila, under minst två 6-sekundersloopar och med två pekarvägar. Alla 12 ja-eller-nej-rutor är ifyllda. Om någon ruta får nej är beslutet revidera; vid 12 ja kan effekten gå vidare till vald delningsväg.