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.
Ekip Calismasiyla Birlikte Tasarim
Figma'nin en buyuk avantaji ekip calismasi. Ayni dosyada birden fazla kisi ayni anda calisabiliyor. Google Docs'taki gibi dusunun ama tasarim icin.
Biz genelde soyle calisiyoruz: tasarimci ana sayfalari tasarliyor, ben icerik stratejisi icin metinleri dogrudan Figma'ya yaziyorum, gelistirici inspect modunda olculeri ve renk kodlarini aliyor. Hepimiz ayni anda ayni dosyadayiz ve birbirimizin imleicini gorebiliyoruz.
Yorum ozelligi de cok degerli. Tasarimin herhangi bir yerine tiklayin ve yorum birakin. "Bu baslik cok buyuk" veya "Bu renk marka kilavuzuna uymuyor" gibi geri bildirimler dogrudan tasarimin uzerinde yapiliyor. E-posta veya Slack ile geri bildirim gondermekten cok daha etkili.
Faydali Pluginler
Figma'nin plugin ekosistemi cok zengin ve bazi pluginler tasarim surecini inanilmaz hizlandiriyor.
Unsplash plugini dogrudan Figma icinden stok fotograf aramanizi ve eklemenizi sagliyor. Iconify binlerce ikon setinden ikon aramanizi ve tek tikla eklemenizi sagliyor. Content Reel gercekci isimler, adresler ve profil fotograflari ekleyerek tasarimlari daha gercekci gosteirmesi icin muhtesem. Autoflow kullanici akisi diyagramlari olusturmak icin harika.
Figma to Code pluginleri tasarimlari HTML, CSS veya React koduna donusturuyor. Mukemmel kod cikmasa da baslangic noktasi olarak cok kullanisli.
Dev Mode: Gelistiriciler Icin
Figma'nin Dev Mode ozelligi tasarimci ile gelistirici arasindaki kopruyu kuruyor. Gelistirici Dev Mode'da bir oegeye tikladiginzda CSS kodunu, olculeri, renk kodlarini ve font bilgilerini dogrudan gorebiliyor.
Bizim ekipte gelistiriciler artik "bu yazi tipi ne, bu renk kodu ne, bu padding kac piksel" diye sormuyor. Figma'dan dogrudan aliyorlar. Bu iletisim maliyetini sifira indirdi.
Ucretsiz vs Ucretli Plan
Figma'nin ucretsiz plani uc dosya ve siniirsiz kisisel taslak iceriyor. Ogrenciler ve bireysel kullanicilar icin yeterli. Professional plan kisi basina ayda on iki dolar ve sinirsiz dosya, tasarim sistemi kutuphaneleri ve gelismis prototipleme ozellikleri sunuyor. Organization plani buyuk ekipler icin kisi basina ayda kirk bes dolar.
Benim onerimi: ucretsiz planla baslayin ve ogrenin. Profesyonel projelere basladiginiizda Pro plana gecin. Fiyat performans orani cok iyi.
Figma'dan Once ve Sonra
Figma oncesi tasarim surecimiz soyle islliyordu: Sketch'te tasarla, Zeplin'e export et, gelsitiriciye Zeplin linkini gonder, geri bildirimleri e-postayla al, Sketch'te duzelt, tekrar export et. Bu dongu bir sayfa icin iki ile uc gun suruyordu.
Figma sonrasi: Figma'da tasarla, linki paylas, canli geri bildirim al, aninda duzelt. Ayni is yarim gunde bitiyor.
Sonuc
Figma modern dijital tasarimin standart aracidir. Tasarimci olmasaniz bile temel Figma bilgisi kariyer avantaji saglar. Urun yoneticileri, gelistiriciler, pazarlamcilar ve girisimciler icin Figma bilmek buyuk bir arti.
Sifirdan baslamak icin simdiki an en iyi zaman. Figma'nin ucretsiz planini acin, bir frame olusturun ve denemeeye baslayin. YouTube'da Figma Turkce egitim videolari da mevcut. Ilk hafta temel araclari ogrenin, ikinci hafta bir tasarim sistemi kurun, ucuncu hafta bir prototip yapin. Bir ay icinde profesyonel tasarimlar yapabilir hale geleceksiniz.