Figmas auto layout får Around och Evenly – så styr du kanterna i mellanrummen

Det här står i notisen från 21 augusti

Figma publicerade den 21 augusti 2026 posten Responsive spacing across design and CSS i sina release notes. Där står att auto layouts automatiska mellanrum har fått två nya alternativ, Around och Evenly, vid sidan av det befintliga standardbeteendet som nu heter Between. Figma motiverar tillskottet med att lägena matchar mellanrumsmönster som CSS redan stöder.

Namnbytet är den del som rör mest befintligt material, och det är också den minst dramatiska. Figma skriver uttryckligen att Between är samma existerande standardfunktion, omdöpt för att stämma med CSS-terminologin. Dina gamla filer får därmed en ny etikett i panelen, inte ett nytt utseende. Du behöver inte gå igenom tidigare skärmar och leta efter förskjutna objekt. Det som blir inaktuellt är i stället din egen dokumentation: komponentbeskrivningar, överlämningsanteckningar och interna riktlinjer som beskriver inställningen med det gamla ordet. Samma sak hände när Figma införde egenskapen för textbrytning med BALANCE och PRETTY — ändringen satt i verktyget, men arbetet låg i att skriva om beskrivningen så att den matchade panelen.

Between, Around och Evenly: skillnaden sitter vid kanterna

Figmas egna beskrivningar av de tre lägena är korta, och det lönar sig att läsa dem exakt som de står. De skiljer sig i ett ord vardera:

• Between — jämna mellanrum mellan objekten, inget vid kanterna. Detta är samma standardbeteende som funnits sedan tidigare, omdöpt för att matcha CSS-terminologin. Ytterobjekten ligger dikt an mot ytans kanter.
• Around — jämna mellanrum mellan objekten, med halva det mellanrummet vid varje kant. Ytterobjekten får alltså luft, men mindre luft än den som ligger inuti raden.
• Evenly — varje mellanrum är identiskt, kanterna inräknade. Ytan delas i lika stora luckor oavsett om luckan ligger mellan två objekt eller mellan ett objekt och kanten.

Figmas hjälpcenterartikel om flöden i auto layout uttrycker samma sak i förhållanden: Evenly använder 1:1 mellan inre mellanrum och kantutrymme, medan Around använder 2:1 — mellanrummen är dubbelt så stora som kantutrymmet. Hjälpcentret kopplar dessutom lägena till CSS-värdena space-between, space-evenly och space-around. Det är en praktisk detalj vid överlämning: en utvecklare som ser namnet i designfilen kan skriva motsvarande värde i sin flexbox utan att gissa vad du menade.

Räkna skillnaden på en yta på 600 pixlar

Definitionerna blir konkreta så snart du sätter siffror på dem. Ta en frame på 600 pixlars bredd med tre objekt som är 120 pixlar breda vardera. Objekten upptar 360 pixlar, alltså finns 240 pixlar fri yta att fördela. Med tre objekt finns två mellanrum inuti raden och två kanter.

Between lägger inget vid kanterna. Hela den fria ytan går till de två inre mellanrummen: 240 delat på 2 ger 120 pixlar mellan objekten och 0 vid varje kant. Around ger halva mellanrummet vid varje kant, vilket ger tre lika stora andelar: 80 pixlar mellan objekten och 40 pixlar vid varje kant, precis det 2:1-förhållande hjälpcentret anger. Evenly delar ytan i fyra lika luckor: 60 pixlar överallt, både mellan objekten och vid kanterna.

Räkningen är gjord här utifrån Figmas egna definitioner; företaget publicerar inga pixeltal för något specifikt fall. Poängen är storleksordningen. Mellan Between och Evenly halveras det inre mellanrummet i det här exemplet, från 120 till 60 pixlar, samtidigt som kanten går från 0 till 60. Byter du läge sent i ett projekt är det alltså ingen finjustering — hela radens rytm ändras.

Så hittar du inställningen

Lägena styr fördelningen av ledigt utrymme, så de blir relevanta först när det finns ledigt utrymme att fördela. Figmas hjälpcenter beskriver ordningen: sätt Gap till Auto, vilket fördelar objekten över den tillgängliga ytan, och välj sedan fördelningstyp i listan Auto spacing i modalen Auto layout settings. Har frameen hug contents i den riktning du arbetar finns ingen överbliven yta, och då spelar valet av läge ingen roll.

Hjälpcentret noterade den 31 augusti 2026 att Evenly och Around fortfarande rullas ut till alla användare. Ser du bara Between i din lista är det alltså inte nödvändigtvis ett fel i filen eller i rättigheterna. Notera datumet i din egen dokumentation och kontrollera igen senare, i stället för att bygga om en komponent för att kompensera för ett läge som kanske dyker upp inom kort.

Provet: tre objekt på en egen frame

Här lämnar vi Figmas dokumentation. Följande arbetsgång är AI-kreatörs rekommendation, inte en instruktion från Figma: bygg en separat provframe innan du rör en riktig komponent. Skälet är att skillnaden mellan lägena göms av allt annat som pågår i en verklig skärm — padding, kapslade auto layouts, komponenter som växer olika. Tre likadana rutor på en tom yta visar skillnaden på en gång.

Gör så här: lägg tre identiska rektanglar i en horisontell auto layout, sätt frameen till en fast bredd och Gap till Auto. Duplicera raden två gånger så att du har tre likadana rader ovanför varandra, och ge dem Between, Around respektive Evenly. Dra sedan i frameens bredd. Between-raden håller objekten mot kanterna hela vägen, Around-raden behåller en smal marginal och Evenly-raden fördelar luften jämnt. När ytan blir riktigt smal ser du vilket läge som fortfarande läser som en avsiktlig komposition och vilket som ser hopklämt ut.

Spara provframen i projektet i stället för att kasta den. Den fyller samma funktion som ett referensark: nästa gång någon i teamet undrar varför en rad ser ut som den gör finns svaret att peka på. Ligger den i en tydlig mappstruktur — samma tanke som bakom Figmas kapslade mappar — hittar även den som inte byggde komponenten tillbaka till provet.

Tre frågor notisen inte svarar på

Var lägena finns. Release-notisen namnger ingen Figma-produkt och ingen yta. Den beskriver funktionen i auto layout och stannar där. Vill du veta om lägena går att använda i en presentation, en publicerad sajt eller ett annat sammanhang än det du arbetar i just nu får du prova i det verktyget, för uppgiften står inte i notisen och den ska därför inte antas.

Hur lägena samspelar med padding. Varken release-notisen eller hjälpcenterartikeln beskriver vad som händer när frameen har padding samtidigt som du väljer Around eller Evenly. Det är precis den kombination som är vanlig i ett kort eller en verktygsrad. Lägg därför in padding i din provframe och läs av resultatet innan du bestämmer värdet i en komponent som redan är i produktion.

När utrullningen är klar. Hjälpcentret anger att lägena rullas ut, men inget slutdatum och ingen andel konton. Skriv in i din designsystemsdokumentation att uppgiften är kontrollerad 31 augusti 2026, så vet nästa läsare hur färsk kontrollen är. En uppgift om utrullning åldras snabbare än en beskrivning av vad ett läge gör.

Källor och kontrolltid

Två officiella Figma-källor lästes den 31 augusti 2026. Kontrollera dem på nytt om du behöver veta om utrullningen är avslutad eller om gränssnittsetiketterna har flyttats.

• Figma Release notes – posten Responsive spacing across design and CSS daterad 21 augusti 2026, som äger namnbytet till Between och beskrivningarna av Around och Evenly.
• Use the horizontal and vertical flows in auto layout – hjälpcenterartikeln som release-notisen länkar till, med Gap satt till Auto, listan Auto spacing, förhållandena 1:1 och 2:1, kopplingen till CSS-värdena och noteringen om pågående utrullning.