Figma Auto Layout ile Esnek, Responsive Tasarım

Figma Auto Layout, statik kutular çizmekten kurtulup gerçek arayüzler gibi davranan bileşenler kurmanın en hızlı yoludur. İçeriğe göre büyüyüp küçülen butonlar, kart listeleri ve formlar tasarlamak istiyorsan, manuel olarak her elemanı yeniden hizalamak yerine Auto Layout'un içeriğe tepki veren kurallarını öğrenmen gerekir. Bu yazıda mantığı CSS Flexbox benzetmesiyle anlatıp, gerçek bir buton ve kart örneği üzerinden adım adım ilerleyeceğiz.

Auto Layout tam olarak ne yapar?

Bir frame'e Auto Layout uyguladığında, Figma o frame'i bir flex container gibi yönetmeye başlar. Çocuk elemanlar artık serbestçe sürüklenen kutular değil; bir eksen boyunca dizilen, aralarında sabit boşluk olan ve kapsayıcının padding'ine saygı duyan öğelerdir. Bir elemanı silersen kalanlar otomatik kayar, metni uzatırsan kapsayıcı genişler. Pratikte şunları kazanırsın:

Yön (direction): yatay veya dikey dizilim — CSS'teki flex-direction karşılığı.
Gap (boşluk): elemanlar arası sabit aralık — gap ile aynı.
Padding: kapsayıcının iç kenar boşluğu, dört kenar için ayrı ayrı.
Hizalama (alignment): 3x3'lük bir ızgarayla elemanların ana ve çapraz eksende konumu.

Bir frame seçip Shift + A kısayoluyla Auto Layout'u anında ekleyebilirsin; kaldırmak için aynı kısayolu tekrar kullanırsın.

Yön, gap ve padding'i ayarlamak

Auto Layout eklediğinde sağ panelde yeni bir bölüm açılır. İlk ayar yön: yatay (→) ya da dikey (↓). Bir butonun ikonu ve metni yan yana duracaksa yatay, bir kartın başlık ve açıklaması alt alta duracaksa dikey seçersin.

İkinci ayar gap yani elemanlar arası boşluktur. Sabit bir piksel değeri verebilir ya da "Auto" seçerek elemanları kapsayıcının iki ucuna yaslayabilirsin (CSS'teki justify-content: space-between mantığı). Padding için tek değer girip tüm kenarlara uygulayabilir, ya da yatay/dikey ayrı, hatta dört kenarı tek tek girebilirsin.

Son olarak hizalama kontrolü var: 3x3 noktalı ızgaradan bir noktaya tıklayarak elemanları sola/ortaya/sağa ve üste/ortaya/alta hizalarsın. Dikey bir kartta genelde "üst-sol", bir butonda "orta" tercih edilir.

Resizing: bileşeni gerçekten esnek yapan ayar

Auto Layout'un en güçlü ama en çok karıştırılan kısmı resizing davranışıdır. Hem kapsayıcı frame'in hem de her çocuk elemanın yatay ve dikey için üç seçeneği vardır:

Fixed (sabit): boyut elle belirlenir, değişmez.
Hug contents (içeriği sar): kapsayıcı tam içeriği kadar olur — bir butonun metne göre büzülmesi gibi.
Fill container (kapsayıcıyı doldur): eleman, ebeveynindeki boş alanı kaplar — CSS'teki flex-grow: 1 benzeri.

Doğru kombinasyon her şeyi değiştirir. Örneğin bir buton kapsayıcısını yatayda Hug yaparsan, metin uzadıkça buton büyür; içindeki metin elemanını Fill yapıp kapsayıcıyı Fixed yaparsan bu sefer buton sabit kalır, metin ortalanır. "Fill" yalnızca bir Auto Layout frame'in içindeki elemanlar için seçilebilir; en dıştaki frame'de bu seçenek görünmez.

Adım adım: esnek bir buton

Şimdi gerçekten responsive bir buton kuralım:

Bir metin katmanı oluştur, içine "Gönder" yaz.
Metin seçiliyken Shift + A bas — Figma metni bir Auto Layout frame'e sarar.
Yönü yatay bırak, padding'i yatay 16, dikey 10 yap.
Frame'in resizing'ini her iki eksende Hug contents seç.
Köşe yarıçapı ve dolgu rengi ekle.

Artık metni "Gönder"den "Formu Gönder"e değiştirdiğinde buton kendiliğinden genişler; padding hep aynı kalır. Bunu bir Component'e dönüştürürsen (Ctrl/Cmd + Alt + K), her kopyada aynı esnek davranışı taşırsın. Bu, CSS'te şu kurala denk düşer:

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
}

Kart listesi ve iç içe Auto Layout

Gerçek projelerde güç, iç içe Auto Layout'tan gelir. Tipik bir kart şöyle kurulur:

En dış dikey Auto Layout: kartın gövdesi (padding 24, gap 12).
İçinde bir başlık metni ve bir açıklama metni — ikisi de yatayda Fill container.
Altta yatay bir Auto Layout: butonlar, gap 8.

Bu kartı bir dış dikey Auto Layout'a koyup gap verirsen, kartları çoğalttığında otomatik bir liste oluşur. Bir kartı silersen liste boşluk bırakmadan toplanır. Çok sütunlu bir ızgara için Wrap (kaydır) seçeneğini açarsın: yatay Auto Layout, sığmayan elemanları alt satıra taşır — CSS'teki flex-wrap: wrap gibi davranır.

Yaygın hatalar ve ipuçları

Yanlış resizing: bir eleman gereksiz büyüyorsa, muhtemelen "Fill" olması gereken yerde "Fixed" ya da tam tersi seçilidir. İlk bakılacak yer burasıdır.
Metin sarmıyor: uzun metin tek satırda taşıyorsa, metin katmanını yatayda Fill yapıp dikeyde Auto/Hug bırak; metnin "Auto width" yerine "Auto height" modunda olduğundan emin ol.
Negatif boşluk: Figma negatif gap'i destekler; üst üste binen avatar yığınları için kullanışlıdır.
Absolute position: bir öğeyi Auto Layout akışından çıkarmak istersen (örneğin köşeye rozet koymak), o öğe seçiliyken absolute position'ı açabilirsin.

Sık Sorulan Sorular

Auto Layout, CSS Flexbox ile aynı mı?

Birebir aynı değil ama mantığı neredeyse aynıdır. Yön, gap, padding ve hizalama doğrudan Flexbox kavramlarına karşılık gelir; "Fill container" yaklaşık olarak flex-grow, "Hug contents" ise içerik genişliğine oturma davranışıdır. Bu yüzden frontend'e devir çok daha temiz olur.

Auto Layout'u nasıl kaldırırım?

Frame'i seç ve tekrar Shift + A bas; ya da sağ paneldeki Auto Layout bölümünün yanındaki eksi/kaldır seçeneğini kullan. Elemanlar son konumlarında serbest kalır.

İç içe kaç katman kullanabilirim?

Pratik bir üst sınır yok; karmaşık bileşenlerde 3-4 seviye iç içe Auto Layout normaldir. Yine de katmanları anlamlı isimlendir ve gereksiz sarmalayıcılardan kaçın; aksi halde bakım zorlaşır.

Tasarım sistemini sıfırdan kurmak ya da mevcut Figma dosyanı responsive bileşenlere çevirmek mi istiyorsun? Auto Layout temelli, geliştiriciye devri kolay arayüzler tasarlıyorum. Projeni konuşalım: benimle iletişime geç.