Figma dijital tasarim dunyasini tamamen degistirdi. Eskiden Photoshop veya Sketch ile yapilan arayuz tasarimi artik Figma ile cok daha hizli, isbirlkci ve erislebilir hale geldi. Ustelik Figma tamamen tarayicida calisiyor, Mac veya Windows farketmiyor ve ucretsiz plani baslangic icin fazlasiyla yeterli. Bu yazida Figma'yi sifirdan ogrenmeniz icin ihtiyaciniz olan her seyi paylasacagim. Uc yildir Figma kullanan bir tasarimci olarak gercek proje deneyimlerimle birlikte anlatiyorum.
Figma Nedir ve Neden Bu Kadar Populer?
Figma tarayici tabanli bir tasarim aracidir. Web siteleri, mobil uygulamalar, dashboard'lar ve arayuzler tasarlamak icin kullanilir. Ama Figma'yi ozel kilan sey tasarim yapma yeteneginden cok, ekip calismasi icin sunduklari.
Ilk kez Figma'yi uc yil once bir startup projesinde kullanmaya basladim. O zamana kadar Sketch kullaniyordum ve Mac'e bagimliydim. Ekibimizde Windows kullanan bir gelistirici vardi ve tasarimlari paylasmak icin surekli PNG export edip gonderiyorduk. Figma'ya gectigimizde gelistirici ayni dosyada canli olarak tasarimi gorebilir hale geldi. Bu tek basina inanilmaz bir verimlilik artisi sagladi.
Figma'nin populerliginin ana nedenleri sunlardir. Tarayicida calisiyor, kurulum gerektirmiyor. Ayni anda birden fazla kisi ayni dosya uzerinde calisabiliyor. Ucretsiz plani uc dosyaya kadar sinirli da olsa calisiyor. Prototipleme, tasarim sistemi ve gelistirici handoff hepsi tek aracta.
Ilk Adimlar: Arayuzu Taniyalim
Figma'yi ilk actiginizda birazcik bunaltici gorunebilir ama temel yapisi aslinda cok basit.
Sol tarafta katmanlar paneli var. Tum tasarim oegeleri burada listeleniyor. Sag tarafta ozellikler paneli var. Sectigniz ogenin rengi, boyutu, fontu ve diger ozellikleri burada duzenleniyor. Ust tarafta arac cubugu var. Sekil ciizme, metin ekleme, cerceve olusturma gibi temel araclar burada.
Frame kavramini anlamak Figma'nin temelini olusturur. Frame bir sayfa veya ekran icin bir cercevedir. iPhone 14 boyutunda bir frame olusturursaniz o frame icine tasariminizi yaparsniiz. Ben her projeye bir frame olusturarak basliyorum: masaustu icin 1440 piksel genislik, mobil icin 390 piksel genislik.
Ilk Tasariminizi Yapmak
Hadi basit bir kart bileseni tasarlayalim. Ilk olarak bir frame olusturun, 350 piksel genisliginde ve 400 piksel yuksekliginde. Arka plan rengini beyaz yapin. Frame'in icine bir dikdortgen cizin, bu gorsel alani olacak. Altina bir metin oegesi ekleyin, bu baslik olacak. Bir metin daha ekleyin, bu aciklama olacak. Son olarak bir dugme ekleyin.
Bu basit yapiya auto layout ekleyin. Auto layout oegeleri otomatik olarak duzenler ve aralari ayarlar. Sag panelde auto layout butonuna tiklayin ve frame'inizin ogelerini dikey olarak hizalayip aralari on alti piksel yapin. Artik bir oge silseniz veya ekleseniz diger ogeler otomatik ayarlaniyor.
Tasarim Sistemi Olusturmak
Profesyonel Figma kullaniminin temeli tasarim sistemidir. Renkler, fontlar, bilesenler ve stilller bir kez tanimlanir ve tum projede tutarli kullanilir.
Ilk projemde tasarim sistemi olusturmadim ve buyuk hata yaptigimi sonradan anladim. Musteri renk degisikligi istediginde yuzlerce ogeyi tek tek degistirmem gerekti. Ikinci projemde ilk is olarak tasarim sistemi kurdum ve ayni degisiklik otuz saniyede oldu.
Renk stilleri olusturmak icin: bir dikdortgen cizin, istediginiz rengi verin, sag paneldeki renk kutusuna tiklayin ve "Create style" deyin. Isim olarak "Primary/500" gibi bir isimlendirme kullanin. Boylece tum projede bu stili kullnidiginnda bir yerde rengi degistirseniz her yerde degisir.
Bilesenler (components) Figma'nin en guclu ozelligi. Bir dugme tasarlayin, sag tikla ve "Create component" deyin. Artik bu dugmeyi projenin her yerinde kullanabilirsiniz ve ana bileseni degistirdiginizde tum kopyalar otomatik guncellenir.
Variant ozelligi ile bir bilesenin farkli hallerini tanimlayabilirsiniz. Mesela bir dugmenin primary, secondary ve outline varyantlarini ayni bilesen icinde tanimlarsiniiz. Veya hover, active ve disabled durumlari icin ayri varyantlar olusturursunuz.
Prototipleme: Tasarimlarinizi Canlandirin
Figma'nin prototipleme ozelligi tasarimlarinizi tiklanabilir ve etkilesimli hale getirir. Musteriye veya ekibe "buraya tikladiginda su sayfa aciliyor" gostermek icin muhtesem.
Prototipleme cok basit: bir oegeyi secin, sag paneldeki "Prototype" sekmesine gecin ve o oegeden hedef frame'e bir ok cizin. Gecis animasyonunu secin: slide, dissolve, smart animate gibi. Artik sunum modunda o ogeye tikladiginizda hedef sayfaya gecis yapiliyor.
Smart Animate ozelligi oyun degistirici. Iki frame arasindaki ayni isimdeki oegeleri otomatik olarak animate eder. Mesela bir kart listesi sayfasindan kart detay sayfasina geciste kart gorseli buyuyerek gecis yapar. Bu mikro animasyonlar prototipinizi gercek bir uygulama gibi gosterir.
Gecen ay bir musteri sunumunda smart animate kullanarak hazirldigim prototip musterinin cok hosuna gitti. "Bu gercek uygulama mi" diye sordu. Henuz tek satir kod yazilmamisti ama prototip o kadar gercekci gorunuyordu ki.