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.
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.
Figma ile CRM Yazılımı Tasarlama
Figma, kullanıcı arayüzü (UI) ve kullanıcı deneyimi (UX) tasarımı için popüler bir araçtır. Bu yazıda, Figma kullanarak bir CRM yazılımı tasarlamak için bazı temel adımları ele alacağız.
Araştırma yapın: Tasarım yapmadan önce, hedef kitlenizi, sektörünüzü ve müşteri ihtiyaçlarınızı anlamak için araştırma yapmanız gerekir. CRM yazılımı tasarlarken, müşteri yönetimi, satış yönetimi, pazarlama yönetimi ve raporlama gibi temel özellikler üzerinde durmanız gerekecektir. Bu özellikleri ve bunların kullanıcılardaki ihtiyaçlarını anlamak için müşterilerle görüşmeler yapabilirsiniz.
Kullanıcı arayüzü tasarımına başlayın: Figma'yı kullanarak, tasarımın ana hatlarını çizmek için bir taslak oluşturabilirsiniz. Bu taslak, kullanıcı arayüzü tasarımının temelini oluşturacaktır. Kullanıcı arayüzü, kullanıcılara CRM yazılımını kullanırken yönlendirecekleri yol haritasıdır. Bu nedenle, kullanıcı dostu bir arayüz tasarımı yapmak önemlidir.
İyi bir renk paleti seçin: CRM yazılımı tasarlarken, renk paleti kullanımı önemlidir. Renkler, kullanıcılarda farklı duygular uyandırabilir ve tasarımınızın algılanmasını etkileyebilir. Renkleri kullanırken markanızın renklerini veya müşteri ihtiyaçlarını dikkate alabilirsiniz.
Doğru yazı tipi kullanın: CRM yazılımı tasarlarken, doğru yazı tipi seçimi önemlidir. Yazı tipi, kullanıcıların okumayı kolaylaştırır ve yazılımın algılanmasını etkiler. Yazı tipi seçimi yaparken kullanılacak yazılımın amacını ve hedef kitlenin ihtiyaçlarını dikkate almanız gerekir.
İşlevsel bir tasarım oluşturun: CRM yazılımı tasarlarken, kullanıcının yazılımı kullanırken kolayca işlem yapabilmesini sağlamak önemlidir. Bu nedenle, tasarımınızın işlevsel olması gerekiyor. Bu, kullanıcının işlemlerini hızlı bir şekilde tamamlayabilmesini sağlayacak ve müşteri ilişkileri yönetiminde daha etkili olacaktır.
Test edin ve iyileştirin: Tasarımınızın kullanımı sırasında oluşabilecek hataları önlemek için tasarımınızı test edebilirsiniz. Testler, kullanıcılardan geri bildirimler almanızı sağlar ve tasarımınızı geliştirmeniz. Test aşamasında, kullanıcıların yazılımınızın hangi özelliklerini kullanıp hangi özelliklerinin zayıf olduğunu veya daha fazla geliştirilmesi gerektiğini görebilirsiniz. Bu geri bildirimler doğrultusunda tasarımınızı iyileştirip kullanıcıların daha iyi bir deneyim yaşamasını sağlayabilirsiniz.
Kullanım kılavuzu hazırlayın: CRM yazılımınızın kullanıcılar tarafından kolayca kullanılması için bir kullanım kılavuzu hazırlayabilirsiniz. Kullanım kılavuzu, yazılımınızın nasıl kullanılacağına dair adım adım talimatlar içermelidir. Bu, kullanıcıların yazılımınızın tüm özelliklerini doğru bir şekilde kullanmalarını sağlayacak ve yazılımınızın müşteri yönetimi, satış yönetimi ve pazarlama yönetimi gibi işlevlerini daha etkili bir şekilde kullanmalarına yardımcı olacaktır.
Geri bildirimleri takip edin: CRM yazılımınızı kullanan kullanıcılardan sürekli geri bildirim almanız gerekir. Bu geri bildirimler, yazılımınızın performansı hakkında size fikir verecek ve yazılımınızın müşteri ihtiyaçlarına uygunluğunu kontrol etmenizi sağlayacaktır. Kullanıcıların geri bildirimlerini düzenli olarak takip ederek, yazılımınızı sürekli olarak geliştirebilir ve kullanıcıların müşteri yönetimi, satış yönetimi ve pazarlama yönetimi gibi işlevlerini daha etkili bir şekilde kullanmalarına yardımcı olabilirsiniz.
Figma kullanarak bir CRM yazılımı tasarlamak için yukarıda bahsedilen temel adımları izleyebilirsiniz. Tasarımınızın kullanıcılara kolay bir deneyim sunması ve müşteri yönetimi, satış yönetimi ve pazarlama yönetimi gibi işlevlerini daha etkili bir şekilde kullanmalarına yardımcı olması önemlidir. Düzenli olarak geri bildirimleri takip ederek ve tasarımınızı sürekli olarak geliştirerek, müşterilerinizi daha iyi yönetebilir ve işletmenizin büyümesine yardımcı olabilirsiniz.
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.
Figma'nın en önemli özelliklerinden biri, bulut tabanlı bir hizmet olarak çalışmasıdır. Bu, kullanıcıların herhangi bir yerden ve herhangi bir cihazdan Figma'ya erişebilmelerini ve birlikte çalışabilmelerini sağlar. Figma, birden çok kullanıcının aynı projede çalışmasına olanak tanıyan gerçek zamanlı işbirliği özelliğine de sahiptir. Bu, bir kullanıcının yaptığı herhangi bir değişikliğin, diğer kullanıcıların çalışmalarında anında görünür hale gelmesi anlamına gelir.