Figma nedir? Neden Figma Kullanmalıyız?

Figma, tasarım dünyasını kasıp kavuran en devrimci grafik düzenleme uygulamalarından biridir. Onu bu kadar çekici kılan şey, kullanımının ücretsiz olması.

Figma nedir? Neden Figma Kullanmalıyız?

Figma, tasarım dünyasını kasıp kavuran en devrimci grafik düzenleme uygulamalarından biridir. Onu bu kadar çekici kılan şey, kullanımının ücretsiz olması.

Bu merak uyandıran web tabanlı uygulamaya hala aşina değilseniz veya yazılımdan en iyi şekilde nasıl yararlanabileceğinize dair ipuçları arıyorsanız, doğru yere geldiniz.

Bu başlangıç ​​kılavuzunda, bazı eğitimleri ve video kılavuzlarını tek bir yerde özetliyoruz. Onları, Google'da saatlerce arama yapıp hayal kırıklığına uğramadan Figma hakkında bilmeniz gereken her şeyi öğrenmek için kullanabilirsiniz.

Başlayalım.

Figma nedir?

Figma , web tabanlı bir grafik düzenleme ve kullanıcı arayüzü tasarım uygulamasıdır. Wireframe web sitelerinden, mobil uygulama arayüzlerinin tasarlanmasına, prototip tasarımlarına, sosyal medya gönderilerinin hazırlanmasına ve aradaki her şeyden her türlü grafik tasarım işini yapmak için kullanabilirsiniz.

Figma, diğer grafik düzenleme araçlarından farklıdır. Esas olarak, doğrudan tarayıcınızda çalıştığı için. Bu, birden fazla lisans satın almak veya yazılım yüklemek zorunda kalmadan projelerinize erişebileceğiniz ve herhangi bir bilgisayardan veya platformdan tasarım yapmaya başlayabileceğiniz anlamına gelir.

Tasarımcıların bu uygulamayı sevmesinin bir başka nedeni de Figma'nın aynı anda 3 aktif proje oluşturup depolayabileceğiniz cömert ve ücretsiz bir plan sunmasıdır. Küçük projeleri öğrenmeniz, denemeniz ve üzerinde çalışmanız için fazlasıyla yeterli.

Neden Figma Kullanmalıyız

İlk önce temel bilgileri yoldan çıkaralım

Figma, gerçek zamanlı işbirliğine sahip web tabanlı bir tasarım aracıdır

Craft Freehand gibi ama Sketch'in tüm özellikleriyle (ve daha fazlası). Web tarayıcılarında çalışır ve çevrimdışı çalışmanıza izin veren yerel uygulamalar da vardır .

Web tabanlı neden iyi bir şeydir?

  • İndirilecek, yüklenecek ve sürekli güncellenecek bir yazılım yoktur.
  • Dosyalarınızı kaydetmenize ve düzenlemenize gerek yoktur. Çalışmanız otomatik olarak bulutta paylaşılan bir alana kaydedilir.
  • Tek bir URL, herkesin görebileceği gerçeğin kaynağı haline gelir. Bunun anlamı ...
  • PNG'leri birden çok yerde sürekli olarak yüklemeye, senkronize etmeye ve düzenlemeye gerek yoktur.

Fakat Figma yavaş mı?

Hayır p e. İnsanlar Figma'nın Sketch'ten daha performanslı olduğunu deneyimliyor. Büyük bir dosyayla çalışırken bile bu benim deneyimim oldu.

Peki ya Sketch ekosistemi? Sketch, iş akışımız için güvendiğimiz çok sayıda eklentiye sahiptir

Pekala, Figma kullanarak önemli bir şey kaybetmeyeceğimizi söylemek için buradayım; biz sadece kazanırdık.

Figma, Sketch + Abstract + InVision + Craft + Liveshare + Freehand + Zeplin + Dropbox'ın tüm özellik ve yeteneklerine ve bir grup daha fazlasına sahiptir. Figma'nın sahip olduğu özelliklerden bazıları şunlardır:

Benzer bir arayüz ve Sketch ile aynı çizim araçları.

  • Prototipleme. Figma, Craft + InVision'a benzer tıklanabilir bir prototip oluşturma özelliğine sahiptir.
  • Yerleşik Yorumlama. Bağlantıya sahip olan herkes, yorum yapmanın InVision'da nasıl çalıştığına benzer şekilde tasarımın herhangi bir yerine yorum ekleyebilir. İnsanları yorumlarda etiketleyebilir, yorumları çözüldü olarak işaretleyebilir ve hatta Slack ile entegre edebilirsiniz.
  • Geliştirici Handoff. Devs proje URL'sinden boyutları, stilleri ve indirme simgelerini ve resimleri alabilir. Zeplin'e benzer, ancak yine tasarımlarınızı her güncellediğinizde çalışma yüzeylerinizi senkronize etmeniz gerekmez.
  • Sürüm Kontrolü. Figma, tüm ortak çalışanlar için sürüm geçmişini içerir. Önceki bir duruma geri dönebilir veya çatallanabilirsiniz. Bu, bir Mac'teki zaman makinesi gibi çalışır. Çok Oyunculu İşbirliği. Birden çok kişi gerçek zamanlı olarak işbirliği yapabilir. Freehand'e benzer şekilde, hepimiz ekranda birbirimizin imleçlerini görüyoruz ve bir şeyler çizip yorum yapabiliyoruz.
  • Liveshare. Birinin avatarına tıklarsanız, onların ekranında gördüklerini görebilir ve imlecini takip edebilirsiniz. Bu, InVision Liveshare (RIP Liveshare) gibi çalışır. Bileşenler. Sketch'teki Sembollere benzer, ancak daha esnek ve tasarımı daha kolay. (Bununla ilgili daha fazla bilgi aşağıda)
  • Kısıtlamalar. Sketch'te Yeniden Boyutlandırmaya benzer, ancak daha sezgisel. Takım Kitaplıkları . Bileşen koleksiyonlarını projeler arasında paylaşabilir ve güncelleyebilirsiniz.
  • Bonus: Figma projelerini Dropbox Paper'a bile gömebilirsiniz.

Şimdi gerçekten güzel şeylere geçelim…

Figma, yukarıda bahsedilen özelliklerle tüm temelleri kapsar. Ancak iş akışımızı nasıl iyileştirdiğini düşündüğünüzde gerçekten ilginçleşiyor.

Aşağıda, Figma'nın çalışma şeklimizi temelden iyileştirebileceği dört yol bulunmaktadır.

1. Gerçek zamanlı işbirliği sayesinde YOLU daha hızlı yineleyebiliriz

Bir tasarım incelemesi yapabilir, anında güncellemeler yapabilir ve değişikliklerinizle ilgili anında geri bildirim alabilirsiniz. Yinelemeler arasındaki süre günlerden dakikalara kadar gidebilir, çünkü ekranları karşıya yüklemek veya senkronize etmek, paylaşım bağlantıları oluşturmak, bağlantılara bakmaları için insanlara mesaj göndermek vb. Bunu ilk elden deneyimlediğimde, o kadar şaşırtıcıydı ki, tek bir sevinç gözyaşı döktüm.

Aşağıda, çalışmayı en iyi zamanlarda yavaş ve sıkıcı, en kötü zamanlarda ise inanılmaz derecede sinir bozucu hale getirebilecek bazı gerçek hayat senaryoları bulunmaktadır. Figma kullanarak tüm bu senaryolar ortadan kalkar:

  • Tüm ekranlarınızı InVision ile senkronize ettikten sonra, bir başlık bileşeninde yazı tipi boyutunu biraz artırmak istediğinizi fark ettiğinizde, tasarım dosyanızda değişiklik yaparsınız ve ardından tüm ekranları InVision ile yeniden senkronize etmeniz gerekir.
  • Karmaşık, çok ekranlı bir prototipi InVision ile senkronize etmek için Craft'ı kullandığınızda ve ardından bir saat gibi hissettiren bir süreyi InVision'da doğru sırada sürükleyip bırakarak geçirmeniz gerektiğinde, Craft bunları rastgele bir sırayla yükler.
  • Başka bir zaman dilimindeki biri işini yüklemeyi veya yüklemeyi unuttuğunda, en son tasarımları almak için tekrar çevrimiçi olana kadar beklemeniz gerekir.
  • Bir yazılım güncellemesi olduğunda ve tüm 3. taraf eklentileri bozulduğunda ve saatler kaybedersiniz.

2. Tasarım sürecimiz daha kapsayıcı ve kusursuz hale geliyor

Birdenbire tasarım dosyası, herkesin buluşup tasarımlar hakkında tartışabileceği bir mekana dönüşüyor. Bu, tasarımcıların paralel olarak çalışmanın, seçenekleri keşfetmenin ve daha kısa artışlarla yinelemenin daha kolay olduğu anlamına gelir. Bu, geliştiricilerin teknik endişeleri bir an önce fark edip dile getirebileceği anlamına gelir ve bu, paydaşların, proje yöneticilerinin veya bağlantıya sahip herhangi birinin, büyük bir açıklama beklemek yerine tasarımın bir fikirden şık bir görsele nasıl geliştiğini görebileceği anlamına gelir.

Tasarım sürecini birden çok dosyaya bölmek yerine, artık tüm hikayeyi anlatabilecek ve tasarım süreci ilerledikçe gelişebilecek tek bir yer var.

3. Tasarımdan koda geçişimiz muhtemelen daha hızlı ve daha tutarlı olacaktır

Çünkü Figma ile tasarımlarımızı, bu tasarımların nasıl kodlanacağını yansıtacak şekilde yapılandırmak daha kolay.

Nedenini anlamak için çerçevelerin nasıl çalıştığını bilmeniz gerekir. Figma, çalışma yüzeyleri yerine çerçeveler kullanır. Çerçeveler farklıdır çünkü çerçeveleri bir çerçevenin içine yerleştirebilirsiniz. Daha büyük bir çerçevenin üzerine daha küçük bir çerçeve yerleştirdiğinizde, iki çerçeve otomatik olarak gruplanır ve daha küçük çerçeve, daha büyük olan ana çerçevenin alt öğesi olur. Çocuk çerçeveleri, ebeveynlerine göre konumlandırılır ve sınırlandırılır. Bu alışmak için biraz zaman alan şeylerden biri, ama sonra bir kez yaptığınızda, onsuz nasıl yaptığınızı merak ediyorsunuz.

Bir ekranı içerik alanlarına ayırmak için çerçeveleri kullanabilir ve daha sonra bileşenleri (kendileri bir grup iç içe geçmiş çerçevelerdir) bu bölümlerin içine yerleştirebilirsiniz. Otomatik gruplama, göreceli konumlandırma ve kısıtlamalarla birleştirilen bu yaklaşım, tutarlı ve duyarlı tasarımların hızla oluşturulmasını kolaylaştırır.

Figma'daki bir çerçeve HTML'deki bir kaba benzediği için bunun gibi çerçevelerin kullanılması geliştiriciler için faydalıdır. Geliştiriciler tasarımları incelediklerinde, ilgili kaplarında yuvalanmış UI öğelerini görebilecekler, bu da kodlarını yazarken başvurmak için daha doğru bir plana sahip olacakları anlamına geliyor.

Tasarımdan koda geçişimiz

4. Tasarım sistemlerimiz daha esnek ve tasarımı daha kolay olacak, bu da zamandan tasarruf edeceğimiz ve projeler arasında tutarlılık kazanacağımız anlamına geliyor

Sketch'in Sembolleri ve Figma'nın Bileşenleri vardır. Aradaki fark, bileşenlerin sembollerden daha esnek olmasıdır, bu da daha azıyla daha fazlasını yapabileceğimiz anlamına gelir, bu da onları parçalamak veya sıfırdan başlamak yerine gerçekten kullanmamız anlamına gelir.

Bileşenler nasıl sembollerden daha esnektir?

Sketch uygulamasında, metni düzenlemek veya iç içe sembolleri takas etmek için Sembol Geçersiz Kılmaları kullanabilirsiniz. Ancak başka herhangi bir şeyi değiştirmek istiyorsanız - örneğin metin boyutu, kenarlık kalınlığı veya arka plan rengi - Sembol'den Ayırmanız ve aynı UI öğesinin biraz farklı bir sürümünü oluşturmanız gerekir. Bunu çözmek için her varyasyonu tek bir sembole yerleştirebilirsiniz, ancak sonra cehennemden bir geçersiz kılmalar paneli elde edersiniz. Büyük projeler ve karmaşık kullanıcı arayüzleri ile, tüm permütasyonların düzenlenmesi ve bakımı hızla savunulamaz hale gelir.

Figma ile, bir bileşendeki herhangi bir katmanın özelliklerine onu ana bilgisayardan ayırmadan erişebilir ve bunları değiştirebilirsiniz. Aynı şey yuvalanmış bileşenler için de geçerlidir.Artık, ana bileşendeki bir katmanın bir özelliğini her değiştirdiğinizde, bu değişiklikler yalnızca o özelliğin zaten geçersiz kılınmadığı örneklere yayılacaktır.

Bence bu üç gif, nasıl çalıştığını görsel olarak açıklamak için iyi bir iş çıkarıyor.

1. Bir bileşen oluşturun ve ardından ana parçanın iki örneğini oluşturmak için kopyalayın.

2. Ana bileşendeki değişiklikler anında tüm örneklerine yayılır.

3. Master değiştirilse bile, geçersiz kılınan herhangi bir özellik geçersiz kılınacaktır.

Bileşenleri tasarlamak sembollerden daha kolay nasıl?

Her şeyden önce, bileşenleri oluştururken bir adlandırma yapısı (yani Simgeler / Arama) hakkında endişelenmenize gerek yoktur. Bir ana bileşeni daha sonra yeniden adlandırabilirsiniz ve bu, Sketch'teki durumu değil tüm örnekleri güncelleyecektir. Ve bir bileşen kategorisi oluşturmak için, bunları bir çerçeve içinde gruplandırmanız ve kategori ne olursa olsun bu çerçeveyi adlandırmanız yeterlidir. Bu, daha sonra bileşenleri sürükleyerek yeniden düzenlemenin kolay olduğu anlamına gelir. Benim için bu, hem bileşenleri yaratmanın hem de onları takip etmenin bilişsel yükünü gerçekten azalttı.

İkincisi, Figma'daki bileşenlere erişmek, Sketch'teki simgelere erişimden çok daha kolaydır. Bir kez daha, iç içe geçmiş sembol adları menüsünde gezinmek için bir adlandırma yapısı düşünmeniz gerekmez. Bunun yerine, bileşenleri bir küçük resim listesi olarak bulabilir (ve görebilirsiniz!). Bir ekrana bileşen eklemek veya bir örneği değiştirmek için, tuvale sürükleyip bırakmanız yeterlidir. Veya yeni bir örnek oluşturmak için ana bileşeni kopyalayıp yapıştırabilirsiniz - bunu Sketch'te yeni bir sembol oluşturmadan bile yapamazsınız.

Sonuç

Figma'yı ne kadar çok kullanırsak, onu sevmek için o kadar çok neden buluyoruz. Onunla çalışmaya başladığınızda keşfettiğiniz bir sürü ayrıntı var. Genel olarak, arayüz tasarımı için daha gelişmiş ve iyi düşünülmüş bir araç gibi hissediyor.

Ücretsiz vpn