Figma får styrbar opacitet i variabler – prova disabled states utan att koppla loss färgen

Nyheten från 3 september: opaciteten blir en egen bindning

Figma publicerade den 3 september 2026 notisen Control opacity at scale i sina release notes. Där beskriver företaget två bindningar som kan leva tillsammans: färgen kan fortsätta vara länkad till biblioteket, medan opaciteten hämtas från en talvariabel. Tidigare kunde en designer behöva koppla loss färgen och justera opaciteten för hand. Den nya funktionen är gjord för att värdet i stället ska kunna ändras i variabelvyn och slå igenom där det används.

Notisen nämner disabled states, overlays och scrims som exempel. Det betyder inte att samma procentsats passar alla tre. En inaktiverad kontroll måste fortfarande se inaktiv ut, en overlay måste signalera att innehållet bakom inte går att använda och en scrim behöver ge texten tillräcklig visuell separation från bilden. Nyheten löser distributionen av värdet. Den väljer inte rätt värde åt designsystemet.

Vad de två variablerna faktiskt styr

Figmas översikt över variabler, samlingar och lägen beskriver en färgvariabel som en solid färg med valfri opacitet. Hjälpsidan säger också uttryckligen att en talvariabel kan användas på färgvariabelns opacitet, samtidigt som färgen behåller ett separat alias. Det är den separationen du ska kontrollera: kulören kommer från färgvariabeln, genomskinligheten från talvariabeln.

Det spelar roll när en färg redan används som token. Om du kopplar loss fyllningen och skriver 48 procent direkt på ett lager har du skapat ett lokalt undantag. Om du i stället låter färgvariabelns opacitet peka på opacity/muted kan du ändra talet en gång och sedan granska resultatet på flera ställen. Principen liknar provet för Between, Around och Evenly i auto layout: central styrning är värdefull först när du ser vad ändringen gör i flera realistiska storlekar och sammanhang.

Bygg ett minimalt tokenpar i en kopia

Följande arbetsgång är AI-kreatörs testmetod, inte en återgiven Figma-checklista. Gör provet i en kopia av filen eller i en separat testsamling, så att en misslyckad procentsats inte sprids till produktionskomponenter. Skapa först en färgvariabel med namnet test/indigo och ge den en tydligt igenkännbar kulör, exempelvis #5A43D6. Skapa sedan talvariabeln opacity/muted med värdet 48.

Öppna färgvariabelns värde, behåll kulören som dess färgkälla och bind opacitetsegenskapen till opacity/muted. Begränsa talvariabeln till användning för färgvariabler om den nya scope-inställningen finns i ditt gränssnitt. Figmas hjälpsida om att skapa och hantera variabler beskriver scope som ett sätt att begränsa vilka egenskaper en variabel erbjuds för. Release-notisen är mer specifik och säger att opacitetsvariabeln kan avgränsas för just färgvariabler.

Undvik att lägga till mörkt läge, komponentvarianter eller publicering i biblioteket i samma steg. Målet här är smalare: visa att ett tal styr opaciteten utan att färgbindningen försvinner. När det fungerar kan tokenparet flyttas in i sajtens vanliga grupper. En tydlig namnhierarki fyller samma funktion som i Figmas kapslade mappar: nästa person ska kunna hitta både rollen och värdet utan att gissa.

Lägg samma bindning på tre testytor

Bygg tre rutor bredvid varandra och ge varje ruta en oförändrad referens till vänster och ett testfall till höger. Applicera test/indigo på den del som ska tonas ned i samtliga testfall. Referensen ska ligga kvar med full opacitet eller med sitt befintliga produktionsvärde. Då får du en faktisk jämförelse i stället för tre fristående färgrutor.

1. Disabled state: gör två identiska knappar. Referensen är aktiv. Testknappen använder den länkade färgen på bakgrund, ikon eller text och ska fortfarande läsas som inaktiv utan att etiketten försvinner.
2. Overlay: lägg ett enkelt kort bakom en rektangel med den länkade färgen. Referensen visar kortet utan overlay. Testfallet ska tydligt signalera ett blockerat eller pausat lager, men det bakomliggande innehållet ska fortfarande gå att känna igen.
3. Scrim: lägg två rader vit text över en ljus och en mörk del av samma bildyta. Testfallet använder den länkade färgen som scrim. Läs båda raderna i den storlek där komponenten faktiskt ska visas.

Etikettera rutorna Disabled, Overlay och Scrim. Skriv också 48 % bredvid den första versionen. Att spara provets värde på själva ytan gör jämförelsen begriplig även efter att talvariabeln har ändrats och den gamla renderingen inte längre går att återskapa med ett klick.

Ändra 48 till 32 och kontrollera tre saker

Duplicera hela provframen innan ändringen och döp kopiorna till Före – 48 och Efter – 32. Ändra sedan bara värdet i opacity/muted, från 48 till 32. Rör inte färgvariabeln, lagrens egna opacitetsfält eller bakgrunderna. Före- och efter-exemplen behåller därmed samma omslutning och namn; den avsedda procentsatsen är den enda skillnaden.

Kontrollera resultatet i denna ordning:

1. Skala: har disabled state, overlay och scrim ändrats efter en enda central uppdatering?
2. Bindning: visar fyllningen på alla tre testlager fortfarande test/indigo, och visar färgvariabelns opacitet fortfarande opacity/muted?
3. Betydelse: går det inaktiverade tillståndet fortfarande att skilja från det aktiva, signalerar overlayn fortfarande blockering och kan de två textraderna på scrimen fortfarande läsas mot sina bakgrunder?

Godkänn inte provet enbart för att alla ytor blev ljusare. En central ändring som slår igenom tekniskt men gör en knapp tvetydig eller en bildtext svårläst har visat att tokenstrukturen fungerar och att värdevalet inte gör det. Dokumentera båda slutsatserna var för sig.

När ett gemensamt värde inte räcker

Om 32 procent fungerar för overlayn men inte för scrimen ska du inte reparera scrimen genom att koppla loss färgen och skriva en lokal procentsats. Dela i stället upp rollerna efter provet, exempelvis i opacity/disabled, opacity/overlay och opacity/scrim, och kör samma tre kontroller igen. Det är inte ett misslyckande. Provet har hittat att tre visuella uppgifter behöver tre semantiska beslut.

Stanna däremot vid ett enda tal under första körningen. Om du börjar med tre värden vet du inte om den nya bindningen verkligen kan uppdatera flera användningar på en gång. Först verifierar du mekaniken med ett gemensamt värde. Sedan separerar du rollerna där den visuella granskningen kräver det. Implementationen av motsvarande designtoken i CSS eller appkod hör till utvecklarsajterna och lämnas utanför denna Figma-kontroll.

Två gränser som är lätta att missa

Hjälpcentret anger att ett negativt tal på opacitet faller tillbaka till 0 procent och att ett tal över 100 faller tillbaka till 100 procent. Det hindrar värden utanför intervallet från att ge en opacitet under 0 eller över 100, men det säger inget om vilket värde som är användbart. Håll därför provvärdena inom intervallet och behandla den visuella kontrollen som ett separat krav.

Figma beskriver också att variabler kan publiceras till teambibliotek och att uppdaterade variabler kan uppdatera design mellan filer. Den här artikeln lovar ingen bestämd synktid eller att varje konsumentfil tar emot ändringen utan ett eget godkännandesteg. Gör först det lokala provet, skriv ned vilka komponenter som använder tokenen och planera bibliotekspubliceringen som en egen förändring. Det håller funktionsprovet avgränsat och gör återgången tydligare.

Vad källorna inte väljer åt dig

Figma anger ingen rekommenderad procentsats för de tre exemplen, inget kontrastkrav och inget godkännandekriterium för ett designsystem. Release-notisen säger att opacitet kan styras centralt; den säger inte att en enda opacitetstoken bör delas av alla nedtonade tillstånd. Värdena 48 och 32 procent, treyteprovet och ja-eller-nej-kriterierna är därför AI-kreatörs metod.

Behöver ett gränssnitt uppfylla ett fastställt kontrastkrav krävs en separat mätning mot de faktiska för- och bakgrundsfärgerna. Att två tillstånd ser olika ut i provframen är bara kontrollen som denna artikel beställer. Gör inte ett vidare tillgänglighetslöfte av den observationen.

Källor och kontrolltid

Tre officiella Figma-sidor lästes den 4 september 2026. Kontrollera dem på nytt om gränssnittets placering, scope-alternativ eller biblioteksflöde är avgörande för ett senare arbete.

• Figma Release Notes – posten Control opacity at scale, daterad 3 september 2026, för den nya bindningen, bibehållen färglänk och de tre exemplen.
• Overview of variables, collections, and modes – typerna färg och tal, separat färgalias och opacitet, biblioteksuppdateringar samt intervallets gränsbeteende.
• Create and manage variables and collections – variabelvyn, skapandet av variabler och vad scope gör.