Figma, Auto Layout’un otomatik boşluk (auto spacing) özelliğine Around ve Evenly adında iki yeni dağıtım seçeneği ekledi; bu ikisi CSS’teki space-around ve space-evenly değerlerine birebir karşılık geliyor. Önceden tek seçenek olan varsayılan davranış da Between adını aldı ve üç seçenek artık Auto Layout ayarları panelindeki aynı açılır menüden seçilebiliyor.
Güncelleme, Figma’nın 21 Ağustos 2026 tarihli release notes’unda “Responsive spacing across design and CSS” başlığıyla duyuruldu. Bu, Auto Layout’u CSS flexbox davranışına daha da yaklaştıran daha geniş bir güncellemenin parçası. Figma’nın 2026’da attığı diğer adımları bu yazıda topladık.
Between, Around, Evenly arasındaki fark nedir?
Figma’nın resmi dokümantasyonuna göre üç seçenek şu şekilde çalışıyor:
- Between (varsayılan): Öğeler birbirinden mümkün olduğunca uzakta, kenarlarda hiç boşluk yok. CSS karşılığı
space-between. - Evenly: Kenarlar dahil tüm boşluklar birebir eşit — 1:1 oranı. CSS karşılığı
space-evenly. - Around: Öğeler arası boşluk, kenar boşluğunun iki katı — 2:1 oranı, her kenarda aradaki boşluğun yarısı kadar yer var. CSS karşılığı
space-around.
Auto spacing nasıl açılır?
Seçeneklere ulaşmak için önce boşluğu sabit bir piksel değeri olmaktan çıkarmak gerekiyor. Adımlar:
- Auto Layout uygulanmış bir frame seç.
- Sağ paneldeki Gap değerini sabit piksel yerine Auto yap.
- Altında beliren Auto spacing açılır menüsünden Between, Around veya Evenly‘i seç.
Üç seçenek de 
ek eklenti veya plugin gerekmeden, doğrudan aynı panelden kullanılabiliyor — release notes’ta ayrı bir plan kısıtlaması belirtilmiyor.
CSS Flexbox karşılığı ne, neden önemli?
Figma’nın kendi ifadesiyle bu üç seçenek “CSS property values space-between, space-evenly, and space-around” ile birebir eşleşiyor. Pratikte bu, tasarımda seçtiğin dağıtım tipini kodda justify-content ile birebir tekrar edebileceğin anlamına geliyor:
.container {
display: flex;
}
/* Figma: Between */
.container--between { justify-content: space-between; }
/* Figma: Around */
.container--around { justify-content: space-around; }
/* Figma: Evenly */
.container--evenly { justify-content: space-evenly; }Bu, aynı dönemde gelen CSS’in gap decorations özelliğiyle birlikte değerlendirildiğinde, hem tasarım hem geliştirme tarafında “gap” kavramının nasıl standartlaştığını gösteriyor.
Tek eleman (single child) davranışı değişti
Bir auto layout yığınında gap Auto iken tek bir çocuk öğe varsa davranış seçeneğe göre farklılaşıyor. 
Between seçiliyken tek öğe artık yatay akışta sola, dikey akışta üste hizalanıyor — önceden ortalanıyordu, bu bir davranış değişikliği. Around ve Evenly‘de ise tek öğe yine ortalanmaya devam ediyor. Bu varsayılan, sağ paneldeki Alignment kutusundan istediğin zaman değiştirilebiliyor.
Bu, daha büyük bir Auto Layout güncellemesinin parçası
Between/Around/Evenly, Figma’nın Auto Layout’u web’in render mantığına daha da yaklaştırdığı geniş kapsamlı bir güncellemenin bir parçası. Figma’nın kendi açıklamasına göre “Auto layout was designed to mirror how the web renders layouts, but a few edge cases never quite matched CSS” — yani amaç, tasarım-kod aktarımında geliştiricilerin eklemek zorunda kaldığı workaround’ları azaltmak.
- Temmuz 2026’dan itibaren yeni oluşturulan frame’lerde güncellenmiş sürüm varsayılan hale geldi.
- Var olan (legacy) frame’ler otomatik güncellenmiyor — Auto layout settings modalından elle geçiş gerekiyor.
- Ocak 2027’ye kadar iki sürüm arasında (legacy ↔ güncellenmiş) geçiş yapılabiliyor.
Figma bu dönemde başka CSS-uyum adımları da attı: Text Wrap’e eklenen Balance ve Pretty seçenekleri de benzer bir tasarım-kod paralelliği hedefliyor. Aynı dönemde AI kredi limitlerinin kullanıcı bazında kontrolü ve Figma Agent’a topluluktan skill ekleme desteği de gündemdeydi.
Sıkça Sorulan Sorular
Figma’da Around ve Evenly hangi tarihte geldi?
Özellik, 21 Ağustos 2026’da figma.com/release-notes üzerinde “Responsive spacing across design and CSS” başlığıyla duyuruldu. Bu, Temmuz 2026’dan beri kademeli olarak yayılan daha büyük bir CSS-uyum güncellemesinin son parçasıydı.
Between neden yeniden adlandırıldı, eski projelerimin görünümü değişti mi?
Between, önceki tek “auto spacing” davranışının yeni adı; öğe dizilimi aynı kaldı, isim sadece CSS terminolojisiyle eşleşmesi için değişti. Tek fiili fark, gap Auto iken tek öğe varsa artık ortalanmak yerine sola/üste hizalanması.
Auto Layout’ta Around/Evenly seçeneklerini göremiyorum, ne yapmalıyım?
Bu seçenekler yalnızca Gap değeri Auto olarak ayarlandığında görünür hale geliyor. Ayrıca frame’in Temmuz 2026 sonrası güncellenmiş Auto Layout sürümünde olması gerekiyor; var olan frame’ler Auto layout settings modalından elle güncellenmeli.
Figma’nın Around/Evenly’i CSS’teki space-around/space-evenly ile birebir aynı mı çalışıyor?
Evet. Figma’nın resmi dokümantasyonuna göre bu üç seçenek CSS flexbox’ın space-between, space-evenly ve space-around değerleriyle birebir eşleşiyor. Bu sayede tasarımdan koda geçişte ek workaround yazmaya gerek kalmıyor.
Bir Yorum Yazın