Figma auto layout bileşen tasarımı, statik çerçeveler yerine içeriğe duyarlı dinamik yapılar kurmanın temel aracıdır. Bu özelliği derinlemesine kavramak, hem tasarım sistemlerinin bakım verimliliğini hem de geliştirici teslim kalitesini doğrudan etkiler. Auto Layout'un temel parametreleri: - **Direction:** Yatay (horizontal) veya dikey (vertical) akış yönü - **Gap:** Öğeler arası boşluk; "Auto" seçeneği mevcut alanı eşit böler - **Padding:** Konteyner içi boşluk (üst/alt/sol/sağ veya birleşik) - **Alignment:** Çapraz eksen hizalaması (baş, orta, son) - **Resizing:** Bileşenin genişlik/yükseklik davranışı (fixed, hug, fill) Figma auto layout bileşen tasarımında en yaygın mimari üç katman üzerine inşa edilir: **1. Atom düzeyi:** Tek bir öğe içeren temel bileşen. Örneğin ikon bileşeni: 24×24px fixed frame, ikon SVG ortada hizalı. Auto layout eklendiğinde padding ayarlanabilir; ikonun görsel ağırlığına göre 4px veya 8px padding uygun başlangıç değeridir. **2. Molekül düzeyi:** Buton bileşeni, figma auto layout bileşen yönetiminin klasik örneğidir. Yapı: yatay auto layout frame → ikon (solda, koşullu görünür) + metin etiketi. Padding: yatay 16px, dikey 8px (veya 12px orta boy). Genişlik: hug contents → metin uzunluğuna göre otomatik genişler; full-width gerektiğinde fill container. **3. Organizma düzeyi:** Form grupları, kart listeleri ve modal içerikleri dikey auto layout ile yönetilir. Gap değeri semantic token'dan çekildiğinde (`--space-4 = 16px`), tüm form bileşenlerindeki satır arası boşluk tek yerden güncellenir. Nested auto layout stratejisi karmaşık bileşenler için kullanılır. Örneğin navigasyon çubuğu: dış frame yatay auto layout (logo, nav-links, aksiyon grubu arası justify ile ayrılmış) → nav-links iç frame yatay auto layout (her link arasında 8px gap). Variant + Auto Layout kombinasyonu: bir butonun Primary/Secondary/Ghost variant'ları aynı auto layout yapısını paylaşır; yalnızca fill rengi ve border değişir. Bu mimari, variant değiştirmede beklenmedik boyut kaymasını önler ve geliştirici CSS çıktısını tutarlı kılar. **Developer handoff notu:** Figma auto layout bileşen değerleri doğrudan CSS flexbox ile eşleşir: direction → flex-direction, gap → gap, padding → padding, hug → fit-content, fill → flex: 1. Bu 1-to-1 ilişki, tasarımcı ile geliştirici arasındaki semantik köprüyü güçlendirir.