Her uygulama ve ürün, kullanıcılarının ihtiyaçları gereği güncellemelerle gelişiyor ve üzerine yeni özellikler ekleniyor. Pandemi ile beraber ofislerden remote çalışma ortamına geçildiğinde, online tasarım araçları da son bir senede normalden hızlı bir gelişim sergileyip yeni özelliklerini birbiri ardına sergilediler.
Daha önce Figma’yı hangi durumlarda ve nasıl keyifle kullandığımızı ‘’Figma'yı Nerede Kullanıyoruz?’’ adlı liste yazımızda paylaşmıştık. Bu yazımızda ise Figma’nın tasarım araçları arasında öne çıkan yeni özelliklerini inceleyeceğiz.
Figma yaratıldığında Figma Community alanı, yalnızca içerik paylaşımı için olanak sağlıyordu. Artık Figma Community içerisindeki yaratıcı kişiliklerle, içerikler üzerine iletişim kurmak mümkün. Beğendiğiniz bir tasarımı yorumlayabilir, yeni başlayan birine geri bildirim ve fikir önerileri verebilir, aklınızdaki soruları paylaşabilir, cevap alabilirsiniz. Bu paylaşım ortamı yeni başlayan Figma kullanıcılarına ‘’Playground’’ diye isimlendirilen pratik yapma alanları sunuyor. Aynı zamanda birçok tasarımcının portfolyosu için yaptığı ya da açık paylaşım ile sunduğu yüzlerce tasarım örneğine de ev sahipliği yapıyor. Bu örnekleri kendi kitaplığınıza kopyalayıp, üzerinde çalışabilir, yeni tasarımlarınız için ilham alabilirsiniz.
Bir tasarım sistemi oluştururken, yalnızca küçük farklılıklarla yan yana gelen, yan yana geldikçe çoğalıp artan ve kimi zaman bulması zor olan component'lere ihtiyaç duyulabiliyor. Variants işte tam da burada devreye giriyor.
Ne yaptığına gelirsek; aslında component’leri oluşturup, düzenlemenin ve kullanmanın yeni bir yolu.
Çeşitli durumlar ve boyutlar için ayrı tasarlanmış olanların yanı sıra, açık ve koyu modlar için de birden çok component’iniz olabilir.
Variants, daha önce bir component’in birden fazla durum halini oluşturduysanız, bunlar arasında hızlı geçiş yapabilmenizi ve düzenli tutmanızı sağlar. Bir component için olası bütün kombinasyonları (normal, seçili, hover, dark mode vs.) tek component başlığı altından yönetebilir, benzer bileşenleri tek bir isim altında gruplayabilir ve düzenleyebilirsiniz. Böylece kitaplığınızda farklı isimlerden oluşan ve bulması zor component karmaşasından kurtulabilir, sizin ve ekip arkadaşlarınızın aradığını hızlıca bulup doğru yerde kullanmasını sağlayabilirsiniz.
Scroll to komutu, Prototipiniz içerisinde önceden belirlediğiniz bir ‘’alt çerçeve’’yi (aksiyon butonu ya da bir alan olabilir) aynı ‘’ana çerçeve’’ içerisindeki bir alana göndermenize olanak tanır. Bu çözüm, carousel gibi kaydırılabilir öğelerle bağlantı yaratmak ve etkileşimleri çoğaltmak için oldukça kullanışlıdır. Örneğin sayfayı, prototip içerisindeki bir menü butonundan, 3 scroll aşağıdaki bir alana kaydırabilmeyi sağlar.
Prototip Oluşturma panelinin Interactions bölümünü kullanarak Scroll to seçerseniz, yalnızca kaydırılabilir çerçevelerin doğrudan alt öğelerini seçebilirsiniz. Üst düzey çerçevedeki herhangi bir nesneyi seçmek için bir bağlantı sürükleyip ve hedef olarak ayarlamak istediğiniz nesneye bağlayabilirsiniz. Scroll to ile, kaydırma animasyonunu Instant olacak şekilde ayarlayabilir veya Animate seçeneğini kullanarak bir hareket hızı ayarlayabilirsiniz. Bu komut, prototipleme içerisinde ‘’aynı sayfada bağlayamadığımız iki nesneyi’’ bağlamamızı sağlıyor. Bundan önce bunun gibi bir bağlantı grubu yaratırken her aksiyon için yeni bir sayfa oluşturmamız gerekiyordu.
Auto Layout, yaratılan Frame ve Component’lere farklı uzunlukta içerik girildiğinde, tasarım oranlarının birbiriyle ilişkili tutulmasına, düzenli ve kontrol etmesi kolay Component’ler yaratılmasına olanak sağlar.
Örneğin, içerisindeki text uzunlukları farklı iki buton yaratmanız gerekiyor. Yazdığınız her text için buton sınırları ile aralarındaki mesafeyi ayarlamak yerine, tasarımınızda önceden belirlediğiniz mesafelerle Auto Layout özelliğini kullanabilirsiniz. Böylece siz yazdıkça buton, text uzunluğuna uyum sağlar. Yeni katmanlar ekleyip, daha uzun metin dizeleri kullandığınızda veya tasarımlarınızı geliştirdiğinizde hizalamayı kontrol altında tutabilirsiniz.
Auto Layout’u kullanmanın birçok yolu var;
Metin etiketlerini, kartları düzenleyebilir, büyüyen veya küçülen buton oluşturabilir, öğeleri ekler, kaldırır veya gizlerken otomatik olarak uyarlanan listeler oluşturabilirsiniz. Bu şekilde eksiksiz arayüzler oluşturarak, kendinize ve takımınıza bolca zaman kazandırabilirsiniz.
Inspect Panel, daha önce yalnızca seçili öğe için kod gösterimi yapan bu alan, yeni sürümle beraber Tipografi, Renk, Sınırlar, İçerik, Varyantlar, Prototip animasyon değerleri gibi elementleri gruplayarak, incelenen sayfa için daha ayrıntılı ve kolay ulaşılabilen bir inceleme alanı sağlıyor. Bu sayede tasarım sürecinizdeki düzenlemeler, kod aktarımları ve takım içi iletişiminiz hız kazanıyor.
Developer Handoff:
Figma, 2016 yılından günümüze tek hesap ile açılışa izin veriyordu. Dolayısıyla kişisel hesap ve şirket hesabınız arasında geçiş yaparken tarayıcı üzerinden diğer hesaba girmeniz gerekiyordu. Fakat geçtiğimiz günlerde, daha önce beta olarak sunduğu çoklu hesap uygulamasını duyurdu. Bu özellik ile kişisel portfolyonuzu yönettiğiniz ve Community alanında kullandığınız hesabınız ile takım projelerinize aynı uygulama üzerinden ayrı ayrı ulaşabileceksiniz.
Yoğun iş temposu arasında, haftalık ekip toplantılarında ya da bir workshop organizasyonunda icebraker olarak oynanabilecek oyunlar da Figma Community’de bulabileceğimiz eğlenceli içeriklere örnek olarak gözümüze çarpıyor. Masa, kart, çarkıfelek, zar ve hatta kaçış oyunları gibi oldukça fazla seçenek var. Sadece oyun özelinde yaratılmış plug-in’lere de yine Community içerisinden ulaşılabiliyor. Tabii burada kendinize meydan okuyup, kendi oyununuzu ya da takımınızla beraber yeni bir oyun tasarımı da yapabilirsiniz :)
