Figma’da Layout Grid Avantajları
Figma’da en faydalı özelliklerden biri layout grid diyebilirim.
Tasarımcı kullanılabilir bir tasarım yapmayı amaçlar, yazılımcı tasarımı en iyi şekilde kodlamayı amaçlar. Yazılımcı için en önemli detaylar tasarımda görünenlerden çok, görünmeyenlerdir. Mesela bir text blokta yazı uzarsa ne olacak, mobil bardaki ikonlar farklı piksel çözünürlüklü telefonlarda nasıl görünecek. Yani kodladığı tasarımın, farklı ekranlara nasıl adapte olacağı gibi sorular gelir yazılımcının aklına.
Layout grid ile ilgili bir kaç örneği kendi tasarladığım bir uygulama üzerinden göstereceğim.
Mobil ve Webte Çalışmak
Kodlanabilir bir tasarım için grid sistemi ile çalışmak çok avantajlıdır. Tasarlanacak tüm elementlerin belirli bir düzen içinde olması ve farklı ekranlara uyumlululuk için frame gridlere bölünür. Bu çoğunlukla (önerilen sistemler) mobil için 8-point Grid System, laptop için 960 Grid System şeklindedir.
Barlarda Layout Grid ile Çalışmak
Barlardaki içeriği yatayda 3'e 4'e ve hatta bazen 5'e bölmek isteyebiliriz. Tab bar bunun güzel bir örneği. Benim yaptığım tasarımda Tab bar 4'e bölünüyor;
İlk soru şuydu; aralarındaki uzaklığı nasıl ayarlayacağım? Elbette manuel de ayarlayabilirdim ama bu pek iyi bir fikir değil. Bunun için layout gridten yardım aldım. İstediğim şey, ikon sayısı kadar grid ve her ikonun kendi gridinin içinde ortada durmasıydı. Tabii ki diğer özellikler de var. Nasıl çalıştığına bakalım;
Sadece tab bar değil, diğer bileşenlerde de layout gride ihtiyacımız oluyor. Daha doğrusu yatayda uzayabilecek ve yeniden boyutlanması gereken çoğu bileşen için layout grid kullanabiliriz.
Bazı bileşenlerde de layout grid kullanmamayı tercih ediyorum. Çünkü bazen sadece tasarımı karmaşıklaştırıyor ve onu kullanmanın gereği olmuyor. Örneğin tasarımdaki farklı bir Navigasyon barına bakalım;
Bir frame içinde 2 tane ikon ve bir text var. Auto layout ya da layout grid’e sahip değil. Text öğesinin başlık ya da alt başlık olacağını biliyoruz. Yani ne kadar uzayabileceğini tahmin edebiliyorum. Bu sebeple zaten yazı naviagsyon barını aşacak uzunlukta olmayacak. Öğeleri frame içinde konumlandırınca textin de konumunu tasarıma göre center olacak şekilde düzenliyoruz. Ve işte sonuç;
İletişim için Twitter ya da iletisim@alicorak.com adreslerini kullanabilirsiniz.
