Pertarungan Alat Desain – Adobe XD vs. Sketch (2019)

Diterbitkan: 2022-03-11

Sketch, alat desain yang mapan, telah menikmati pertumbuhan yang fenomenal sejak diperkenalkan pada tahun 2010. Pada tahun 2016, Adobe memperkenalkan XD sebagai pesaing yang tangguh. Setelah hampir tiga tahun pengembangan, apakah Adobe XD menawarkan tantangan yang cukup bagi desainer untuk mempertimbangkan perubahan?

Proses desain UX rumit dan membutuhkan penggunaan alat, metodologi, dan kerangka kerja khusus. Riset pengguna, analisis, wireframing, maket, iterasi, pengujian kegunaan, dan pembuatan prototipe UI hanyalah beberapa artefak dan proses yang digunakan desainer saat berkomunikasi dengan pengembang, pemangku kepentingan, dan anggota tim lainnya.

Dua alat desain yang diakui secara luas yang diandalkan oleh desainer UX adalah Adobe XD dan Sketch.

Sketch telah menjadi standar de facto untuk sebagian besar desainer digital karena antarmukanya yang sederhana, jumlah plugin yang banyak, fungsionalitas toolkit yang lengkap, dan pembaruan yang sering.

Sementara Sketch menjadi alat pilihan bagi desainer UX, Adobe, yang telah lama dikenal dengan perangkat lunak desain pemenang penghargaan dan ikatan mendalam dengan komunitas desain, tidak memiliki pilihan serupa. Mereka memiliki Photoshop, Illustrator, dan Fireworks, tetapi desainer tidak berminat menggunakan tiga alat untuk menyelesaikan tugas yang dapat diberikan Sketch dalam satu aplikasi.

Pada tahun 2016, Adobe memperkenalkan XD (Desain Pengalaman). Pesaing serius Sketch, mereka masih harus mengejar banyak hal. Pada saat Sketch berusia enam tahun, memiliki basis pengguna yang luas, dan seluruh ekosistem plugin, menjadikannya alat desain yang hebat. Persaingan meningkat selama dua tahun ke depan dan Adobe XD tumbuh dari pesaing gesit menjadi alat desain yang sangat dihormati yang telah memenangkan banyak desainer profesional.

Blog Desain Toptal menerbitkan artikel tentang Sketch vs Adobe XD pada tahun 2017 ketika masih dalam versi beta. Sekarang, dua tahun kemudian, Adobe XD telah melihat beberapa revisi dengan tujuan yang jelas: Menawarkan semua yang dibutuhkan desainer UX secara asli, dan dengan kinerja yang luar biasa.

Apakah sudah waktunya bagi desainer UX untuk beralih dari Sketch ke Adobe XD?

Adobe XD vs Sketsa

Mari kita jelajahi bagaimana Adobe XD dibandingkan dengan Sketch. Kami akan membandingkan fitur berikut:

  • Antarmuka pengguna
  • Ulangi Grid
  • Simbol dan Panel Aset
  • Alat Desain Responsif
  • Add-On dan Plugin
  • Membuat prototipe dengan Animasi Otomatis
  • Berbagi dan Komentar
  • Bekerja dengan Pengembang
  • Kontrol Versi dan Kolaborasi Waktu Nyata

Antarmuka pengguna

Desainer yang akrab dengan alat seperti Photoshop seharusnya tidak memiliki masalah dalam mempelajari Adobe XD atau Sketch karena semuanya memiliki UI yang serupa.

Antarmuka pengguna Adobe XD vs Sketch
Adobe XD dan Sketch berbagi antarmuka pengguna yang serupa dengan pengecualian beberapa elemen yang berbeda di antara keduanya.

Satu perbedaan UI yang menonjol adalah tidak adanya Toolbar di Adobe XD. Toolbar, yang terletak di bagian atas UI, adalah fitur yang berguna di Sketch dengan pintasan yang dapat disesuaikan ke fungsi dan alat yang umum digunakan, seperti mengelompokkan objek. Adobe menawarkan fitur serupa yang diperkecil yang disebut kotak alat , yang terletak di sisi kanan perangkat lunak.

Sketch vs XD : Sketch memiliki keunggulan untuk Toolbar yang membantu.

Ulangi Grid

Sebuah fitur penting dalam Adobe XD adalah grid ulangi. Ini adalah alat praktis yang memungkinkan pembuatan daftar yang dapat disesuaikan dan layar berbasis kisi dengan mudah. Meskipun Sketch tidak memiliki fitur ini, Sketch sedikit banyak dapat direplikasi dengan plugin.

Ulangi fitur Grid di Adobe XD
Fitur Repeat Grid di Adobe XD memungkinkan pembuatan daftar dan layar berbasis grid dengan cepat.

Sketch vs XD : Adobe XD memiliki keunggulan dengan grid berulang yang merupakan bawaan dari perangkat lunak.

Simbol dan Panel Aset

Simbol adalah fitur awal yang memiliki kontribusi signifikan terhadap kesuksesan Sketch. Simbol untuk Sketsa seperti CSS (Cascading Style Sheets) untuk desain situs web. Mereka memungkinkan desainer untuk dengan mudah menggunakan kembali dan mengedit aset secara massal yang menghemat banyak waktu, membantu menciptakan sistem desain yang sudah jadi, dan memberikan konsistensi di semua layar.

Panel Aset Adobe XD dan Simbol Sketsa
Keberhasilan Sketch sebagian besar disebabkan oleh fitur simbol. Adobe XD menawarkan fitur serupa dengan panel aset.

Adobe memulai dengan simbol dasar dan kemudian memperkenalkan panel aset yang menggabungkan simbol, font, dan warna ke dalam satu lokasi. Mengedit salah satu elemen ini menunjukkan pembaruan yang dihasilkan secara real-time. Sketch memang memiliki fitur-fitur ini, tetapi Adobe XD telah memberikan pengalaman pengguna yang lebih kohesif dan lebih baik.

Sketch vs XD : Adobe XD memiliki sedikit keunggulan karena elemen UI gabungan dalam panel aset.

Alat Desain Responsif

Adobe XD menyediakan seperangkat alat desain responsif yang tangguh. Satu fitur menonjol, mode otomatis responsif, menebak bagaimana layar harus merespons berbagai ukuran perangkat.

Ini adalah fitur yang sangat berguna yang dapat dihidupkan dan dimatikan menggunakan tombol slider sederhana. Jika mode otomatis tidak sesuai dengan perilaku yang diharapkan, desainer dapat mengubah properti responsif secara manual.

Sketch tidak memiliki fitur bawaan ini, tetapi memiliki banyak plugin seperti Anima Toolkit yang berfungsi dengan baik.

Sketch vs XD: Bantuan desain responsif di Adobe XD
Adobe XD menawarkan sistem desain responsif yang kuat dan otomatis yang tidak dimiliki Sketch tanpa menggunakan plugin.

Sketch vs XD: Adobe XD memiliki keunggulan di sini. Mereka menawarkan cara bawaan untuk melihat efek responsif pada elemen UI.

Pengaya & Plugin

Ekosistem plugin dalam Sketch bisa dibilang salah satu fitur terbaiknya. Ada ratusan plugin yang memperluas fungsionalitas Sketch, dan memungkinkan desainer untuk menggunakan fitur yang disempurnakan sambil tetap berada dalam ekosistem Sketch.

Add-on adalah Adobe XD yang setara dengan plugin. Adobe memulai ekosistem add-on mereka pada tahun 2018, jadi tidak sekuat Sketch. Itu bukan masalah bagi Adobe karena tujuan mereka adalah mencoba dan mengurangi kebutuhan akan add-on, dan fokus pada pembuatan fitur yang ada di dalam perangkat lunak.

Sketch vs XD: Sketch memiliki keunggulan dengan perpustakaan plugin yang luas.

Membuat prototipe dengan Animasi Otomatis

Adobe baru-baru ini memperbarui XD dengan fitur yang sangat berguna untuk desainer UX: auto animate . Ia bekerja dengan membuat transisi yang cerdas dan mulus antara elemen layar yang berbeda. Hasilnya mengesankan, membuat prototyping menjadi pengalaman yang menyenangkan untuk melibatkan klien potensial. Sketch tidak menawarkan fungsi ini, bahkan dengan plugin.

Sketch vs XD:Fitur animasi otomatis di Adobe XD
Adobe XD membuat prototyping mudah dan sederhana dengan fitur auto-animate.

Fitur prototyping hebat lainnya yang diperkenalkan Adobe adalah dukungan untuk interaksi mikro, misalnya, menarik panel dari tepi layar atau membuat keyboard muncul. Adobe XD juga mendukung pembuatan prototipe UI berbasis suara (seperti Alexa atau Google Home).

Sketch vs XD: Adobe XD memiliki keunggulan di sini dengan fitur animasi otomatis yang menghemat waktu dan dukungan untuk interaksi mikro yang tidak dimiliki Sketch.

Dicari desainer UI lepas penuh waktu yang berbasis di AS

Berbagi dan Mengomentari

Desainer sering terlibat dengan anggota tim, pengembang, dan pemangku kepentingan lainnya—kemampuan untuk berbagi desain dan menerima umpan balik adalah bagian penting dari proses desain. Dengan demikian, Adobe XD menyertakan fungsionalitas bawaan untuk maket dan prototipe untuk dibagikan secara online sehingga siapa pun dapat menambahkan komentar umum, atau menunjuk ke lokasi tertentu pada tata letak dan meninggalkan umpan balik.

Fitur-fitur ini, dikombinasikan dengan mode prototipe dinamis Adobe XD, juga dapat diuji pada ponsel dengan aplikasi asli Adobe XD, atau bahkan direkam untuk demonstrasi non-interaktif.

Sketch dapat menggunakan berbagi dan berkomentar menggunakan alat kolaborasi seperti Zeplin atau integrasi dengan alat pihak ketiga seperti Invision.

Sketch vs XD: Adobe memiliki sedikit keunggulan di sini dengan berbagi dan berkomentar online bawaan.

Spesifikasi Desain

Selama proyek desain, desainer UX sering kali perlu berbagi spesifikasi desain dengan pengembang. Adobe menyertakan fungsi ini dalam XD, sementara pengguna Sketch perlu menggunakan integrasi seperti Zeplin atau InVision.

Desain pengalaman Adobe vs Sketch: Adobe XD menawarkan spesifikasi desain bawaan
Spesifikasi desain bawaan Adobe XD menyediakan lingkungan kerja yang mulus dan konsisten antara pengembang dan desainer.

Sketch vs XD: Adobe memiliki keunggulan dibandingkan Sketch karena spesifikasi desain sudah ada di dalamnya dan tidak memerlukan integrasi pihak ketiga.

Kontrol Versi & Kolaborasi Waktu Nyata

Dua fitur penting yang diandalkan oleh perancang dan pengembang adalah kontrol versi dan kolaborasi waktu nyata. Tim desain besar yang bekerja sama dalam proyek yang sama harus dapat melihat kapan perubahan telah dibuat, dan mengakses riwayat perubahan tersebut.

Adobe membahas kolaborasi dengan pengenalan dokumen cloud . Ini memberi semua orang di tim, termasuk pengembang, tempat utama untuk bekerja. Menurut Adobe, langkah selanjutnya untuk fitur dokumen cloud adalah kontrol versi.

Sketch menawarkan kontrol versi dan kolaborasi waktu nyata dengan plugin, tetapi fitur ini tidak ada di dalam produk.

Sketch vs XD: Sketch memenangkan yang satu ini. Mereka memiliki kontrol versi, meskipun dengan plugin; ini saat ini tidak ditawarkan di XD.

Ringkasan Fitur: Adobe XD vs. Sketch

Ada persamaan dan perbedaan antara versi Adobe XD dan Sketch saat ini. Berikut perbandingan masing-masing produk:

Fitur Adobe XD Sketsa
Grafis vektor Ya (dan termasuk Adobe Illustrator dalam langganan CC) Ya
Pengeditan gambar Tidak (tetapi termasuk Adobe Photoshop dalam langganan CC) Ya, pengeditan dasar
Ringan Ya Tidak
Pembuatan prototipe Ya, termasuk animasi otomatis dan prototipe suara Ya
Ekspor aset Ya Ya
Handoff dengan inspektur online Ya Tidak (tetapi tersedia dengan plugin pihak ketiga)
Simbol dan gaya Ya Ya
Ulangi kisi-kisi Ya Tidak (tetapi tersedia dengan plugin pihak ketiga)
Fitur Adobe XD Sketsa
kisi tata letak Ya Ya
Alat Desain Responsif Ya Tidak (tetapi tersedia dengan plugin pihak ketiga)
Kolaborasi waktu nyata Tidak (diumumkan sebagai fitur mendatang) Tidak (tersedia dengan plugin pihak ketiga)
Versi Tidak (diumumkan sebagai fitur mendatang) Tidak (tersedia dengan plugin pihak ketiga)
Plugin/Add-on Ya Ya, dengan keragaman yang unggul
Versi MacOS Ya Ya
Versi Windows Ya (Windows 10) Tidak
Harga dan lisensi Paket pemula gratis dengan semua fitur dan satu prototipe bersama yang aktif. Versi premium adalah USD $9,99/bulan dengan prototipe bersama tanpa batas. Berlangganan CC dengan semua aplikasi Adobe lainnya adalah USD $52,99/bulan. USD $99 untuk satu tahun pembaruan, tetapi Anda dapat terus menggunakan setelah itu tanpa pembaruan.

Apakah Saatnya Mengubah Alat Desain UX?

Membandingkan fitur, Sketch dan XD hampir sama. Sketch tidak memiliki beberapa fitur seperti auto-animate, auto responsive design, dan repeat grid yang semuanya asli XD.

Satu-satunya hal penting yang masih kurang dari Adobe XD adalah kontrol versi, yang dimiliki Sketch berkat plugin. Harapkan ini akan tiba di XD segera setelah Adobe terus mengembangkan set fitur dokumen cloud.

Lebih mudah untuk bertransisi dari Sketch (dan Photoshop atau Illustrator) ke XD daripada sebaliknya, karena XD dapat membuka file Sketch dengan ketepatan yang sangat baik. Anda dapat mengalami beberapa masalah jika Anda bergantung pada plugin khusus Sketch seperti Abstrak atau InVision Craft.

Dalam beberapa skenario, pilihannya jelas: untuk pengguna Windows, Sketch tidak tersedia, dan untuk pelanggan Adobe Creative Cloud, XD disertakan secara gratis dengan prototipe bersama yang tidak terbatas. Itu tidak terjadi secara kebetulan.

Tapi Sketch melawan. Perusahaan baru-baru ini menutup pendanaan $ 20 juta, dan menjanjikan fitur-fitur penting seperti kolaborasi tim, handoff asli, dan versi web aplikasi pada 2019.

Jika kontrol versi bukan masalah kritis, maka ini bukanlah waktu yang lebih baik untuk mempertimbangkan penggunaan Adobe XD. Komitmen Adobe terhadap komunitas desain pengalaman pengguna terlihat dengan fitur-fitur seperti mode auto-responsive, repeat grid, dan built-in prototyping. Meskipun awal mereka terlambat, Adobe telah membuktikan bahwa mereka dapat memberikan tantangan berat bagi Sketch.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

  • Adobe XD vs. Sketch - Alat UX Mana yang Tepat untuk Anda?
  • Desain dan Sketsa Atom - Panduan untuk Meningkatkan Alur Kerja
  • Desain dengan Presisi - Ulasan Adobe XD
  • Hal-Hal yang Mungkin Tidak Anda Ketahui Tentang Tipografi di Sketsa
  • Mengenal Pengembangan Plugin Sketch