Hatırlatma: Figma, Sketch ve Adobe XD programlarının mobil uygulama tasarlama açısından artılarını ve eksilerini okuyacağınız bu yazıdan önce bir önceki yazım olan Mobil Uygulama Tasarımı konusunu okumanızı, mobil uygulama tasarımı hakkında ön bilginiz yoksa tavsiye ediyorum.

Bir mobil uygulama projesi başlatmak istiyor, bir mobil uygulama nasıl yapabilirim düşünceleri ile geziyor veya yeni bir projeye başlıyor yada halihazırda bir mobil uygulama projesi yürütüyor olabilirsiniz. Bu yüzden size kendi projelerim için çeşitli sebeplerden dolayı kullanmayı uygun gördüğüm mobil tasarım uygulaması kullanıcı arayüzü (User İnterface) oluşturma ve prototipleme programı FİGMA’dan, Adobe XD’den ve Macbook için tasarlanmış olan Sketch programından bahsedeceğim.

Eğer bir mobil uygulama projeniz varsa ve bu projeyi kendiniz tasarlayacaksanız öncelikle Wireframe çizmeli (uygulamanın telefonunuzda nasıl görüneceği konusunda kara kalem çizimleri) ve sonra bu çizimleri mobil uygulama tasarım programları ile kullanıcı arayüzüne(UI yani User interface) dökmeli, prototiplemeli (mobil uygulama içinde hangi butona basarsan hangi sayfaya gidecek bunu gösteren demo bir uygulama gibi düşünebilirsiniz) ve sonra uygulama geliştiricinize (Developer) aktarmalısınız.

Uygulama geliştiriciler bu prototiplere bakarak hangi buton nerede, hangi renkte, hangi boyutta olmalı ve bu butona bastığınızda hangi sayfaya gitmeli bunu göreceklerdir. Gerçek mobil uygulamanın kodlarını yazarken daha rahat algoritma oluşturacaklar ve sayfaların birbiri ile bağlantılarını gerçek uygulamada yapabileceklerdir.

Belki okuluna gitmeden bir developer yani uygulama geliştirici olmak daha zor olabilir ama biraz hayal gücü ve biraz bilgisayar bilgisi ile çok iyi bir tasarımcı (designer) olabilirsiniz. Ben yazıda size FİGMA’yı önereceğim. Şimdi neden Figma sorusunun cevabına birlikte bakalım.

 

1-Platform

Türkiye’de çoğu insan Macbook kullanmıyor veya alamıyor. Alanlar da zaten çoğunlukla işleri için almak zorunda olanlar. Figma’nın bizim için artısı web tabanlı bir program olması. Figma internet tarayıcısı Chrome (veya FireFox) ile her platformda kullanılabiliyor. İster Mac Os yüklü bir Macbook’unuz olsun ister Windows yüklü bir bilgisayarınız, isterseniz bilgisayarınız Gnu/Linux yüklü olsun. Eğer Chrome tarayıcınız ve internetiniz varsa her yerden Figma’ya erişebilir ve aklınızdakileri hayata geçirebilirsiniz.

Figma’nın aynı zamanda tarayıcıdan bağımsız. Windows veya Mac Os’da masaüstünüze indirip herhangi bir program gibi kullanabilirsiniz ancak yine de çalışması için internet bağlantısı gerekli. Aslında tarayıcıdan değil de program içinden açmış oluyorsunuz. Fark eden yanı ise hızlı işlemler için kısayolları daha rahat kullanabiliyor olmanız. Mesela en çok kullanacağınız kopyalama, yapıştırma yada ileri geri alma aktiviteleri için kısa yolları kendi programı içerisinde rahatlıkla kullanabiliyorsunuz. Yoksa tarayıcıdan girdiğiniz Figma ile bilgisayarınıza indirip kurduğunuz Figma programı arasında bir fark yok.

Ancak Sketch sadece Macbook için yapılmış ve sadece Macbook’ta çalışan bir program. Programı kullanmak değil aynı zamanda projeleri incelemek ve açmak için de Macbook’a ihtiyacınız var. Bu da kullanıcıların çok büyük kısmını etkiliyor. Macbook’u olmayan tasarımcı olamaz dermiş gibi. Ancak şunu söylemek gerekiyor, Figma’nın aksine Sketch çevrimdışı çalışabilen bir program. Bu kimin için ne kadar artı bir özelliktir emin değilim.

2-Maliyet

Figma bu alanda ücretsiz bir uygulama. Deneme sürümü vesaire değil, neredeyse tamamen ücretsiz. Ücretli özelliği ise takım çalışması. Aynı anda, aynı proje üstünde çizim yapalım istiyorsanız aylık belli bir tutarı var. Uygulama tasarımı üzerinde takım halinde çalışılmayacaksa ödeme yapmanız gerekmiyor. Bir şirket değilseniz tasarımınızı tek yapacaksınız. Şirketseniz de aylık 12 dolar gibi bir ücret sorun olmayacaktır.

Ancak Sketch yıllık $99 gibi bir fiyat etiketine sahip. Evet 99 dolar verip tüm yıl güncelleme alıyorsunuz ancak sonraki her yıl bu ücreti ödüyorsunuz. Bunun yanı sıra Adobe XD den çok daha ucuz biliyorum. Ancak ilk başta sadece hobi olarak başlayacak belki ilerleyecek ya da ilerlemeyecek bir atılım için neden 400-500 tl gibi bir ücret ödeyeseniz ki?

3- Hız Ve Performans

Figma Sketch’e göre çok daha hızlıdır. Bazı kullanıcılar Sketch’in çevrimdışı çalıştığı için daha hızlı olduğunu dile getiriyor ancak bunlar birer kullanıcı görüşüyse bana Figma daha hızlı gibi geldi. İşlevsel bir uygulama. Hız konusu projeden projeye farklılık gösterecektir.

4- İşbirliği Özelliği

Figma’da aynı anda bir proje üzerinde takım halinde çalışabiliyorsunuz. Evet yanlış anlamadınız aynı anda bir sayfada siz geri tuşunu ayarlarken takım arkadaşlarınızdan birisi tuşun rengini diğer takım arkadaşınız tuşun hangi bağlantıya gideceğini ayarlayabilir. Ancak Sketch’de böyle bir özellik maalesef mevcut değil.

5- Dosya Paylaşımı Özelliği

Figma’da kendiniz için ya da bir firma için üstünde çalıştığınız bir projeyi ister takım arkadaşlarınıza, ister patronlarınıza, tasarım çiziminin olduğu sayfayı bir link yardımı ile gösterebilirsiniz. Çünkü tasarım çizimleri Figma’da tarayıcı üzerinden yapıldığı için link olarak paylaşmak çok kolaydır. Güzel yanı da yolladığınız kişi tasarım çizimleriniz üstünde bir değişiklik yapamaz. Sadece yakınlaştırıp uzaklaştırabilir.

Sketch böyle bir özelliğe sahip değildir. Aynı zamanda Figma Sketch dosyalarını destekler. Bir Sketch dosyasını alıp Figma açık olan tarayıcınızın üzerine sürükleyip bıraktığınıza Figma bu dosyayı ayrıştırıp aynı Sketch’deki gibi bir proje olarak açar ve üzerinde düzenleme yapabilirsiniz.

6- Tasarım Duyarlılığı

Figma’da bir tasarımın boyutlarını başka bir boyuttaki ekran için nasıl görünüyor denemek çok basittir. Yani şunu demek istiyorum. Iphone 6 için yaptığınız bir tasarım Iphone 6 Plus’ta nasıl görünür, Ya da Android One veya Samsung telefonların ekran boyutunda nasıl görünür, ya da başka boyutta bir ekran boyutuna nasıl görünür? Bunları denemeniz için hızlı, görsel bir çalışma butonu sunar. Ancak Sketch’de bu 4 seçenekten ibarettir ve açılır butonlarla yapılır. Önceden Sketch’de böyle bir özellikte yoktu. Figma’dan sonra getirildi.

7- Vektör Ağları Teknolojisi

Figma’da vektör ağları dediğimiz serbest seçim ile yapılan çizimlerde vektörler çok daha kolay bir şekilde oluşturulabilir. Eğer vektörü başladığınız noktada bitirirseniz, yani kenarları tamamen kapalı bir çizim yaparsanız, çizimin içini istediğiniz renk ile doldurabilirsiniz. Figma bu konuda çok işlevsel ve modern. Ancak Sketch’de bu özellik daha geleneksel tarzda.

8- Desteklenen Dosya Türleri

Bu seçenekte Sketch daha başarılı. Tasarladığınız çizimleri dışa aktarmak için farklı yollar mevcuttur. Bu sizin için önemli olabilir. Çünkü ne tür bir proje için tasarım yaptınız bilmiyorum. Tasarımlarınızı program dışına

Sketch

• PNG
• JPG
• TIFF
• WebP
• PDF
• EPS
• SVG

Figma

• PNG
• JPG
• SVG

uzantılı olarak çıkarmaktadır.

Figma’nın desteklediği dosya türleri sizin için yeterli olmayabilir.

9- Semboller – Bileşenler

Figma’da herhangi bir bileşeni direkt tuval üzerinde düzenleyebilirsiniz. Örneğin bir buton koydunuz ve adını ”Geri” verdiniz. Bunu direkt tuval üzerinde değiştirebilir, kalınlaştırabilir, rengini ve yazı fontunu değiştirebilirsiniz. Ancak Sketch’te butona tıklayıp sağ taraftaki inspektör panelinde değişiklikler yapabilirsiniz. Direkt tuvalde değişiklik yapamazsınız.

10- Prototipleme Ve Dışa Aktarım Özelliği

Figma’da da Sketch’te de prototipleme özelliği mevcuttur. Ancak Sketch Figma’dan daha çok dışa aktarım özelliğine sahiptir. Yani yapılan bir tasarımı Sketch’ten başka bir prototipleme aracına aktarmak için çok seçenek vardır. Bunlardan birkaçı İnVision, Marvel, Proto.io, Flinto, Framer vb. Ancak Figma’da sadece kendi içerisinde prototipleme yapabilirsiniz  ya da sadece Framer’a hızlı bir şekilde aktarabilirsiniz. Başka bir seçeneğiniz yoktur.

Bunların dışında çizimlerinizi Figma’dan JPG yada PNG olarak dışa aktarıp uygun uzantılarla prototip yapabilen programları kullanabilirsiniz. Prototipiniz istediğiniz kadar görsel olmayabilir. Bu konuda Sketch bir adım öndedir.

11- Bileşen Kütüphanesi

Figma’da ortak bir proje yürütüyorsanız bir bileşen kütüphanesi oluşturabilir ve bunu proje arkadaşlarınızla paylaşabilirsiniz. Böylelikle siz bir sayfayı yaparken arkadaşınız aynı butonların bulunduğu ortak kütüphaneniz yardımı ile diğer sayfayı hızlı bir şekilde yapabilir.

12- Yorum Sistemi

Figma’da proje üzerinde grup halinde çalışıyorsanız takım arkadaşlarınız ile tasarım hakkında yorumlarınızı bırakabilir ya da anlık olarak Slack platformu üzerinden bağlantı halinde kalıp tasarım hakkında anbean yorumlaşabilirsiniz. Ancak Sketch’de böyle bir sistem yoktur.

13- Sürüm Geçmişi

Figma’da da Sketch’te de sürüm geçmişlerini görüntüleme mevcuttur. Ancak Figma’da sürüm geçmişleri arasındaki geçişler daha hızlıdır.

Evet yazıda Adobe XD’ye birkaç yorum dışında hiç yer vermedim. Çünkü Adobe’un yeni başlayanlar için pahalı ve karmaşık yapısını bir türlü sevmedim. Sketch yada Figma amaca yönelik programlardır. Kendi projelerim için FİGMA’yı seçtim ve memnun kaldım. Mobil uygulama tasarım çizimleri yapmak isteyenler gönül rahatlığı ile Figma’yı tercih edebilirler bence. Öğrenmesi oldukça kolay.

Figma’nın web sitesini buradan inceleyebilirsiniz.

Figma’yı bilgisayarınıza buradan indirebilirsiniz.

Figma’nın genel bloguna buradan ulaşabilir güncellemeleri takip edebilirsiniz.

Bu yazıları yazarken biraz da amacım Türkiye’de eksikliğini gördüğüm bir konu için kaynak oluşturmak. Tasarım projeleri hakkında fikir alış verişi yapılan ve insanların kendi tasarımlarını paylaştığı bir platform oluşturmak. Konu ilginizi çekiyorsa lütfen yorumda belirtin. Türkiye’deki tasarımcı arkadaşları, tasarıma meraklı ama amatör arkadaşları, ya da tasarım yapmak isteyen tüm yaş gruplarındaki arkadaşları bir çatı altında toplanalım.

Siz de kendi çalışmalarınız varsa konunun altına belirtebilirsiniz. Umuyorum hepimiz için bir platform kurup mobil konusunda tasarım ve çizimlerimizi sergileyebileceğimiz ya da birbirimize yardımcı olabileceğimiz bir platform meydana getirebiliriz.

Not: İlerleyen zamanlarda ”Figma İle Mobil Tasarım Nasıl Yapılır?” (Buraya link gelecek) konulu birkaç yazı yazıp Figma öğretimi yapmayı planlıyorum. İlgileniyorsanız takipte kalmanızda fayda var.

”Her şey gerçekte bir hayalle başladı.”