Responsive Tasarım’da Auto Layout’un Önemi

Bugün ekip çalışmalarının aranan araçlarından biri olan, özellikle UI/UX tasarımda ekiplerin arayüz tasarımlarının her aşamasında severek kullandığı; tasarım, prototip ve kod oluşturma araçlarına sahip ve tarayıcı tabanlı bir tasarım uygulaması olan Figma’nın Responsive Tasarım yapmak için bire bir özelliğini yakından inceleyeceğiz: Auto Layout.

Konuya başlamadan önce “Nedir bu Responsive tasarım?” sorusuna bir cevap vermemiz gerekiyor. Responsive, kelime anlamı “esnek, elastik ve duyarlıdır” ve bu terimin tasarım dünyasındaki karşılığı yine sözcük anlamıyla benzerlik gösterir: web duyarlı tasarım. 2010 yılında ortaya çıkan bu tasarım biçimi popüler olmasından çok hem yazılımcı ve tasarımcı iş birliğinde hem de kullanıcı deneyimi optimizasyonunda oldukça mühim bir rol oynamaktadır.

Önceden yalnızca desktop odaklı çalışılan tasarımlar teknolojinin gelişimi, mobil ve tablet kullanımının artışıyla beraber bu cihazlarda da efektif bir kullanıcı deneyimi sağlanması amacıyla Responsive Tasarım olarak ortaya çıkmıştır. Daha açık bir dille açıklamak gerekirse responsive tasarım, tasarımın farklı ekran boyutlarına uygun şekilde oturtulması veya tasarlanması anlamına gelmektedir.

Peki ya Auto Layout ve Responsive tasarım arasındaki ilişki nedir ve tasarımcılara ne gibi kolaylıklar sağlar?

Arayüz tasarımının oldukça meşakkatli bir süreç olduğunun hepimiz biliyoruz. Her bir aşamada titizlikle hazırlanan detaylar, müşteri ve markalarla yapılan uzun toplantılar derken kısıtlı bir sürede yapılması gereken onlarca revizeyle karşı karşıya kalabiliyoruz. Diyelim ki Figma’da bir proje üzerinde çalışıyorsunuz, Auto Layout, projeniz farklı ekran boyutlarında (mobil ve tablet) gösterildiğinde, arayüzde bulunan resim ve yazı gibi elementlerin ekran genişliğine göre yeniden şekillendirip ekrana tam oturmasını sağlar.Yani içeriğe göre boyutu otomatik olarak değiştiren elementler oluşturulmasını sağlar. Hem web tasarım hem de mobil uygulama tasarımları için oldukça kullanışlı bir özelliktir.

 

 

Layout’lar frame gibi olduklarından, frame’e dair tüm özellikleri layout’lara da verilebilir. Auto layout’u iki farklı yönde kullanılabilir. Horizontal(yatay) ve vertical(dikey). Default olarak elementin durduğu şekle göre hareket edecektir ancak bu sağdaki menüdeki oklar kullanılarak değiştirilebilir. Tek başına auto layout olan bir frame’i yatay ya da dikey olarak yönlendirmek anlamlı olmayacağı için var olan auto layout’u başka bir auto layout’a dahil ederek ögeyi kopyaladığınızda okları kullanarak yatay ya da dikey olarak sıralanmaları sağlanabilir. İçlerine farklı şeyler yazıldığında kendileri otomatik olarak genişleyecek ya da daralacaktır. Manuel olarak yapıldığında zaman kaybı ve yorucuolacak bu işlem, auto layout özelliği sayesinde çok hızlı ve kolay bir şekilde halledilebilir.

 

 

Kenar boşlukları ve elementler arasındaki boşluklar default olarak 10px şeklinde oluşur. Responsive bir tasarım yapabilmek için yine sağ taraftaki menüde auto layout kısmındaki “padding” ve “space between items” ibarelerinden bu sayılar değiştirilebilir. Ok tuşlarını kullanarak veya elementleri alıp sürükleyerek yerleri kolaylıkla değiştirilebilir. Yine rahatlıkla yeni bir layout oluşturup aralarına ekleme ya da çıkarma işlemleri de yapılabilir.

 

Peki Auto Layout’u nereden aktif edebilirim ve aktif olduğu nasıl anlaşılır?

 

 

Ögelerinin üzerine sağa tıklayıp “ add auto layout” seçeneğinden veya sağ taraftaki menüde bulunan Auto Layout bölümünün en sağındaki artıya (+) tıklayarak da aktif edilebilir. Klavye üzerinden olan kısa yol ise Shift+A’dır. Aktif olduğunu anlamak içinse, sol menüde auto layout’u aktifleştirdiğiniz ögenin yanında 2 adet içi boş ince dikdörtgen görürseniz başarıyla eklediğinizi anlayabilirsiniz.

Mobil araçlar üzerinden gerçekleştirilen web site ziyaretleri dünyada oldukça yüksek seviyelere ulaştığından ve kısa sürede daha da artması beklendiğinden dolayı responsive özellikli web sitelerinde ciddi bir artış bekleniyor. Auto layout’un yukarıda bahsettiğimiz ve diğer tüm özellikleri de tasarımcılara responsive tasarım sürecinde kolaylık sağladığından artık farklı ekranlar için responsive tasarım yapmak çok daha kolay!

REFERANSLAR

• https://www.figma.com/
• https://goodpractices.design/figma-autolayout
• https://uxdesign.cc/10-auto-layout-tips-in-figma-23f530c8098a