figma

• 2020 yılında hala nasıl oluyor da bu ve benzerleri yapılan tasarımı bir tuşla html+css'e dökemiyor meraklar içerisindeyim. komponent mantığı ile çalışıldığı zaman elementlere ait her türlü veri de oluyor halbuki programın elinde. akla tek bir açıklama geliyor. (bkz: css lobisi)
• piyasadaki en iyi ux/ui design tool. animasyon da yapıyorsun, web sitesi prototipi de yapıyorsun, mobil app de yapıyorsun, instagram post vs görsel aklına gelebilecek hemen herşeyi yapıyorsun. bunları yaparken kullanılabilecek faydalı birkaç eklenti koyalım şuraya belki birilerine yardımcı olur.
  
  öncelikle plugin kullanırken, arattığımız pluginler listede görünüyor ama üzerine ekledikçe, alt sıralarda kaybolabiliyor. bunu önlemek için sık kullandığımız pluginlere save dememiz gerekiyor.
  
  edit on.
  ---html.to.design
  yeni keşfettiğim mükemmel bir eklenti. herhangi bir web sayfasının linkini giriyorsunuz, sayfayıolduğu gibi kodları ile birlikte figma dosyasında editlenebilir hale dönüştürüyor. nimet gibi mübarek.
  
  ---photopea
  figmanın içinde photoshop gibi fotoğraf düzenlemesi yapmanıza yarıyor bu da ayrı bir nimet.
  edit off.
  
  ---unsplash:
  en sık kullandığım eklenti. ücretsiz stock görsel sitesi olan unsplash.com'dan stock foto çekip şak diye ekrana koyuyorsunuz. rectangle, circle veya shape seçerseniz onun içine direkt şak diye yerleştiriyor. bulunmaz nimet. şak diye demiş miydim?
  
  ---iconify:
  binlerce ikon elinizin altında. her türlü vektör ikonu bulabileceğiniz, tematik vs kategorilere ayrılmış ikon kütüphanesi.
  
  ---breakpoints:
  responsive (duyarlı) tasarım yapan web tasarımcılar için muhteşem bir plugin. farklı cihaz genişlikleri için tasarladığınız frameleri boyutlarına göre plugine tanıtıyorsunuz ve developer toolda oynar gibi boyutlarla oynayıp responsive önizleme yapabiliyorsunuz. ücretli ama sanıyorum proje başına 1 kullanımlık ücretsiz gibi bir olayı var.
  
  ---webgradients:
  basit bir gradient oluşturma aracı. hazır gradientlerden seçip şekillere uygulayabiliyorsunuz.
  
  ---beautiful shadows:
  nesnelere gölge eklemek için kullanılabilecek güzel bir eklenti. nesneyi seçip eklentiyi açıyoruz, daha sonra eklenti ekranında ışık kaynağını oynatarak gölgeyi ayarlayabiliyoruz.
  
  ---ghost:
  mockup vs tasarlayanlar için çok kullanışlı bir araç. yaptığınız tasarımı gri tonunda veya gradient şeklinde basitleştiriyor. mesela yazıları gri barlar haline getiriyor, renkleri gri tonlarına çeviriyor.
  
  ---text volume:
  yaptığınız sayfa tasarımındaki text yoğunluğunu ölçüyor.
  
  ---blobs:
  böyle damla gibi ne idüğü belirsiz yağmur damlası kılıklı şekilleri yaratmak için mükemmel bir araç. bunun bir sürü versiyonu var. en basiti ve kullanışlısı blobs isimli olan.
  
  ---coolors:
  coolors.co adresinden de girilebilen bu eklenti en çok kullandıklarım arasında. renk paleti oluşturmaya yarayan bu araç efsane özellikleri ile anlat anlat bitmez. basitçe, size 5 renkten oluşan bir palet yaratıp bunu ekrana şak diye eklemenizi sağlıyor. seçtiğiniz renkleri kilitleyip kendinize özel paletler oluşturabiliyorsunuz.
  
  -happy ipsum:
  lorem ipsumdan sıkılanlar için bob ross dayımızın laflarıyla oluşturulmuş bir ipsum generator. kaç cümle ekleyeceğinizi seçiyorsunuz ve o size bob ross cümleleri hazırlıyor. şunun gibi:
  "this is your world, whatever makes you happy you can put in it. go crazy. maybe there's a happy little evergreen that lives here."
  
  eminim sizlerin de kullandığı çok faydalı eklentiler vardır, burada paylaşın biz de faydalanalım şu kutsal bilgi kaynağında.
• web tabanlı tasarım programı. mac'de bulunan sketch programına aşırı derecede benzemektedir. hatta ve hatta desktop uygulamaları da bulunmaktadır. ve ve ve .sketch uzantılı dosyaları da import ederek rahatlıkla kullanabilirsiniz. üstelik windowsta da var. bu zamana kadar sözlüğe nasıl yazılmamış ilginç.
  
  edit : fakirlikten bulduğum bu programın bu denli popüler olması mutluluk verici.
• tasarım kariyerimi ikiye ayırmama sebep olan program; figma'dan önce ve figma'dan sonra.
  
  bak photoshop bil, xd bil, illustrator bil, indesign bil hepsi okey. hepsi güzel şeyler. ama figma'sız bir proje düşünemiyorum. olmaz olamaz. arayüz css front end falan herkes figma'yla yapıyor ama ben artık işi başka boyuta taşıdım; afişleri posterleri infografikleri bile ek program kullanmadan sadece bununla hallediyorum. lan geçen gün el yazımla font temelli logo yaptım hem de adobe ürünlerini çalıştırmadan. photoshop uyuz eklentilerini açana kadar figma'dan bulup svg olarak kopyalayıp photoshop'a yapıştırıyorum. programdaki taşağa bak aq. illustrator'un kaydederken götü başı dağıttığı formatları figma bam bam exportluyor. figma'sız geçirdiğim günlerimi hatırladıkça kendime acıyorum lan.
  
  figma'yı -özellikle plugin'leriyle birlikte- doğru kullanan bir insanın hayattan alacağı keyif ile bodrum koylarına demirlemiş yelkenlisinde ay ışığı altında sevişen bir insanın hayattan alacağı keyif hemen hemen yakındır.
• yukardaki entry istinaden cevap yazacağım. biraz uzun olabilir herkes faydalansın. adobe xd, sketch ve figma'yı aktif olarak kullanıyorum. tasarımcıyım diyen bence hepsini aktif kullanmasa da mutlaka göz atmasında fayda var. hepsinin farklı özellikleri var.
  
  fakat figma; sketch ve adobe xd'yi çok iyi analiz etmiş ve tüm bileşenlerini kendinde toplamayı başarmış. bu yüzden adını çok fazla duyuyuyoruz.
  
  figma sistemi en düşük makinede bile çalışır ve bulut tabanlı olması işleri çok kolaylaştırıyor. kullanımı ve öğrenilmesi çok basit. ekip için aslında olması gereken tüm özellikleri karşılıyor. figma'nın bu kadar biranda popüler olmasının sebebi aslında inanılmaz reklam çalışmalarına dayanır. sonra arkasında çok iyi koordine edilmiş tasarımcı topluluğu var. community ile kaynaklara çok kolay ulaşabilirsiniz. ve pluginleri inanılmaz çok. sırt ağrısına iyi gelen plugin bile var :) freelance işleriniz için kullanacaksanız free plan her türlü işinizi görür seviyede. bu çok büyük artı en azından ülkemiz için.
  
  öff çok iyi bir toolmuş demeyin çok fazla eksiklikleride var bu uygulamanın. mesela sıkça karşılaştığım en temel problemlerden birisi tasarımları folder olarak gruplama yapısı. draft bölümünde ki çalışmalar 15-20'yi geçiyorsa orası kaos oluyor. işin içinden çıkmanız için kendinizce teknik oluşturmanız gerekiyor. tasarımdan sonra ki adım kodlama aşaması için zeplin kadar başarılı değil. yani bence şirketlerin imkanı var ise zeplini aradan çıkartmasın. özellikle mobile app yaparken iconlar inanılmaz saçmalıyor. zeplin onu çözmüş android ölçüleri özellikle. sonra bir link atıyorsunuz 2. şahısa şurda ki tasarımlara göz atarmısınız diye 100 sayfa varsa 100 sayfayıda görüyor sadece şu sayfayı %100 ölçekte odaklaması yok. bunları geliştirmesi gerekiyor.
  
  figmaya notum 10 üzerinden 8,5
  
  adobe xd gerçekten çok kullanmak istediğim ama bir türlü aptal saptal sorunlardan kurtulamadığı bir uygulama. photoshop, illustrator ile mükemmel uyumu ui yaparken inanılmaz kolaylıkları var. sorunlarını yazsam fatih sultan mehmet'e mektup olur. ancak prototipte bir numara açık ara. layer mask bir türlü beceremiyorlar. sketch ve figma çok iyi o konuda. koca adobe havlu atmış gibi duruyor.
  
  adobe xdye notum 10 üzerinden 5
  
  sketch çok soft ve gerçekten olmuş bir uygulama. tasarım konusunda hatta photoshopu tahtından indirip adobeye zorla xd çıkartan bir uygulama. bu olmasaydı diğer toollar olmazdı buna eminim. çok stabil çalışır asla tasarımcıyı üzmez ama elinizde 2015 mac ve altı makina varsa geçmiş olsun makineye et atıp pişirebilirsiniz. son zamanlarda cloud çalışmaları var hatta şuan yayında ama malesef başarısız. sketch aslında sadece macos'ta çalışacağız diye kendini bitiriyor. diğer platformlarda çalışmıyor ve ücretli.
  
  sketche notum 10 üzerinden 7
  
  toparlamak gerekirse figma kullanın fakat diğerlerinide gözardı etmeyin.
• temel düzeyde css bilgisi edinildikten sonra öğrenilmesi gereken ve front-end alanında ayrıcalık sunacak bir program olduğunu düşünüyorum.
  
  css öğrenirken, izlediğim videolarda adamlar hep ezberden şuna şu kadar margin buna şu kadar padding veriyoruz diyenleri veya neden navbar orada oluyor? neden genişliği o kadar gibi sorularla hep sorgulamıştım.
  bireysel olarak proje yaparken bu konuda çok zorlanıyordum.
  
  figmayı öğrendikten sonra oluşturduğum projeyi css'e dökmek daha kolaylaştı.
  her şeyi baştan belirliyorsun. yazı tipim şu olacak onun yeri burası margin padding oranları belli geriye kodu yazmak kalıyor.
  
  biri de çıkıp demedi css'i öğrendikten sonra figma ya göz at die.
• web tabanlı tasarım programı. css yazarken büyük kolaylıklar sağlayan bir yandan da bu css'i otomatik olarak nasıl bize vermiyor diye aklıma deli sorular sokan uygulamadır.ama öyle olursa front-end developerlar taş mı yesin değil mi
  
  edit: bu konuda webflow'u önerdiler(@diagon nick'li yazar)
  edit2: zeplin'i de önerdiler(@zizin nick'li yazar)
• adobe'nin figma'yi asil satin almasinin sebebi, adobe'nin urunlerini tamamen web ortaminda kullanilabilir forma sokmaktir. yani nasil ki microsoft office ve google urunlerini tamamen web uzerinden kullaniyorsunuz, adobe de bunu yapmak istiyor. bu yuzden web ve bulut ortaminda uzmanlasmis figma ekibini kendi stratejisini uygulamak icin kullanacak.
  
  tarayici tabanli hizmetler(saas) ne sunuyor peki?
  kurulum gerektirmeden ve coklu kullanicilari ayni anda uygulamayi kullandirarak etkilesim sunuyor, ayni zamanda genis kitlelere kolayca paylasilmasini sagliyor.
  bugun bir adobe photoshop dosyasini uygulama kurulu olmadan duzenleyemezsiniz.
  adobe de bu isi artik bulut ortaminda, platform bagimsiz yapmak istiyor.
  
  asagidaki metni okursaniz, asil vurguyu anlayabilirsiniz.
  -------------------------------
  https://news.adobe.com/…built,and%20ceo%2c%20figma.
  
  ınspiring and empowering the designer and developer community
  
  adobe’s vibrant creative community has been a driving force in inspiring the company’s continuous innovation. figma has a passionate community who develop and share everything from tutorials to templates to plug-ins with their large and growing ecosystem. the combination of adobe’s and figma’s communities will bring designers and developers closer together to unlock the future of collaborative design.
  
  “figma has built a phenomenal product design platform on the web,” said david wadhwani, president of adobe’s digital media business. “we look forward to partnering with their incredible team and vibrant community to accelerate our joint mission to reimagine the future of creativity and productivity.”
  
  "with adobe's amazing innovation and expertise, especially in 3d, video, vector, imaging and fonts, we can further reimagine end-to-end product design in the browser, while building new tools and spaces to empower customers to design products faster and more easily,” said dylan field, co-founder and ceo, figma.
• apple, yeni işletim sistemleri ios 17 ve ipados 17'nin tasarım kitini figma'da herkese açık olarak yayınladı. diğer işletim sistemlerinin de geleceği şimdiden duyuruldu. böylece ilk official adım geldi
• almanya'da yazilim dünyasi %90 bununla calisiyor. it projelerinde calisan, yazilimla hicbir alakasi olmayan, proje müdürleri bile bunun icini disini biliyorlar, o derece. fiilen tekel olmus durumda. tarayici üzerinden birkac dakikada bir app projesinin tüm ui-akisini olusturup ekiple paylasmanizi mümkün kiliyor. kütüphane olusturup objelerin "instance" kopyalariyla calisiyorsunuz ve günün sonunda bazi ui-elementlerinin özelliklerini degistirmek istediginizde sadece kütüphanedeki objeyi güncelliyorsunuz, tüm örnekleri tek tek güncellemeye gerek kalmiyor, figma ui ekranlarini otomatik güncelliyor. youtube üzerinden beginner tutorial'larini izleyerek yarim günde ögrenebiliyorsunuz.
  
  özetle, aplikasyon isini iyi yapiyor.