Figma, 25 Eylül 2026’da auto layout’a dikey sarma (vertical wrap) ekledi: dikey akışa ayarlı bir çerçevede içerik, çerçevenin yüksekliğini aşınca taşmak yerine yeni bir sütuna geçiyor. Figma’ya göre davranış, CSS flexbox’taki flex-direction: column ve flex-wrap: wrap ikilisiyle birebir aynı (Figma sürüm notları).
Şimdiye kadar sarma yalnızca yatay akışta vardı. Sabit yükseklikli, çok sütunlu bir onay kutusu listesi ya da ekip biyografileri kurmak isteyen, sütunları elle bölmek ya da eklentiye başvurmak zorundaydı. Bu yazıda dikey sarmanın nasıl açıldığını, boşlukların nasıl ayarlandığını ve neyi yapmadığını anlatıyoruz.
Figma auto layout dikey sarma nedir?
Dikey sarma, dikey akıştaki bir auto layout çerçevesinde öğelerin yukarıdan aşağıya dizilip çerçevenin yüksekliğine ulaşınca yeni bir sütuna geçmesi. Yatay sarmanın 90 derece döndürülmüş hâli gibi düşünebilirsin (Figma Yardım):
Dikey sarma nasıl açılır?
Adımlar Figma’nın yardım sayfasındakiyle aynı (Figma Yardım):
Çerçeveyi seç: Auto layout uygulanmış bir çerçeve seç.- Dikey akışı seç: Akış seçeneklerinden Vertical’ı işaretle.
- Wrap’ı aç: Sarma ayarını etkinleştir.
- Yüksekliği sabitle: Yeni sütunun nerede başlayacağını belirlemek için çerçeveye sabit bir yükseklik ver.
Çerçeveyi seç: Auto layout uygulanmış bir çerçeve seç.Son adım kritik. Çerçeve yüksekliği içeriğe göre büyüyorsa (hug), sütunun “dolması” hiç gerçekleşmez ve her şey tek sütunda kalır. Sarmanın çalışması için yüksekliğin bir sınırı olmalı.
Dikey sarma masonry düzeni değildir
Figma bu konuda açık bir uyarı yapıyor: dikey sarma bir masonry (Pinterest tarzı) düzen değil. Öğeler auto layout sırasını korur ve bir sonraki sütuna ancak mevcut sütun çerçevenin kullanılabilir yüksekliğine ulaşınca geçer (Figma Yardım).
Figma’nın rehberi Grid akışını da ayrıca tanımlıyor: Grid’de öğeler bir sonraki satıra sarılmıyor, bunun yerine bir ızgaraya yerleştiriliyor ve birden fazla satır ya da sütuna yayılabiliyor (Figma). Galeri, bento kutusu ya da pano düzeni için Grid; sıranın önemli olduğu listeler için dikey sarma.
Sarmalı düzende boşluklar nasıl ayarlanır?
Sarma açıkken iki ayrı boşluk değeri ayarlanabiliyor. Biri aynı sütundaki öğeler arasındaki boşluğu, diğeri sarılmış sütunlar arasındaki boşluğu kontrol ediyor. Boşluk sayı olarak ya da “Auto” olarak verilebiliyor; Auto seçilince Between, Evenly ve Around dağıtım seçenekleri çıkıyor (Figma Yardım). Around ve Evenly seçeneklerini ayrı bir yazıda anlatmıştık.
Tasarımı koda aktaracak geliştirici için eşleşme şöyle:
Tek fark çerçevenin kendisinde: CSS’te de sütunlu sarmanın çalışması için kapsayıcının bir yükseklik sınırı olması gerekiyor. Figma’daki “sabit yükseklik” kuralı buradan geliyor. CSS tarafında kapsayıcıya göre düşünmek için container query yazımıza bakabilirsin.
Dikey sarma nerede işe yarar?
Figma’nın kendi önerdiği kullanım alanları: onay kutusu listeleri, ürün tanıtım kısa metinleri ve biyografiler; yani öğe eklendikçe, çıkarıldıkça ya da boyutu değiştikçe kendini yeniden düzenlemesi gereken sabit yükseklikli, çok sütunlu yapılar (Figma Yardım).
Filtre panelleri: Uzun onay kutusu listelerini iki üç sütuna bölüp sabit yükseklikte tutmak.- Footer bağlantıları: Link sayısı değiştiğinde sütunların kendiliğinden yeniden dağılması.
- Ekip ve biyografi blokları: Sıranın önemli olduğu, eşit yükseklikte kart listeleri.
Farklı yükseklikte kartlar: Masonry beklentisiyle kullanma; sütun altlarında boşluk kalır.- Hug yükseklik: Çerçeve içeriğe göre büyüyorsa sarma hiç tetiklenmez.
Filtre panelleri: Uzun onay kutusu listelerini iki üç sütuna bölüp sabit yükseklikte tutmak.
Farklı yükseklikte kartlar: Masonry beklentisiyle kullanma; sütun altlarında boşluk kalır.Figma’nın bu yıl metin ve düzen tarafına getirdiği diğer eklemeler için Text Wrap: Balance ve Pretty ve Figma’nın 2026’daki en önemli 10 özelliği yazılarımıza göz atabilirsin.
Sıkça sorulan sorular
Figma’da dikey sarma (vertical wrap) nasıl yapılır?
Auto layout çerçevesini seç, akışı Vertical yap ve Wrap’ı aç. Yeni sütunun nerede başlayacağını belirlemek için çerçeveye sabit bir yükseklik ver (Figma Yardım).
Figma dikey sarma ne zaman geldi?
Figma, özelliği 25 Eylül 2026 tarihli sürüm notuyla duyurdu (Figma sürüm notları).
Figma dikey sarma ile masonry düzen yapılabilir mi?
Hayır. Figma, dikey sarmanın masonry düzen olmadığını belirtiyor; öğeler sırasını korur ve sonraki sütuna yalnızca mevcut sütun çerçeve yüksekliğine ulaşınca geçer (Figma Yardım).
Figma dikey sarmanın CSS karşılığı nedir?
Figma’ya göre davranış, CSS flexbox’ta flex-direction: column ve flex-wrap: wrap birlikte kullanıldığındakiyle aynı (Figma sürüm notları).
Bir Yorum Yazın