2016 yılından beri öne çıkan arayüz uygulamaları olan Figma ve Adobe XD’nin rekabeti son yıllarda iyice gün yüzüne çıkmış durumda. Figma’nın kullanımı kolaylaştıran küçük detayları ve kullanıcı dostu arayüzü, yaklaşık 4 milyon tasarımcının Adobe Creative Cloud paketinde Photoshop ve Illustrator gibi diğer tasarım programlarıyla birlikte gelen Adobe XD’den vazgeçip ayrıca para ödeyerek Figma üyeliği satın almasına sebep oldu. Figma’nın ücretsiz bir şekilde 3 projeye kadar tasarım imkanı tanıması ve ve bazı temel özellikleri sunması, kullanım için Creative Cloud paketini edinmeyi zorunlu kılan rakibi Adobe XD’ye karşı elde ettiği avantajlardan bir diğeriydi.

Bildiğiniz gibi geçtiğimiz aylarda nihayet Adobe, arayüz tasarımı alanında ezeli rakibi olan Figma’yı yaklaşık 20 milyar dolara satın aldı. Adobe’un Adobe XD uygulamasını uzun zamandır Figma’ya alternatif olarak konumlandırmasına rağmen bu satın almayı gerçekleştirmesi akıllara yenemiyorsan satın al mottosunu getirdi :). Adobe’un Figma’yı gelecek dönemde Creative Cloud tarifelerine dahil mi edeceği yoksa ayrı bir ürün olarak mı sunmayı sürdüreceği merak konusu. O halde gelin hep birlikte Adobe XD ile karşılaştırmalı olarak Figma’yı Figma yapan özelliklerden biraz bahsedelim.

Çoğu tasarımcının takım çalışmasına imkan tanıyan en iyi uygulama olarak kabul ettiği Figma, tarayıcı üzerinde çalışma imkanı sağlayan, bulut tabanlı arayüz ve vektörel tasarımı aracı. Ugulama temel olarak prototip, kod üretimi, vektörel tasarım gibi ihtiyaç duyulan tüm özellikleri tasarımcıların kullanımına açıyor.

Figma’yı Adobe XD’den Ayıran Özellikler

Figma ilk bakışta bir prototip aracı gibi görünse de kendini rakip uygulamalardan ayıran birtakım özellikler barındırıyor:

• Figma product design süreçlerine yardımcı olan bir arayüz tasarım aracı.
• Geniş ve uygulama içine entegre olmuş Community, kullanıcılara tasarım süreçlerinde ihtiyaç duydukları font, ikon, illüstrasyon ve daha birçok eklentiye ulaşma imkanı sağlıyor. Figma Community’nin Adobe XD kütüphanesinden daha aktif kullanılması da Figma kullanıcılarının çok daha geniş bir eklenti ekosistemine erişmesine olanak tanıyor.
• Bir arayüz projesi için olmazsa olmazlardan olan bileşen kütüphanesi oluşturmak Figma’da rahatlıkla uygulanabilen bir süreç. Ayrıca kullanıcılar Community’de diğer kullanıcıların oluşturdukları bileşen kütüphanelerini ve diğer plugin’leri kendi projelerine ekleyip kullanabiliyor. Adobe XD de Figma’da olduğu gibi bir plugin hizmeti mevcut fakat kullanıcıların plugin yüklemeleri için Adobe uygulaması olan Creative Cloud uygulamasını açıp diledikleri plugin’i bu uygulama üzerinden Adobe XD’ye eklemeleri gerekmekte. Figma’da ise başka bir uygulama çalıştırmaya gerek kalmadan, tasarım dosyası içindeki Resources butonu yardımıyla istenen component, plugin veya widget mevcut projede çalıştırılabiliyor. Böylece tasarım süreci sekteye uğramamış oluyor.
• Figma’yı Adobe XD’den ayıran bir diğer özellik hem tarayıcıdan hem de masaüstüne indirilebilen uygulamadan erişilebiliyor olması. Çevrimdışı tasarım özelliği sayesinde internet bağlantısı kesilse dahi kullanıcılar tasarımlarına kaldığı yerden devam edebiliyor ve internet bağlantısı tekrar sağlandığında yapılan tüm değişiklikler buluta kaydediliyor.
• Diğer kullanıcılarla iş birliği içerisinde tasarım yapmak Figma’da çok kolay ve bunun için birçok özellik bulunuyor. Bunlardan ilki yorum özelliği. Figma’da, tasarıma diğer kullanıcılar tarafından yapılmış yorumlar uygulama içinde bir panelle görüntülenebiliyor. Böylelikle tasarımcı yorumlardaki geri dönüşleri anında tasarıma uygulayabiliyor. Fakat Adobe XD’de böyle bir özellik bulunmuyor. Yorumları görüntülemek için uygulama içinde üretilmiş link ile tarayıcıyı açmak ve yorumları tarayıcı üzerinde görüntülemek gerekiyor. Bu durumda tasarımcının, geri dönüşleri tasarıma uygulamak için Adobe XD masaüstü uygulamasıyla tarayıcı arasında mekik dokuması gerekiyor veya benim uyguladığım daha ilkel bir yöntem olan, yorumları kopyalayıp uygulama içinde boş bir alana kopyalama yoluna başvurabiliyor :). Ayrıca dosya sahibinin erişim izni verdiği sınırsız sayıdaki kullanıcı aynı dosya üzerinde rollerine göre çalışabilir. Eğer kullanıcının rolü sadece görüntülemeye imkan tanıyorsa düzenleme yapamaz. Fakat rol, düzenlemeye izin veriyorsa kullanıcı dosyada istediği değişikliği yapabilir. Birlikte tasarım yapmayı kolaylaştıran ve Adobe XD’de bulunmayan bir diğer özellik ise ‘’Talk it through with audio’’. Bu özellik sayesinde aynı tasarım dosyası üzerinde çalışan birden fazla kullanıcı sesli sohbet edebiliyor ve yazıyla saatler sürebilecek geri dönüşlerini konuşarak birbirlerine iletebiliyor.
• Bildiğiniz üzere tasarımcıların geçmiş tasarımları saklamak ve gerektiğinde bu tasarımlara ulaşmak için başvurdukları bir yöntem var, tasarım versiyonlarını ayrı dosyalarda tutmak. Tasarım versiyonlarını ayrı dosyalarda tutmak hem alan kullanımı açısından maliyetli bir çözüm, hem de kullanılabilirlik bağlamında efektif değil. Figma bu duruma zekice bir çözüm getirmiş. Tasarım dosyasının içerisindeki Version History paneli, dosyanın tüm kaydedilmiş versiyonlarını gösteriyor. Bu aslında Adobe XD’nin de sunduğu bir özellik, ancak Adobe XD sadece bulutta kaydedilmiş dosyalarda versiyon tutabiliyor. Fakat Figma bununla da kalmayıp bu versiyonları isimlendirmeye, çoğaltmaya ve bu versiyonlara uygulamayı kapatmadan aynı sayfa içinde erişebilmeye imkan tanıyor. Böylece kullanıcılar geçmiş versiyonlara giderek yaptıkları değişiklikleri bu versiyonların üzerine kaydedebiliyor.
• Figma, kod üretimi ve paylaşımı noktasında da önemli avantajlara sahip. Adobe XD, CSS kodlarının ancak dosyanın development linki üretildiğinde alınabilmesine izin veren, dosya üzerinde değişiklik yapıldığında bu değişikliklerin kodlara yansıması için yeni bir kod üretilmesini şart koşan bir yapıya sahip. Fakat Figma’da CSS, Swift ve XML kodları herhangi bir development linki üretilmesine gerek kalmadan, dosyada en ufak bir değişiklik olduğunda otomatik olarak yenileniyor. Bu da tasarımcıların link paylaşımında hata yapma şansını sıfıra indirgiyor.

Figma’nın Sunduğu Kolaylıklar

Figma’nın tasarım sırasında kullanıcılara sunduğu küçük kolaylıklar da en az yukarıda sıraladıklarımız kadar konuşmaya değer:

• Bunlardan ilki Effects. Effects; drop shadow, inner shadow ve blur gibi birçok özelliğin parametrelerini sonraki kullanımlar için kaydetmeye yarıyor. Diğer bir deyişle bir nevi Microsoft Word’deki style özelliği gibi çalıştığı söylenebilir. Örneğin bir şekle X:0, Y:4 drop shadow verildiğinde bu parametreler kaydedilebilir ve sonraki şekle istendiğinde aynı drop shadow bir tıkla verilebilir. Adobe XD’de yer almayan bu özellik tekrarlanan tasarımlarda tasarımcılara büyük kolaylık sağlıyor.
• Bir diğer özellik olan Frames Figma’nın bel kemiğini oluşturuyor. Adobe XD’de tam karşılığı olmayan fakat artboard’a benzetebileceğimiz Frame’i belli bir obje kümesinin arka planında bulunan kanvas olarak tanımlayabiliriz. Belirli bir cihaz veya ekran boyutu için responsive tasarım yapılıyorsa container görevini icra eden Frame tam olarak aranan bir özellik. Örneğin bir Frame’in üzerine text, şekil veya aklımıza gelebilecek herhangi bir tasarım objesini bıraktığımızda ilgili obje Frame’in child’ı oluyor ve otomatik olarak gruplanıyor. Frame ve içindeki objeler gruplandıktan sonra ihtiyaca göre Frame’in boyutu değiştiğinde içindeki objelerin de oransal olarak boyutunun değişmesini sağlayan Auto Layout özelliği, yine Frame’in boyutu değiştiğinde Frame’in içerisindeki objelerin konumunun nasıl olması gerektiğini belirleyen Constraints özelliği ya da prototip özelliği eklenebiliyor. Kısacası Adobe XD’de tasarımcıların manuel olarak gruplamayla elde ettikleri kümeler, Figma’nın Frame özelliği ile çok daha hızlı ve pratik bir biçimde yaratılabiliyor.
• Figma’nın sunduğu ve bahsetmeden geçilmemesi gerek son özellikler ise Auto Stack ve Auto Margin özelliği. Adobe XD’de tasarımcıların, objelerin yerini değiştirdiğinde birbirlerinin eski konumuna yerleşmesini sağlayan Stack özelliğini kullanabilmeleri için ilgili objeleri grup yapmaları, ardından sağ panelden bu özelliği etkinleştirmeleri gerekiyor. Objelerin arasındaki boşlukları otomatik olarak ayarlamak için de yine grup yapılıp Padding özelliğinin aktifleştirilmesi gerek. Fakat Figma yine bir adım önde giderek bu süreci basitleştiriyor. İki objenin yerini değiştirip birbirlerinin eski konumlarına yerleşmelerini sağlamak için yapmamız gereken tek şey, ilgili objeler seçiliyken birini diğerinin üzerine taşımak. Yine birden fazla objeyi seçip birbirleri arasındaki boşlukları gruplamaya ve herhangi bir Padding özelliğini aktifleştirmeye gerek kalmadan ayarlamak mümkün.

Sonuç olarak Adobe’un Figma’yı satın almasıyla XD ve Figma arasındaki rekabet her ne kadar azalacak olsa da, bu rekabette tasarımcıların bir arayüz tasarlarken ihtiyaç duydukları neredeyse her şeyi Adobe XD’nin aksine her zaman sunan Figma hep birkaç adım öndeydi. Baştan aşağı tasarımcıların iş birliğini ön planda tutan, tasarımcıların ihtiyaç duyduklarının farkında olmadıkları özellikleri her zaman onların kullanımına sunan Figma, daha uzun yıllar arayüz projelerinin vazgeçilmez bir parçası olacağa benziyor.