Rehber

Figma Nedir, Nasıl Kullanılır?

Yazar
Buse Selvi
Ekibimizle aynı anda, aynı yerde, aynı zamanda üstelik keyifle çalışma imkanı sunan Figma app’i yakından tanıyalım. Figma'nın ne olduğunu ve nasıl kullanıldığını uygulamalı olarak anlattık.
USERSPOTS BÜLTEN
Her ay tasarım ve teknoloji üzerine yeni stiller, dijital ürünler, projeleriniz için kaynaklar, tasarım ilhamları ve daha fazlasına sahip bülten.
Aramıza hoş geldin! Yeni bültenlerimiz de görüşmek üzere...
Oops! Something went wrong while submitting the form.

Figma Nedir, Nasıl Kullanılır?

Ekibimizle aynı anda, aynı yerde, aynı zamanda üstelik keyifle çalışma imkanı sunan Figma app’i yakından tanıyalım. Figma'nın ne olduğunu ve nasıl kullanıldığını uygulamalı olarak anlattık.
Figma Nedir, Nasıl Kullanılır?

Figma Nedir?

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.

Neden Figma?

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.

Figma’nın Key Elementleri Nelerdir?

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.

Figma’nın Artı Yönleri Nelerdir?

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’nın Eksi Yönleri Nelerdir?

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…

Bonus: Figma Tutorial’ı!

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 buradan ulaşabilirsiniz. 

Umarım keyifli ve bilgilendirici bir Figma Rehberi olmuştur, yeni yazılarda görüşmek üzere!

Buse Selvi

Hazırlayan;

Akademi Komünite Sorumlusu

Buse Selvi

Userspots Bülten
Her ay tasarım ve teknoloji üzerine yeni stiller, dijital ürünler, projeleriniz için kaynaklar, tasarım ilhamları ve daha fazlasına sahip bülten.
2300’den fazla kişinin kayıtlı olduğu kulübümüze katıl !
Başvuru için teşekkürler. En kısa sürede sizinle iletişime geçeceğiz.
Lütfen eksik bilgileri tamamlayıp, tekrar deneyin.