Figma Auto Layout Kullanımı: Pratik ve Adım Adım Rehber

Figma’nın Auto Layout özelliği, tasarım sürecinizi hızlandıran ve daha tutarlı arayüzler oluşturmanızı sağlayan güçlü bir araçtır. Bu yazıda, Auto Layout’un temellerinden ileri düzey ipuçlarına kadar her şeyi adım adım açıklayacağız.

Auto Layout Nedir? Temel Kavramlar

Auto Layout, bir grup nesneyi (frame, component, text vb.) birbirine bağlayarak, içerik değiştiğinde otomatik olarak yeniden boyutlandırılmasını ve konumlandırılmasını sağlayan bir sistemdir. Geleneksel “manuel” konumlandırma yöntemine göre, Auto Layout sayesinde:

Auto Layout’un Çalışma Prensibi

Auto Layout iki temel eksende (yatay ve düşey) çalışır. Bu eksenler üzerinden direction (yön), spacing (boşluk) ve padding (iç kenar boşluğu) gibi ayarlar yapılır. Örneğin, bir buton grubu oluştururken butonlar arasındaki boşluğu otomatik olarak ayarlamak için “Horizontal” yönünü seçip “Spacing” değerini belirleyebilirsiniz. İçerik eklediğinizde veya kaldırdığınızda, Auto Layout bu ayarları koruyarak tasarımın bozulmasını engeller.

Auto Layout’u Aktifleştirme ve Temel Ayarlar

Figma’da Auto Layout’u etkinleştirmek oldukça basittir:

1. Bir frame ya da component seçin.
2. Sağ panelde Auto layout bölümünü bulun ve + işaretine tıklayın.
3. Açılan menüde Direction, Spacing, Padding gibi seçenekler karşınıza çıkar.

Direction (Yön) Seçenekleri

Spacing (Boşluk) ve Padding (İç Kenar Boşluğu)

Auto Layout ile Responsive Tasarım

Responsive (duyarlı) tasarım, farklı ekran boyutlarına uyumlu arayüzler oluşturmak demektir. Auto Layout, bu süreci basitleştirir çünkü:

Örnek: Mobil Menü Tasarımı

1. Vertical Auto Layout bir frame oluşturun.
2. Menü öğelerini (icon + text) tek tek ekleyin.
3. Her öğenin Height değerini “Hug contents” (içeriği sar) bırakın.
4. Frame’in Width değerini “Fill container” yapın. Böylece menü, ekran genişliğine göre otomatik olarak uzanır.

İleri Düzey İpuçları ve Pratik Kullanım

1. Nested Auto Layout (İç İçe Auto Layout)

Bir tasarımda birden fazla Auto Layout katmanı kullanabilirsiniz. Örneğin, bir kart component’i içinde:

Bu yapı, başlık uzunluğu değiştiğinde açıklamanın otomatik olarak hizalanmasını sağlar.

2. Component ve Variants ile Kombinasyon

Auto Layout, component’ler ve variants (varyantlar) ile birlikte kullanıldığında tasarım sisteminizi çok daha esnek hâle getirir. Örneğin, bir Button component’i oluşturup “Primary”, “Secondary” gibi varyantlar ekleyebilir, her birine farklı padding ve spacing değerleri tanımlayabilirsiniz.

3. Text Resizing (Metin Yeniden Boyutlandırma)

Auto Layout içinde metin kutularını “Auto width” yerine “Fixed width” yaparsanız, metin uzunluğu arttığında satır içi kırılma otomatik olur. Bu, özellikle buton içindeki uzun metinler için faydalıdır.

4. Align and Distribute (Hizala ve Dağıt) Kısayolları

Auto Layout kullanırken Shift + A (Align) ve Shift + D (Distribute) kısayolları ile öğeleri hızlıca hizalayabilir, aralarındaki boşlukları eşitleyebilirsiniz.

Nasıl Yapılır? Adım Adım Rehber

Adım 1: Auto Layout’u Aktifleştir

Adım 2: Boşluk ve Padding Ayarlarını Yap

Adım 3: İçerik Ekleyin ve Test Edin

Adım 4 (Opsiyonel): Nested Layout Oluşturun

Adım 5: Component ve Variants Ekleyin

Sık Sorulan Sorular

Auto Layout ile bir öğeyi sabit konuma nasıl getiririm? Auto Layout içinde bir öğeyi sabitlemek için o öğeyi seçip Constraints kısmından “Left”, “Right”, “Top” veya “Bottom” kısıtlamasını ayarlayabilirsiniz. Böylece, ebeveyn frame içinde konumu değişmez.

Horizontal ve Vertical yönleri aynı anda kullanabilir miyim? Evet, “Both (Wrap)” seçeneği sayesinde öğeler yatayda yer kapladıkça yeni satıra dökülür. Bu, kart gridleri veya etiket bulutları gibi düzenlerde çok işe yarar.

Auto Layout içinde bir öğenin genişliğini %100 yapmak mümkün mü? Evet. Öğeyi seçtikten sonra Resize menüsünden “Fill container” (kapsayıcıyı doldur) seçeneğini işaretleyin. Bu, öğenin genişliğini ebeveyn frame’in genişliğine göre %100 yapar.

Auto Layout ile oluşturulan component’te padding’i tek tek nasıl değiştiririm? Component’i çift tıklayarak Edit modea geçin, sağ panelde Auto layout bölümünden Padding değerlerini ayrı ayrı (Top, Right, Bottom, Left) düzenleyebilirsiniz.

Auto Layout’un performansı büyük dosyalarda yavaşlar mı? Genel olarak Figma, Auto Layout’u optimize eder ve büyük projelerde bile akıcı çalışır. Ancak aşırı karmaşık nested layout’lar ve çok sayıda component aynı anda seçildiğinde geçici gecikmeler yaşanabilir. Bu durumda, gereksiz katmanları birleştirerek ya da bazı Auto Layout’ları “Detach instance” (örnekten ayır) yaparak performansı artırabilirsiniz.

Sonuç

Figma Auto Layout, tasarım sürecinizi hızlandıran, tutarlı ve responsive arayüzler oluşturmanızı sağlayan vazgeçilmez bir araçtır. Temel yön ayarlarından nested layout ve component varyantlarına kadar her adımı uygulayarak, tasarım sisteminizi daha esnek ve yönetilebilir hâle getirebilirsiniz. Şimdi öğrendiklerinizi gerçek projelerinizde deneyimleyin ve tasarım verimliliğinizi artırın!