Bu İçerikte Yer Alan Ana Başlıklar:
• Figma Nedir?
• Neden Figma?
• Figma’nın Key Elementleri Nelerdir?
• Figma’nın Artı Yönleri Nelerdir?
• Figma’nın Eksi Yönleri Nelerdir?
• Bonus: Figma Tutorial’ı!
Bu içerik ile; dijital projeler için bulut tabanlı bir tasarım ve prototip oluşturma aracı olan Figma'yı keşfedeceksiniz. Son zamanlarda tasarım dünyasında oldukça popüler olan bu araçla neler yapabileceğinizi, aracın bize neler sunduğunu öğreneceksiniz. Ayrıca uygulamalı örnek ile Figma'yı kullanmaya başlayabileceksiniz.
Userspots Akademi'de online olarak devam eden Figma Eğitimi'ne katılarak “Figma” aracını uygulamalı olarak deneyimleyebilirsiniz.
Figma, dijital projeler için bulut tabanlı bir tasarım ve prototip oluşturma aracıdır. Kullanıcıların projeler üzerinde ortak ve hemen hemen her yerde çalışabilmesi için yapılmıştır. Tek bir araçla tasarlayabilir, prototip oluşturabilir ve geliştirici aktarımı yapabilirsiniz. Figma, işlevsellik ve özellikler açısından Sketch'e benzeyen bulut tabanlı bir tasarım aracıdır ancak Figma'yı ekip işbirlikleri için daha iyi hale getiren büyük farklılıklar vardır.
Figma, bir web tarayıcısı çalıştıran herhangi bir işletim sisteminde çalışır ve her platformda çalışan tek tasarım aracıdır. Bu nedenle, Mac veya Windows işletim sistemi kullanıyorsanız, bulut tabanlı olduğu için dosyaları paylaşırken veya farklı platformlara geçerken herhangi bir sorun yaşamazsınız.
1. Çok Hızlı Onboarding
Genellikle tasarım araçlarını kullanmadan önce, ağır bir uygulama indirmeniz ve ardından kredi kartınızı çıkarmadan önce 30 gün boyunca denemeniz gerekir. Figma ile kurulum yok, deneme süresi yok. Ücretsiz olarak üye olup kullanmaya başlayabilirsiniz, ancak tam bir deneyim arıyorsanız ücretli planlarına yükseltmeniz gerekecektir. Tamamen web tabanlı olduğundan, tarayıcınızla oturum açıp tasarlamaya başlayabilirsiniz. Tabii uygulamasına sahip olmak isterseniz, bir Mac / Window uygulaması da var. Ayrıca Sketch’te çalıştığınız bir proje dosyanızı Figma’ya aktarabilirsiniz. Böylece yeniden başlamanız gerekmez, bu da projenizi tasarlamaya devam etmenizi çok kolaylaştırır. Ve arayüzü de Sketch ile çok benzer olduğu için yabancılık çekmeden projeye odaklanabilirsiniz.
2. Ortak Çalışma İmkanı
Uzaktan çalıştığımız bu dönemde Figma tabii ki hayat kurtarıyor çünkü ekiple ortak çalışmak için mükemmel bir araç. Yorum yapma özelliği ile geri bildirim vermek ve almak mümkün. Paylaşmak için Figma dosyasının linkini kopyalıyorsunuz ve gönderiyorsunuz, işte bu kadar kolay. Herhangi bir şey indirmenize, kurmanıza veya güncellemenize gerek yok. Tasarımlarınızı paylaştığınız herkes görebilir ve/veya yorumlayabilir. Güncel bir tarayıcıya sahip olmanız yetiyor.
3. Figma ve Slack Entegrasyonu
Figma, Slack ile entegre olma özelliğine de sahip. Böylece ekibinizin Slack grubuna Figma’yı entegre ederek, yapılan değişiklikler ve bu değişikliklere yorumları kolay ve hızlı bir şekilde takip edebilirsiniz.
4. Daha Hızlı İş Akışı
Figma ile her şey tarayıcıda gerçekleştiği için çok hızlı bir tasarım süreci yaşayabilirsiniz. Çökme veya gecikme yaşayanı da henüz duymadık. Dahası, tarayıcı tabanlı iş akışı gerçekten harika. Örneğin, bir web sitesine gidip, bir SVG resmine sağ tıklayıp “İncele” dedikten sonra, sadece SVG kodunu kopyalayıp Figma'ya yapıştırabilirsiniz. Sonuç olarak da bu vektör resmini tasarımınızda düzenlemeye hazır hale getirmiş olursunuz.
5. Otomatik Kaydetme Özelliği
Figma bulut tabanlıdır, bu nedenle çalışmanızı kaydetmeyi unutmanız veya bilgisayarınızın çökmesi durumunda endişelenmenize gerek yok, kendi otomatik olarak kaydediyor.
6. Prototipleme
Basitçe Prototip kısmına geçip, prototip oluşturmaya başlayabilirsiniz. Figma ile prototip yapmak için tasarımlarınızı başka bir platforma yüklemenize gerek kalmıyor.
7. Figma Mirror
Figma Mirror, Figma’nın mobil uygulamasıdır. Bu uygulamayı telefonunuza indirerek, mobil projelerde eş zamanlı olarak ekranlarınızı görüntüleyebilir ve prototipi deneyimleyebilirsiniz. Prototip üzerinden, gerçeğe en yakın şekilde, kullanılabilirlik testi yapmanız da mümkün.
8. Developer’a Kolay Aktarım
Developer ekibi tasarımınızı düzenleme/editleme yetkisi olmadan görebilir ve tasarımdan herhangi bir varlığı/componenti/ekranı, CSS / iOS / Android fark etmeden dışarı aktarabilir. Yani ekranlarınızı Zeplin, Avocode, InVision gibi bir üçüncü taraf uygulamasına yükleyip aktarmanıza Figma’da gerek yok.
1. Frames & Layout Grids (Çerçeve & Düzen Izgaraları)
Tercih edilen web ya da mobil ekran frame boyutunu seçmek her projede birinci adımımız. Frame’lere üst panelden veya kısayol olarak klavyenizdeki "F" tuşuna basarak erişebilirsiniz. Figma frame’lerdeki özelliklerden biri de, çerçeveden dışarı çıkan öğeleri gizleyen maskeleme aracıdır. Bu özellikle yeni başlayanlar için kullanışlı olabilir.
Diğer bir şey de, tüm tasarım sürecini hızlandırmanıza yardımcı olabilecek frame’lerdeki layout grid’lerinin kullanılmasıdır. Grid, Figma'da kullanışlı, ancak kullanımı oldukça basit bir araç olarak da hizmet vermektedir. Tasarımcıların aynı alan üzerindeki negatif alanları ve katmanlama öğelerini kontrol etmelerine ve bir düzen kodu bulmalarına olanak tanır.
2. Color Libraries (Renk Kütüphaneleri)
Bir tasarım projesinde belirli bir renk ayarını oluşturup kullandığınızda, Figma bunu kitaplığınıza otomatik olarak ekler. Menüdeki tüm renk paletlerinizin kaydedildiği, yeniden kullanılmaya hazır olduğu menüdeki "Document Color" seçeneğinden erişebilirsiniz.
Böylece, aynı renk tonları ve şemaları ile bir proje üzerinde çalışırken, her rengi manuel olarak ve ayrı ayrı kaydetmek zorunda kalmazsınız.
3. Constraints
Figma constraints ile responsive bir tasarım yaparken, web ve mobil görünümleri arasına kolayca geçiş sağlayabilirsiniz.
Madde madde Figma’nın artılarını özetleyecek olursak;
• Bilgisayarınızda yerden tasarruf sağlar. Çünkü herhangi bir indirme işlemi yapmadan tarayıcınızdan açarak kullanabilirsiniz ve tüm depolama işlemini Cloud’da yapar.
• Kolay ve hızlı iş akışı sağlar. Sunduğu şablon, map ve çok daha fazla template’lerden birini seçip direkt işe koyulabilirsiniz.
• Ortak ve online çalışma imkanı sağlar. Uzaktan çalışma sürecinde ekibinizle ve müşterilerinizle ortak ve eş zamanlı bir şekilde çalışıp, aktarma yapma zahmetinden kurtulabilirsiniz.
Figma mükemmel bir tool mu, hiç mi eksik yönü yok derseniz;
• Bağlantı sorunları eş zamanlı görüntüleme aksaklığına yol açabilir. Figma’yı tarayıcıdan kullanırken internet bağlantınız kesilir ve yavaşlarsa yaptığınız düzenlemeleri ekibiniz eş zamanlı olarak görüntüleyemeyebilir.
• Birden fazla kişiyle ortak dosyada çalışıyor olmak bazı karışıklıklara yol açabilir. Karışıklıkları önlemek için en son yapılan düzenlemeyi ve bu düzenlemeyi kimin yaptığını takip etmekte fayda olabilir.
• Cloud’da depolama yaptığınız için internet bağlantınız kesildiğinde proje dosyalarına ulaşımınız da kesilir. İnternetinizin kesildiği bir iş gününde, projenize ulaşmak için internetin gelmesini oturup beklemekten başka çare olmayabilir…
Tabii ki eksi yönlerinden bahsettikten sonra modumuz düşük olarak bu rehberi bitirmeyeceğiz. Space Club’tan ve orada yapmakta olduğumuz Tool of the Week konseptinden bahsetmiştik. Figma haftasında Uygulamalı Figma Eğitimi eğitmenimiz Ferdi Çıldız’ın oluşturduğu tutorial’ı uygulayarak Figma’yı daha yakından tanıyabiliriz!
Tutorial videolarında oluşturulan Figma dosyasına Space Club'tan ulaşabilirsiniz.
Ayrıca arayüz ve prototip tasarımında Figma ile neler yapabileceğinizi anlattığımız "Figma'yı Nerede Kullanıyoruz" başlıklı yazımızı inceleyebilir, Figma'nın yeni çıkan ve son dönemde çok kullanılan özelliklerini ise "Figma'nın Öne Çıkan Yeni Özellikleri" adlı içeriğimizden keşfedebilirsiniz.
Son olarak, vaktinin bir kısmını Figma’da geçirenler için faydalı bir önerimiz var. Figma ilgili sorularınızı aşağıdaki alandan Space Club komünitemize kolaylıkla iletebilir, komünite üyelerinin deneyimleri ve desteği ile yeni çözüm yolları keşfedebilirsiniz.
