Figma vs. Sketch vs. Axure – Tinjauan Berbasis Tugas

Dalam infografis Toptal baru-baru ini: "Alat UX Terbaik," kami memeriksa beragam alat desain digital di pasar, yang sebagian besar mampu membantu tugas sehari-hari dari masing-masing desainer UX.

Tiga dari alat yang ditampilkan, Sketch, Figma, dan Axure, telah menghasilkan pengikut setia karena mereka unggul dalam pekerjaan tertentu dalam alur kerja desain UX.

Namun, kinerja alat ini bervariasi tergantung pada tugas desain yang ada . Alih-alih mencantumkan semua fiturnya dalam tabel perbandingan, kami akan menentukan keefektifannya dengan tinjauan berbasis tugas.

Berikut adalah gambaran singkat dari para pesaing:

• Sketsa oleh Bohemian Coding yang berbasis di Den Haag, NL. Sketch adalah aplikasi khusus Mac.
• Figma oleh Figma yang berbasis di San Francisco, California. Figma berjalan di sistem operasi apa pun melalui browser.
• Axure oleh Axure Software Solutions yang berbasis di San Diego, California. Axure memiliki versi Windows dan Mac.

Kami akan menilai setiap alat berdasarkan seberapa baik ia melakukan tugas desain sehari-hari di luar kotak— tanpa plugin, add-on, atau aplikasi pihak ketiga. Tugas tersebut meliputi:

1. Melakukan Ide Ide
2. Membuat Hasil Kerja dengan Kesetiaan Rendah
3. Membuat Hasil Kerja dengan Kesetiaan Tinggi
4. Membuat Prototipe Interaktif
5. Membuat Sistem Desain
6. Menyampaikan ke Pembangunan

Catatan: Ketika alat memiliki fitur yang hampir identik yang dibutuhkan untuk menyelesaikan tugas, kemenangan akan jatuh ke alat yang lebih mudah digunakan dan memberikan pengiriman yang lebih cepat. Jika tekad itu tampaknya terlalu dekat untuk dipanggil, dukungan pihak ketiga adalah penentunya.

Tugas: Melakukan Ide Ide

Ideation adalah proses kreatif untuk menghasilkan ide-ide baru, dan biasanya dilakukan oleh kelompok interdisipliner yang terdiri dari desainer, pengembang, pemilik produk, dan manajer proyek.

Tujuannya adalah menciptakan ide-ide baru untuk digunakan dalam suatu produk setelah mempertimbangkan persyaratan dasar dan pekerjaan apa pun yang sedang dibangun. Misalnya, sebuah tim mungkin menjalani sesi pembuatan ide konsep untuk membuat serangkaian fitur MVP untuk aplikasi baru—atau fitur generasi berikutnya di aplikasi yang sudah ada.

Banyak desainer melakukan ide konsep di papan tulis atau kertas. Namun, ideation juga dilakukan secara digital, terutama di kantor-kantor terdistribusi. Pembuatan konsep adalah olahraga tim dan mencakup non-desainer seperti pemilik/manajer produk dan pengembang front-end. Alat yang mendorong kolaborasi dan mudah digunakan adalah yang terbaik untuk tugas ini.

Pemenang: Figma

Sketch dan Axure keduanya menawarkan layanan berbagi awan, tetapi tidak ada cara untuk berbagi layar secara waktu nyata dengan kolaborator.

File yang dibagikan di Figma dapat digabungkan secara real time, dan kursor berlabel setiap peserta ditampilkan. Satu klik pada avatar representatif di bilah alat mengalihkan pandangan ke perspektif orang itu, sehingga memudahkan untuk berbagi ide dengan cepat. Selain itu, Figma tidak mengharuskan non-desainer untuk memiliki salinannya; mereka membuka tautan file dan mulai bekerja.

Alat kolaborasi papan tulis lainnya mungkin lebih cocok untuk ide konsep daripada Figma, seperti Mural dan Realtimeboard, tetapi untuk alat desain, Figma lebih baik daripada Sketch dan Axure sejauh satu mil.

Tugas: Membuat Hasil Kerja dengan kesetiaan rendah

Kiriman kesetiaan biasanya diproduksi sebagai gambar rangka atau sketsa digital yang dapat didistribusikan dan ditinjau oleh desainer dan pemilik produk lain. Bergantung pada proses UX, mereka juga dapat dilihat oleh pengembang dan pemangku kepentingan lainnya.

Wireframe dimaksudkan untuk menunjukkan struktur dasar aplikasi sehingga model interaksi dapat ditentukan sebelum menghabiskan waktu membuat mockup hi-fidelitas.

Membuat wireframes lo-fidelity dapat dilakukan dengan alat yang secara khusus dikhususkan untuk tugas tersebut, termasuk Balsamiq Mockups, Moqups, dan FluidUI. Namun, Sketch, Axure, dan Figma semuanya dapat melakukan tugas yang sama, terutama saat pengguna membuat library komponen wireframe.

Karena wireframe biasanya berfungsi sebagai tata letak UI awal untuk aplikasi atau halaman, wireframes adalah potongan kasar monokromatik yang sering berubah. Ini membantu menjaga ekspektasi pemangku kepentingan tetap terkendali.

Untuk wireframes, kemudahan penggunaan, kecepatan pengiriman, dan modifikasi sangat penting karena memungkinkan desainer untuk menghasilkan desain varian secara efisien.

Pemenang: Axure

Axure menang di sini karena memiliki komponen pra-paket untuk wireframing segera setelah menginstal perangkat lunak. Sketch dan Figma memiliki alat yang memungkinkan Anda membuat wireframe, tetapi Anda perlu menggambar komponen wireframe atau mengunduh file yang memuatnya. Dalam kedua kasus tersebut, mereka harus diintegrasikan ke dalam pustaka simbol (Sketsa) atau komponen (Figma) untuk diseret-dan-jatuhkan seperti komponen Axure.

Axure memiliki banyak perpustakaan pihak ketiga untuk membuat kiriman dengan fidelitas rendah, dan Sketch memiliki banyak file gratis dan berbayar yang dapat diunduh, sedangkan sumber daya publik Figma masih sangat muda.

Setelah seorang desainer membuat pustaka komponen wireframe, ketiga alat tersebut dicocokkan secara merata. Perhatikan bahwa komponen Axure memiliki properti parametrik dan dapat disesuaikan, tetapi untuk gambar rangka statis, ketiga alat tersebut bekerja dengan baik saat pustaka tersedia.

Tugas: Membuat Hasil Kerja dengan Kesetiaan Tinggi

Kiriman dengan fidelitas tinggi lahir dari umpan balik dan pembelajaran yang dikumpulkan dari wireframes dengan fidelitas rendah. Mereka adalah maket yang menunjukkan warna, detail visual, dan desain akhir yang diusulkan untuk sebuah aplikasi.

Fidelitas tinggi juga berarti maket layar yang siap presentasi dan ditampilkan kepada klien, eksekutif internal, dan pemangku kepentingan non-desainer lainnya. Alat desain yang unggul dalam tugas ini memiliki semua fitur yang diperlukan untuk menambahkan polesan yang diperlukan untuk membuat representasi hasil akhir yang dihadapi pelanggan.

Ini termasuk kontrol atas isian dan goresan objek, menambahkan efek seperti bayangan dan isian gradien dan mengekspor seni ke dalam format yang mudah dicerna (png, pdf, jpg).

Pemenang: Figma

Sketch dan Figma memiliki set alat yang hampir identik yang dapat membuat mockup dengan ketelitian tinggi, tetapi model interaksi Figma lebih disempurnakan dan alat ini lebih mudah digunakan sejak awal. Kedua alat memiliki akses mudah ke pengeditan lanjutan dan perintah boolean seperti Gabung, Intersect, Union, dan Subtract. Sementara dukungan plugin Sketch memungkinkan pihak ketiga untuk membuat fitur tambahan, alat ini tidak tersedia segera setelah diinstal.

Ketiga alat tersebut memiliki fitur yang memungkinkan pembuatan objek kustom, tetapi Axure membuatnya agak sulit untuk mengakses perintah. Pengeditan yang disebutkan di atas tidak tersedia di bilah alat. Akses hanya diperoleh melalui menu konteks ketika beberapa objek dipilih.

Selain itu, jaringan vektor Figma membuat bekerja dengan alat garis menjadi mudah.

Tugas: Membuat Prototipe Interaktif

Prototipe interaktif bisa sesederhana prototipe kertas atau sedetail versi bercabang dari aplikasi yang sudah ada yang telah diubah untuk mengeksplorasi fitur-fitur baru. Biasanya, prototipe interaktif memungkinkan pengguna untuk menavigasi dari layar ke layar dan menggunakan fungsionalitas seperti menu dan daftar.

Bagi banyak desainer, tayangan slide interaktif dasar sudah cukup saat mempresentasikan karya mereka. Hal ini terutama berlaku untuk aplikasi seluler karena transisi sederhana menyediakan interaksi perangkat yang cukup untuk menjelaskan desain.

Model prototyping Figma terintegrasi dengan baik dan mudah digunakan, dan karena ini adalah aplikasi berbasis cloud real-time, tidak perlu me-refresh halaman HTML ketika file diperbarui.

Kadang-kadang, pemangku kepentingan menginginkan koneksi data langsung untuk memuat prototipe dengan data dunia nyata untuk menguji skalabilitas desain, tetapi sebagian besar desainer sekarang memiliki sedikit kebutuhan untuk prototipe kompleks.

Pemenang: Figma

Sketch dan Figma mendukung pembuatan prototipe sederhana dengan tautan "object to artboard" dan serangkaian transisi terbatas. Pluginshelp mendukung kemampuan prototipe sederhana Sketch, tetapi Axure adalah yang paling kuat dalam hal menyediakan model interaksi yang kuat untuk prototipe.

Tugas: Membuat Sistem Desain

Sistem desain, meskipun relatif baru dalam domain desain UX, telah ada selama beberapa dekade. Mereka menyertakan bahasa desain bersama, komponen, sumber daya, dan pedoman yang memberdayakan tim untuk berkolaborasi dan membuat keputusan yang lebih baik. Perpustakaan sistem desain biasanya diimplementasikan sebagai situs web dan bertindak sebagai satu-satunya sumber kebenaran untuk suatu produk di seluruh perusahaan.

Pemenang: Figma

Sementara pustaka komponen dapat dibangun di salah satu program, tidak ada satu pun dari program tersebut yang memungkinkan desainer untuk membalik sakelar dan menghasilkan pustaka komponen yang layak saat awal. Axure dapat membuat halaman HTML dengan komponen khusus di dalamnya, tetapi tidak ada cara untuk menanyakan komponen tunggal untuk mengetahui nilai warna, ukuran, dan properti lainnya.

Membangun sistem desain menggunakan salah satu alat ini masih merupakan proses manual. Namun, ada plugin untuk Sketch (seperti plugin Desain Material Google yang baru saja dirilis) dan setidaknya satu alat pihak ketiga dalam pengerjaan untuk Figma.

Figma menang karena kolaborasi adalah inti dari sistem desain yang baik. Karyawan perusahaan dari beberapa disiplin ilmu (desain, pengembangan, kualitas, konten) perlu mengakses perpustakaan sistem desain, dan banyak yang akan menambahkan file komponen desain yang disinkronkan ke perpustakaan bersama. Figma dapat digunakan oleh siapa saja, bukan hanya pemegang lisensi, sehingga tidak sulit untuk mengakses dan menambahkan file bersama.

Tugas: Menyampaikan ke Pembangunan

Ketika desainer UI selesai membuat antarmuka, mereka bertanggung jawab untuk menyerahkan file desain kepada pengembang sehingga proyek dapat diselesaikan. Tapi handoff lebih dari sekedar pertukaran data sederhana, ini adalah kesempatan bagi desainer untuk mengomunikasikan alasan pekerjaan mereka dan dengan demikian membantu pengembang mengawinkan bentuk dengan fungsi.

Ada lusinan metode handoff dan bahkan lebih banyak lagi alat pihak ketiga untuk memfasilitasi permintaan informasi objek dan redlining dari file Sketch dan Figma (lihat Avocode dan Zeplin). Namun, dalam perbandingan ini, kami melihat alat desain asli sebelum dilengkapi dengan plugin atau aplikasi lain.

Menariknya, munculnya sistem desain UX mengurangi kebutuhan akan bentuk handoff ini, karena pustaka komponen yang diterbitkan adalah satu-satunya sumber kebenaran bagi pengembang. Mereka dapat mengekstrak informasi tata letak dan desain yang tepat dari komponen tanpa menunggu hasil atau konsultasi UX.

Selain itu, mendapatkan informasi dari objek dalam file desain dapat membantu selama konstruksi sistem desain, jadi beberapa tampilan CSS adalah hal yang baik.

Sketch memungkinkan Anda memilih objek dan menggunakan menu kontekstual untuk "Menyalin Atribut CSS" tetapi itu tidak ideal. Figma melakukan pekerjaan yang adil dengan menyediakan tab "Kode" di panel properti yang menghasilkan nilai CSS, iOS, atau Android untuk objek yang dipilih (pengembang dapat menggunakan fitur ini dalam mode hanya lihat atau mode prototipe).

Pemenang: Axure

Saat ini, hanya Axure yang memiliki "generator" kuat yang menghasilkan file HTML yang dapat dipublikasikan sepenuhnya, Spesifikasi Word, dan bahkan laporan berformat CSV untuk diimpor ke dalam spreadsheet. Meskipun hasilnya bukan pustaka desain, aplikasi ini menyediakan materi handoff pengembang yang berguna.

Pemenang Alat Desain Keseluruhan: Figma

Berdasarkan jumlah, Figma adalah pemenang dari perbandingan ini, terutama karena sifat kolaboratif dan ketersediaan lintas platform. Karena semakin banyak tim menggunakan sistem desain yang menuntut integrasi yang lebih erat di seluruh pengembangan dan desain front-end, kolaborasi waktu nyata Figma dan fitur penyematan langsung memberikan keuntungan besar. Sisi negatifnya, Figma adalah aplikasi online yang mungkin dilarang digunakan di perusahaan karena alasan keamanan.

Axure menempati posisi kedua karena kekuatannya yang luar biasa dengan komponen yang dibuat sebelumnya, fitur prototipe interaktif yang kuat, dan pembuatan dokumen. Dalam kasus yang lebih jarang ketika perusahaan perlu mengakses penyimpanan data dunia nyata untuk melihat bagaimana fitur tertentu berperilaku, Axure adalah pilihan terbaik atau satu-satunya.

Sketsa mungkin berada di urutan terakhir, tetapi begitu pengguna memanfaatkan banyak plugin dan sumber daya yang tersedia untuk alat ini, itu sangat kuat dan dapat disesuaikan untuk memenuhi kebutuhan grup desain. Peringatan di sini adalah bahwa plugin harus diperbarui setelah setiap pembaruan Sketch, dan sebagai aplikasi khusus Mac, perusahaan yang menggunakan PC Windows tidak dapat menggunakannya.

Ketiga alat yang diulas dalam artikel ini memiliki kekuatan tersendiri. Namun, masing-masing memiliki keterbatasan. Terserah desainer individu dan tim untuk mengidentifikasi kebutuhan alur kerja mereka, mempertimbangkan pro dan kontra dari setiap program, dan membuat pilihan yang tepat.

Bacaan lebih lanjut di Blog Desain Toptal:

• Singkirkan MVP, Adopsi Minimum Viable Prototypes (MVPr)
• Kekuatan Figma sebagai Alat Desain
• Cara Membuat Panduan Gaya Sketsa, Pustaka, dan Kit UI
• Memahami Sistem dan Pola Desain
• Kematian pada Wireframe. Langsung ke High-Fidelity!