Figma - Sketch - Axure - Göreve Dayalı Bir İnceleme

Yakın tarihli bir Toptal bilgi grafiğinde: “En İyi UX Araçları”, çoğu bireysel UX tasarımcısının günlük görevlerine yardımcı olabilecek, piyasadaki çok çeşitli dijital tasarım araçlarını inceledik.

Öne çıkan araçlardan üçü, Sketch, Figma ve Axure, UX tasarım iş akışındaki belirli işlerde mükemmel oldukları için sadık takipçiler oluşturdu.

Ancak, bu araçların performansı , eldeki tasarım görevine bağlı olarak değişir. Tüm özelliklerini bir karşılaştırma tablosunda listelemek yerine, görev bazlı bir inceleme ile etkinliklerini belirleyeceğiz.

İşte rakiplere hızlı bir genel bakış:

• Lahey, NL merkezli Bohemian Coding tarafından eskiz. Sketch, yalnızca Mac'e özel bir uygulamadır.
• Figma, San Francisco, California merkezli Figma tarafından. Figma, bir tarayıcı aracılığıyla herhangi bir işletim sisteminde çalışır.
• San Diego, California merkezli Axure Software Solutions tarafından Axure. Axure'un Windows ve Mac sürümü vardır.

Her bir aracı, eklentiler, eklentiler veya üçüncü taraf uygulamalar olmadan , kullanıma hazır günlük tasarım görevlerini ne kadar iyi yerine getirdiğine göre puanlayacağız. Görevler şunları içerir:

1. Konsept Fikir Oluşturma
2. Düşük Kaliteli Teslimatlar Oluşturma
3. Yüksek Kaliteli Teslimatlar Oluşturma
4. Etkileşimli Prototipler Oluşturma
5. Tasarım Sistemi Oluşturma
6. Geliştirmeye Teslim

Not: Araçlar, bir görevi tamamlamak için gereken hemen hemen aynı özelliklere sahip olduğunda, kazanç, kullanımı daha kolay olan ve daha hızlı teslimat sağlayan araca gidecektir. Bu kararlılık çağrılamayacak kadar yakın görünüyorsa, üçüncü taraf desteği eşitliği bozar.

Görev: Konsept Fikir Oluşturma

Fikir oluşturma, yeni fikirler üretmek için yaratıcı bir süreçtir ve genellikle tasarımcılar, geliştiriciler, ürün sahipleri ve proje yöneticilerinden oluşan disiplinler arası gruplar tarafından yapılır.

Amaç, temel gereksinimleri ve halihazırda yapım aşamasında olan işleri göz önünde bulundurarak bir üründe kullanmak üzere yeni fikirler yaratmaktır. Örneğin, bir ekip, yeni bir uygulama için bir dizi MVP özelliği veya mevcut bir uygulamada yeni nesil özellikler oluşturmak için bir konsept fikir oluşturma oturumundan geçebilir.

Birçok tasarımcı bir beyaz tahta veya kağıt üzerinde konsept tasarımı yapar. Bununla birlikte, özellikle dağıtık ofislerde, fikir dijital olarak da yapılır. Konsept oluşturma bir takım sporudur ve ürün sahibi/yöneticileri ve ön uç geliştiriciler gibi tasarımcı olmayanları içerir. İşbirliğini teşvik eden ve kullanımı kolay araçlar bu görev için en iyisidir.

Kazanan: Figma

Sketch ve Axure, bulut paylaşım hizmetleri sunar, ancak ekranları ortak çalışanlarla gerçek zamanlı olarak paylaşmanın bir yolu yoktur.

Figma'da paylaşılan dosyalar gerçek zamanlı olarak birleştirilebilir ve her katılımcının etiketli imleci görüntülenir. Araç çubuğundaki temsili avatarlara tıklamak, görüşleri o kişinin bakış açısına göre değiştirir ve bir fikri hızlı bir şekilde paylaşmayı kolaylaştırır. Ek olarak, Figma tasarımcı olmayanların bir kopyaya sahip olmasını gerektirmez; dosya bağlantısını açarlar ve çalışmaya başlarlar.

Diğer beyaz tahta işbirliği araçları, konsept oluşturma için Mural ve Realtimeboard gibi Figma'dan daha uygun olabilir, ancak bir tasarım aracı için Figma, Sketch ve Axure'dan bir mil daha iyidir.

Görev: Aslına Uygun Çıktılar Oluşturma

Aslına uygun çıktılar genellikle diğer tasarımcılar ve ürün sahipleri tarafından dağıtılabilen ve gözden geçirilebilen tel çerçeveler veya dijital eskizler olarak üretilir. UX sürecine bağlı olarak, geliştiriciler ve diğer paydaşlar tarafından da görüntülenebilirler.

Tel çerçeveler, bir uygulamanın temel yapısını göstermek içindir, böylece yüksek kaliteli maketler oluşturmak için zaman harcamadan önce etkileşim modeli tanımlanabilir.

Aslına uygun tel çerçeveler oluşturmak, Balsamiq Mockups, Moqups ve FluidUI gibi göreve özel olarak ayrılmış araçlarla yapılabilir. Ancak Sketch, Axure ve Figma, özellikle kullanıcılar tel kafes bileşen kitaplıkları oluşturduğunda, hepsi aynı görevi yapabilir.

Tel çerçeveler genellikle bir uygulama veya sayfa için ilk kullanıcı arayüzü düzeni olarak hizmet ettiğinden, sıklıkla değişen tek renkli kaba kesimlerdir. Bu, paydaş beklentilerini kontrol altında tutmaya yardımcı olur.

Tel kafesler için kullanım kolaylığı, teslimat hızı ve modifikasyon esastır çünkü tasarımcıların değişken tasarımları verimli bir şekilde üretmelerine izin verir.

Kazanan: Axure

Axure, yazılımı kurduktan hemen sonra tel çerçeveleme için önceden paketlenmiş bileşenlere sahip olduğu için burada kazanıyor. Sketch ve Figma, tel kafesler oluşturmanıza izin veren araçlara sahiptir, ancak bir tel kafes bileşeni çizmeniz veya bunları içeren bir dosyayı indirmeniz gerekir. Her iki durumda da, Axure bileşenleri gibi sürükleyip bırakılmak üzere bir sembol (Sketch) veya bileşen (Figma) kitaplığına entegre edilmeleri gerekir.

Axure, düşük kaliteli çıktılar oluşturmak için birçok üçüncü taraf kitaplığına sahiptir ve Sketch indirilebilen çok sayıda ücretsiz ve ücretli dosyaya sahiptir, ancak Figma'nın kamu kaynakları hala yenidir.

Bir tasarımcı tel kafes bileşen kitaplıkları oluşturduğunda, üç araç eşit olarak eşleştirilir. Axure'un bileşenlerinin parametrik ve ayarlanabilir özelliklere sahip olduğunu unutmayın, ancak statik tel çerçeveler için, kitaplıklar mevcut olduğunda üç aracın tümü iyi performans gösterir.

Görev: Aslına Uygun Çıktılar Oluşturma

Yüksek kaliteli çıktılar, düşük kaliteli tel çerçevelerden toplanan geri bildirim ve öğrenmelerden doğar. Bir uygulama için renk, görsel ayrıntı ve önerilen son tasarımları gösteren maketlerdir.

Yüksek kaliteli aynı zamanda sunuma hazır olan ve müşterilere, şirket içi yöneticilere ve tasarımcı olmayan diğer paydaşlara gösterilen ekran maketleri anlamına gelir. Bu görevde mükemmel olan tasarım araçları, müşteriye dönük nihai çıktıların bir temsilini oluşturmak için gereken cilayı eklemek için gerekli tüm özelliklere sahiptir.

Buna nesne dolguları ve konturları üzerinde kontrol, gölgeler ve degrade dolgular gibi efektler ekleme ve resmi kolayca sindirilebilen bir formata (png, pdf, jpg) aktarma dahildir.

Kazanan: Figma

Sketch ve Figma, aslına uygun maketler oluşturabilen neredeyse aynı araç setlerine sahiptir, ancak Figma'nın etkileşim modeli daha rafinedir ve aracın kullanımı en baştan daha kolaydır. Her iki araç da Join, Intersect, Union ve Subtract gibi gelişmiş düzenleme ve boole komutlarına kolay erişime sahiptir. Sketch'in eklenti desteği, üçüncü tarafların ek özellikler oluşturmasına izin verirken, bu araçlar kurulumdan hemen sonra kullanılamaz.

Her üç aracın da özel nesne oluşturmaya izin veren özellikleri vardır, ancak Axure komutlara erişmeyi biraz zorlaştırır. Yukarıda bahsedilen düzenlemeler araç çubuğunda mevcut değildir. Erişim, yalnızca birden çok nesne seçildiğinde bağlam menüsü aracılığıyla elde edilir.

Ek olarak, Figma'nın vektör ağları, hat araçlarıyla çalışmayı çok kolaylaştırır.

Görev: Etkileşimli Prototipler Oluşturma

Etkileşimli prototipler, kağıt bir prototip kadar kaba veya yeni özellikleri keşfetmek için değiştirilmiş mevcut bir uygulamanın dallanmış bir sürümü kadar ayrıntılı olabilir. Tipik olarak, etkileşimli prototipler, kullanıcıların ekrandan ekrana gezinmesine ve menüler ve listeler gibi işlevleri kullanmasına izin verir.

Birçok tasarımcı için çalışmalarını sunarken basit bir etkileşimli slayt gösterisi yeterli olacaktır. Basit geçişler tasarımı açıklamak için yeterli cihaz etkileşimi sağladığından, bu özellikle mobil uygulamalar için geçerlidir.

Figma'nın prototipleme modeli iyi bir şekilde entegre edilmiştir ve kullanımı kolaydır ve gerçek zamanlı bulut tabanlı bir uygulama olduğu için bir dosya güncellendiğinde HTML sayfalarını yenilemeye gerek yoktur.

Bazen, paydaşlar bir tasarımın ölçeklenebilirliğini test etmek için bir prototipi gerçek dünya verileriyle yüklemek için canlı veri bağlantıları ister, ancak tasarımcıların büyük çoğunluğunun artık karmaşık prototiplere çok az ihtiyacı vardır.

Kazanan: Figma

Sketch ve Figma, "nesneden çalışma yüzeyine" bağlantı ve sınırlı bir dizi geçiş ile basit prototiplemeyi destekler. Pluginshelp, Sketch'in basit prototip oluşturma yeteneklerini destekler, ancak prototipler için sağlam bir etkileşim modeli sağlama söz konusu olduğunda Axure en güçlü olanıdır.

Görev: Bir Tasarım Sistemi Oluşturma

Tasarım sistemleri, UX tasarım alanında nispeten yeni olmakla birlikte, onlarca yıldır varlığını sürdürmektedir. Ekipleri işbirliği yapmaya ve daha iyi kararlar almaya teşvik eden ortak bir tasarım dili, bileşenler, kaynaklar ve yönergeler içerirler. Bir tasarım sistemi kitaplığı genellikle bir web sitesi olarak uygulanır ve tüm şirket genelinde bir ürün için tek gerçek kaynak görevi görür.

Kazanan: Figma

Bileşen kitaplıkları herhangi bir programda oluşturulabilirken, hiçbiri tasarımcıların bir anahtarı çevirmesine ve hareket halindeyken uygun bir bileşen kitaplığı oluşturmasına izin vermez. Axure, üzerinde özel bileşenler bulunan bir HTML sayfası oluşturabilir, ancak renk değerini, boyutu ve diğer özellikleri bulmak için tek bir bileşeni sorgulamanın bir yolu yoktur.

Bu araçlardan herhangi birini kullanarak bir tasarım sistemi oluşturmak hala manuel bir süreçtir. Bununla birlikte, Sketch için eklentiler (Google'ın yakın zamanda piyasaya sürülen Materyal Tasarımı eklentisi gibi) ve Figma için çalışmalarda en az bir üçüncü taraf aracı var.

Figma kazanır çünkü işbirliği iyi bir tasarım sisteminin merkezinde yer alır. Çeşitli disiplinlerden (tasarım, geliştirme, kalite, içerik) şirket çalışanlarının bir tasarım sistemi kitaplığına erişmesi gerekir ve birçoğu, paylaşılan kitaplığa eşitlenen tasarım bileşeni dosyasına ekleme yapacaktır. Figma, yalnızca bir lisans sahibi değil, herkes tarafından kullanılabilir, bu da paylaşılan bir dosyaya erişmeyi ve dosyaya eklemeyi zahmetsiz hale getirir.

Görev: Geliştirmeye Teslim Etme

UI tasarımcıları bir arayüz oluşturmayı bitirdiğinde, projenin tamamlanabilmesi için tasarım dosyalarını geliştiricilere devretmek onların sorumluluğundadır. Ancak devir, basit bir veri alışverişinden daha fazlasıdır, tasarımcılar için çalışmalarının gerekçesini iletmeleri ve böylece geliştiricilerin biçimle işlevi birleştirmelerine yardımcı olma fırsatıdır.

Sketch ve Figma dosyalarından redlineing ve nesne bilgisi sorgularını kolaylaştırmak için düzinelerce aktarma yöntemi ve hatta daha fazla üçüncü taraf aracı vardır (bkz. Avocode ve Zeplin). Ancak bu karşılaştırmada, eklentiler veya diğer uygulamalarla desteklenmeden önce orijinal tasarım aracına bakıyoruz.

İlginç bir şekilde, UX tasarım sistemlerinin yükselişi, yayınlanan bileşen kitaplıkları geliştirici için tek gerçek kaynağı olduğundan, bu tür aktarmaya olan ihtiyacı azaltır. Bir teslimat veya UX danışmanlığı beklemeden bileşenlerin tam yerleşim ve tasarım bilgilerini çıkarabilirler.

Ayrıca, bir tasarım dosyasındaki nesnelerden bilgi almak, bir tasarım sisteminin inşası sırasında yardımcı olabilir, bu nedenle CSS'nin bazı görünümleri iyi bir şeydir.

Sketch, nesneleri seçmenize ve “CSS Niteliklerini Kopyalamak” için bağlamsal bir menü kullanmanıza izin verir, ancak bu ideal değildir. Figma, özellikler panelinde seçilen nesneler için CSS, iOS veya Android değerleri üreten bir "Kod" sekmesi sağlayarak adil bir iş çıkarır (geliştiriciler bu özelliği salt görüntüleme veya prototip modunda kullanabilir).

Kazanan: Axure

Şu anda yalnızca Axure, bir elektronik tabloya aktarılmak üzere tamamen yayınlanabilir HTML dosyaları, Word Spesifikasyonları ve hatta CSV formatlı raporlar üreten güçlü "oluşturuculara" sahiptir. Sonuçlar bir tasarım kitaplığı olmasa da, uygulama yararlı geliştirici devir malzemeleri sağlar.

Genel Tasarım Aracı Birincisi: Figma

Rakamlarla Figma, öncelikle işbirlikçi doğası ve platformlar arası kullanılabilirliği nedeniyle bu karşılaştırmanın kazananıdır. Daha fazla ekip, ön uç geliştirme ve tasarım arasında daha sıkı entegrasyon gerektiren tasarım sistemlerini kullandığından, Figma'nın gerçek zamanlı işbirliği ve canlı gömme özelliği ona büyük bir avantaj sağlıyor. Olumsuz tarafı, Figma, güvenlik nedeniyle bir işletmede kullanılması yasaklanabilecek çevrimiçi bir uygulamadır.

Axure, önceden oluşturulmuş bileşenleri, güçlü etkileşimli prototip oluşturma özellikleri ve belge oluşturma ile kutudan çıktığı haliyle gücü nedeniyle ikinci sırada yer alıyor. Bir şirketin belirli bir özelliğin nasıl davrandığını görmek için gerçek dünya veri depolarına erişmesi gerektiğinde daha nadir durumlarda, Axure en iyi veya tek seçenektir.

Sketch sonuncu olabilir, ancak kullanıcılar araç için mevcut birçok eklenti ve kaynaktan yararlandığında, son derece güçlüdür ve bir tasarım grubunun ihtiyaçlarını karşılayacak şekilde uyarlanabilir. Buradaki uyarı, eklentilerin her Sketch güncellemesinden sonra güncellenmesi gerektiğidir ve yalnızca Mac uygulaması olarak Windows PC kullanan şirketler bunu kullanamaz.

Bu makalede incelenen araçların üçü de kendi başlarına güçlüdür. Ancak, her birinin sınırlamaları vardır. İş akışı ihtiyaçlarını belirlemek, her programın artılarını ve eksilerini tartmak ve uygun bir seçim yapmak bireysel tasarımcılara ve ekiplere kalmıştır.

Toptal Tasarım Blogunda daha fazla okuma:

• MVP'leri Hendekleyin, Minimum Uygulanabilir Prototipleri Benimseyin (MVPr)
• Bir Tasarım Aracı Olarak Figma'nın Gücü
• Eskiz Stil Kılavuzu, Kitaplık ve UI Kiti Nasıl Oluşturulur
• Tasarım Sistemlerini ve Kalıpları Anlama
• Tel Çerçeveye Ölüm. Doğrudan Yüksek Sadakat!