Adobe XD vs Sketch – Showdown 2020

Dua pesaing kelas berat terus berjuang untuk merebut posisi teratas untuk alat desain yang paling disukai: Adobe XD vs Sketch. Alat mana yang akan mengatur semuanya? Jawabannya tidak sederhana. Karena keduanya telah membuat kemajuan luar biasa dalam beberapa tahun terakhir, perbandingan alat desain yang komprehensif tentang fitur, kinerja, dan kemudahan penggunaan sudah terlambat.

Sketch sudah bertahun-tahun ke depan sebelum debut XD: enam, tepatnya. Itu memiliki basis penggemar yang luas dan berdedikasi, sarat dengan fitur, dan memiliki ekosistem plugin yang luas. Tapi Sketch memiliki kelemahan—hanya bekerja di Mac.

Pada tahun 2016, Adobe meningkatkan panasnya dan terjun ke medan pertempuran. Mereka tidak hanya mencocokkan Sketch dengan fitur serupa di XD, mereka membuatnya tersedia di Windows. Karena sekitar 78% komputer desktop dunia berjalan di Windows, ini adalah langkah yang berani dan kompetitif.

Adobe XD juga mengisi lubang besar di jajaran Creative Suite. Kembang api diberi jabat tangan emas, dan fitur yang ditawarkan oleh XD tidak tersedia di aplikasi lain seperti Illustrator atau Photoshop. XD tidak hanya ringan, alat desain berbasis vektor yang sama dengan Sketch, tetapi juga terintegrasi lebih baik dengan ekosistem Adobe Creative Suite lainnya.

Namun, di antara desainer, pendapat masih berbeda tentang alat mana yang lebih baik. Pertempuran baru-baru ini berkembang menjadi perang habis-habisan karena fitur ditambahkan dengan cepat ke kedua alat, sering kali mengejar ketinggalan dan sering meniru satu sama lain.

Mari selami dan bandingkan fitur-fitur berikut di Adobe XD vs Sketch:

• Antarmuka pengguna
• Bekerja dengan Simbol/Komponen Master
• Panel Aset dan Komponen
• Scaling Layers dan Komponen
• Menduplikasi dan Mendistribusikan elemen
• Alat Desain Responsif
• Plugin
• Pembuatan prototipe
• Kolaborasi Tim
• Serah Terima Pengembang
• Kontrol Versi dan Pustaka Bersama
• Mode Gelap

Antarmuka pengguna

Meskipun Sketch dan Adobe XD berbagi antarmuka yang serupa, UI Sketch memiliki keunggulan dibandingkan XD . Rasanya lebih seperti alat desain profesional yang kuat, sedangkan XD terasa seperti kombinasi Illustrator dan Photoshop yang lebih ramping.

Ketidaknyamanan yang signifikan dalam Adobe XD adalah ia menampilkan panel aset saat terbuka secara default. Ini bukan yang diharapkan kebanyakan desainer. Saat memulai dokumen desain, sebagian besar desainer berharap untuk segera melihat panel lapisan —bukan aset atau plugin .

+1 ke Sketsa untuk antarmuka intuitifnya.

Bekerja dengan Simbol/Komponen Master

Perpustakaan desain yang dapat digunakan kembali "simbol" tersedia di Sketch dan Adobe XD (mereka disebut "komponen master" di XD). Ketika simbol atau komponen master diperbarui, semua contoh lain dari komponen tersebut dalam proyek mencerminkan pembaruan.

Berbeda dengan Adobe XD, bagaimanapun, fitur Smart Layout Sketch lebih kuat saat bekerja dengan komponen master tersebut. Ini memungkinkan lebih banyak fleksibilitas dan alur kerja yang lebih cepat.

Di Sketch, kita dapat menetapkan tata letak tertentu ke komponen → seret komponen ke kanvas → gunakan penggantian untuk menyesuaikan konten, dan komponen akan diubah ukurannya berdasarkan konten barunya.

+1 ke Sketsa karena simbolnya lebih baik.

Panel Aset dan Komponen

Sketch dan Adobe XD berbagi panel aset/komponen yang serupa dengan beberapa perbedaan.

Untuk aset, XD memiliki menu tarik-turun yang memberi desainer opsi untuk hanya melihat kategori tertentu, selain dari "Semua." Desainer juga dapat beralih antara "Tampilan Kotak" dan "Tampilan Daftar". Opsi ini membuat panel aset di XD secara signifikan lebih ramah pengguna. Juga, dropdown untuk melihat kategori tertentu memberikan lebih banyak fleksibilitas untuk menambahkan lebih banyak kategori di masa mendatang.

Sketsa kurang fleksibel. Ini menampilkan aset proyek di bawah kontrol tersegmentasi tiga tombol (untuk simbol, gaya teks, dan gaya warna). Dengan Sketch, komponen dapat dicari tetapi tidak di seluruh kategori. XD melakukan penelusuran lebih baik dengan menelusuri semua komponen di semua aset.

+1 ke Adobe XD karena mengelola aset dengan lebih baik.

Menggunakan Komponen Master dari Perpustakaan Lain

Dengan Sketch, desainer dapat menambahkan simbol master ke artboard dari banyak perpustakaan yang terhubung—lokal atau dibagikan secara online—dengan cepat dan mudah. Di Adobe XD, "aset tertaut" dapat ditempatkan ke dalam desain dari "awan XD"—komponen, warna, dan gaya karakter—tetapi karena alur kerja yang canggung ini, Adobe XD jauh kurang fleksibel.

+1 ke Sketsa untuk UX yang lebih baik saat bekerja dengan komponen master.

Mengedit Gaya Warna

Setelah ditambahkan ke pustaka aset, Adobe XD memungkinkan desainer mengedit gaya warna dan melihat perubahan warna secara real time di seluruh artboard. Di Sketch, ada solusi untuk mengedit warna secara global, tetapi tidak seintuitif Adobe XD.

+1 ke Adobe XD untuk pengeditan gaya warna yang lebih baik.

Menyiapkan Sistem Desain

Sketch memiliki cara yang bagus untuk mengatur komponen saat membangun sistem desain (ikon, tombol, gaya warna, gaya teks, dll.). Menggunakan garis miring '/' saat membuat dan menamai aset ini, aset tersebut dikelompokkan dalam panel komponen dan disusun secara hierarkis di menu sisipkan. Ini adalah metode yang sangat baik untuk mengatur komponen dengan cara yang logis dan masuk akal bagi desainer yang bekerja dengan ratusan elemen desain.

Adobe XD tidak menawarkan fleksibilitas ini.

+1 ke Sketsa untuk pengelolaan aset desain yang mudah.

Scaling Layers dan Komponen

Penskalaan objek yang berisi banyak komponen tidak ditangani dengan baik oleh Adobe XD. Secara umum, Sketch menangani ini jauh lebih baik. Ini mempertahankan jarak proporsional dengan baik antara elemen saat menskalakan simbol, misalnya.

Selain itu, Sketsa memiliki fitur Lapisan Skala yang berguna ( Command+K ) di mana sekelompok elemen dapat diskalakan menggunakan persentase atau angka sambil menentukan dari mana asal ke skala. Sketsa mengubah ukuran lapisan yang dipilih, sementara atribut gaya seperti ketebalan batas, ukuran bayangan, dan radius akan diskalakan dengan tepat.

Fitur berguna lainnya di Sketch adalah kemampuan untuk mengubah ukuran elemen di inspektur dengan angka atau persentase. Ini sedikit berbeda dari perintah Scale Layers di atas. Dengan menambahkan huruf berikut ke persentase atau angka— c/m, t, b, r —Sketsa akan menskalakan elemen yang dipilih dari asal tersebut. Misalnya, “ 50%c ” akan menskalakan elemen yang dipilih 50% dari tengah.

• c/m: skala dari pusat
• t: skala dari atas
• b: skala dari bawah
• r: skala dari kanan

Catatan : Opsi "skala dari kiri" tidak ditampilkan karena merupakan perilaku default di Sketch.

Lihat cara kerja penskalaan lapisan di Sketch→

+1 ke Sketsa untuk lebih banyak keserbagunaan dan presisi saat menskalakan elemen.

Menduplikasi dan Mendistribusikan Elemen

Repeat Grid di Adobe XD adalah fitur praktis yang mengubah sekelompok elemen menjadi grid yang mengulangi objek tersebut. Sebagian besar desainer mungkin mencobanya beberapa kali saat menjelajahi XD, tetapi berapa kali desainer akan menggunakannya? Dan sayangnya, Repeat Grid tidak masuk ke lapisan, kekurangan yang signifikan.

Dengan Sketch, di sisi lain, kita dapat menahan tombol Option dan menyeret layer untuk menduplikasinya (tahan tombol Shift juga untuk membatasinya). Setelah itu, Command+D mengulangi elemen sebanyak yang diinginkan dengan jarak yang sama persis di antara duplikat.

Selanjutnya, Sketch mempercepat alur kerja desain dengan Smart Distribute . Ini memberi desainer lebih banyak kontrol untuk membuat kisi, menyesuaikan jarak, dan menyusun ulang lapisan. Terlepas dari banyak hal kecil yang berguna yang dilakukan Smart Distribute , ia memiliki tombol "Rapi" ajaib di inspektur.

Setelah menempatkan beberapa objek secara acak pada artboard, kita dapat mengklik tombol Tidy , dan secara ajaib akan mendistribusikannya secara merata pada grid. Kita dapat membuat penyesuaian tambahan pada jarak dengan menyeret gagang yang muncul (saat mengarahkan kursor ke grup) atau dengan memasukkan nilai manual untuk presisi mutlak.

Beberapa plugin Sketch telah dibuat untuk membantu desainer dengan kisi, panduan, dan distribusi selain Smart Distribute . Berikut adalah tiga:

Distribusikan Layers • SketchDistributor • Panduan yang didistribusikan secara merata

+1 ke Sketsa untuk menduplikasi dan mendistribusikan elemen dengan lebih baik.

Alat Desain Responsif

Baik Adobe XD dan Sketch memiliki fitur auto-responsif yang serupa. Keduanya memungkinkan kontrol manual atas lebar dan tinggi tetap elemen sambil menyematkan elemen ke asal tertentu dari kotak pembatas. Adobe XD juga memiliki alat "resize responsif" pintar yang secara otomatis menentukan ukuran elemen dan grup—tetapi itu tidak sempurna.

Sketch memiliki alat responsif cerdas yang disebut Smart Layout . Desainer dapat membangun komponen yang responsif, dan kapan pun kontennya disesuaikan, komponen tersebut mengakomodasi perubahan, memungkinkan lebih banyak fleksibilitas dan alur kerja yang lebih cepat.

Dengan Smart Layout , desainer dapat dengan mudah membuat tombol yang secara otomatis mengubah ukuran sambil mempertahankan margin dan padding yang konsisten—tidak peduli berapa lama label teks menjadi. Tata Letak Cerdas juga berfungsi dengan grup.

Adobe XD baru-baru ini menerapkan fitur "resize responsif", tetapi masih tertinggal dari Sketch.

+1 ke Sketsa untuk fitur desain responsif yang cepat dan mudah.

Plugin

Di antara alat desain digital yang melimpah, Sketch memiliki salah satu ekosistem plugin yang paling kuat. Memiliki ribuan plugin adalah salah satu fitur Sketch yang paling menarik, dan pengembang terus membuat plugin bermanfaat yang memperluas fungsionalitas Sketch.

Koleksi plugin Adobe XD tidak ada artinya jika dibandingkan. Bahkan jika pengembang yang sama membuat versi XD dari plugin Sketch, XD terlalu baru untuk plugin tersebut untuk diadopsi secara luas. Terlebih lagi, banyak plugin XD baru tidak menambah nilai yang cukup bagi desainer untuk menerimanya.

+1 ke Sketch untuk ekosistem pluginnya yang luas.

Pembuatan prototipe

Dengan Auto-animate , Adobe XD telah meningkatkan taruhan untuk pembuatan prototipe. Menggunakan fitur animasi otomatis "cerdas", desainer dapat membuat transisi yang tampak hebat dalam prototipe untuk memvisualisasikan pergerakan konten di seluruh layar. XD juga dapat menambahkan suara ke prototipe dengan "aksi" baru yang memainkan efek suara dan file audio lainnya sebagai respons terhadap pemicu.

Sketch memiliki beberapa penghapusan dasar di antara layar untuk pembuatan prototipe tetapi tidak menawarkan fluiditas yang sama dengan interaksi mikro. Tidak pasti kapan Sketch dapat menambahkannya. Fokusnya, tampaknya, lebih pada menggabungkan fitur berharga lainnya, seperti Asisten ke dalam Sketch.

Pembuat Sketch kemungkinan besar merasa bahwa ada banyak alat lain untuk membuat prototipe dengan interaksi mikro yang sangat detail, seperti ProtoPie. Ini kuat dan dapat dengan mudah mengimpor desain dari Sketch, Figma, dan Adobe XD.

Baik Sketch maupun Adobe XD saling bersaing dalam hal menyediakan aplikasi untuk melihat prototipe di ponsel: Sketch Mirror dan Adobe XD . Aplikasi menarik prototipe yang dirancang di desktop ke layar ponsel melalui kabel USB atau wifi.

+1 ke Adobe XD untuk transisi animasi otomatis untuk memvisualisasikan prototipe.

Kolaborasi Tim

Kedua alat menawarkan kolaborasi tim. Sketch memiliki Sketch for Teams tempat desainer yang menggunakan ruang kerja cloud bersama dapat berbagi ide, tetap sinkron dengan Pustaka Awan Bersama , memeriksa kemajuan proyek tim lain, dan memberikan umpan balik tentang desain—semuanya di satu tempat.

Selain itu, pemangku kepentingan dan kolaborator yang diundang yang tidak memiliki akses ke aplikasi Sketch dapat melihat, memeriksa, dan mengomentari desain di browser. Serah terima pengembang juga diintegrasikan ke dalam Sketch menggunakan Sketch for Teams .

Pada tulisan ini, versi premium Adobe XD memungkinkan tim untuk mengedit file XD bersama dengan desainer lain (online dan offline) melalui Creative Cloud, berbagi file untuk ditinjau, dan dengan mudah menyerahkan spesifikasi untuk pengembang. Semua fitur ini saat ini dalam versi beta .

+1 ke Sketsa untuk kolaborasi tim langsung.

Serah Terima Pengembang

Menyerahkan desain kepada pengembang adalah langkah penting, dan baik Adobe XD maupun Sketch menanganinya dengan sama baiknya. Dengan berbagi proyek melalui platform online, desainer dapat membuat spesifikasi dan berkolaborasi dengan pengembang untuk membantu mereka mengubah desain menjadi situs web dan aplikasi.

+1 ke Adobe XD dan +1 ke Sketch untuk handoff pengembang.

Kontrol Versi dan Pustaka Bersama

Mengontrol versi file desain sangat penting saat bekerja dengan desainer lain pada proyek yang sama. Ini juga memfasilitasi kolaborasi tim dan merancang umpan balik secara lebih efisien. Sketch baru-baru ini mengintegrasikan fitur-fitur ini ke dalam Sketch for Teams . Dengan Sketch Cloud , desainer dapat berbagi file desain dan Perpustakaan yang mempermudah bekerja dengan sistem desain pada tim terdistribusi.

Adobe XD juga memiliki sistem versi file cloud dengan Adobe Creative Cloud. Meskipun situs web Creative Cloud menyimpan versi file XD, mengembalikan ke versi sebelumnya tidak dimungkinkan. Untuk kembali ke versi sebelumnya, desainer perlu membuka file di Adobe XD melalui situs web Creative Cloud lalu menyalin dan menempelkan konten ke dokumen saat ini. Versi file juga secara otomatis dihapus setelah 30 hari kecuali diberi nama atau di-bookmark. Dengan kata lain, ini bukan proses yang mulus.

Seperti Sketch, XD juga memudahkan tim untuk menggunakan aset bersama menggunakan Creative Cloud Library. Desainer dapat membawa warna, gaya karakter, dan grafik ke dalam XD dari pustaka ini.

+1 ke Sketsa untuk pembuatan versi file yang mudah dan Perpustakaan bersama di cloud.

Mode Gelap

Tampak Hebat dan Membuat Desain Menonjol

Banyak desainer lebih suka bekerja di ruangan yang remang-remang untuk melihat kreasi mereka di layar tanpa pantulan atau silau. UI mode gelap cocok dengan lingkungan itu dengan baik. Ini memberikan kontras yang sangat baik untuk hampir semua warna dan membuat konten visual lebih mencolok.

Mode gelap tidak hanya terlihat bagus, tetapi juga meminimalkan "ketegangan mata digital". Mari kita hadapi itu, desainer menatap layar hampir sepanjang hari. Ketegangan mata digital adalah kondisi umum yang mempengaruhi jutaan orang. Disebabkan oleh segala hal mulai dari penggunaan komputer yang berlebihan hingga paparan cahaya terang secara teratur, dapat menyebabkan sakit kepala, sakit leher, penglihatan kabur, dan mata perih/perih.

Warna Aksen dan Sorotan

Sketch telah mendukung mode gelap sejak Sketch 52 (Oktober 2018). Ini juga mendukung preferensi warna Aksen dan Sorotan global macOS Mojave. Opsi yang dipilih yang disorot di panel Layers, Inspector, dan di tempat lain di aplikasi akan cocok dengan preferensi sistem.

Mode gelap tidak tersedia di Adobe XD, bahkan di macOS.

+1 ke Sketsa untuk mode gelap.

Pemenang Adobe XD vs Sketch Showdown Adalah… Sketch

Sketch memenangkan pertarungan untuk supremasi alat desain dengan keunggulan signifikan atas Adobe XD.

Dalam beberapa skenario, pilihannya jelas: Sketsa tidak tersedia untuk Windows. Keuntungan penting bagi pelanggan Adobe Creative Cloud juga adalah bahwa "rencana pemula" XD datang gratis — meskipun disertai dengan batasan yang cukup besar.

Fleksibilitas Sketch harus memaksa desainer di macOS untuk memilih Sketch daripada XD. Antarmuka, plugin, fitur kolaborasi, alat desain responsif, simbol yang dapat digunakan kembali, pustaka bersama, dan fitur praktis lainnya mengalahkan Adobe XD.

Perlu diperhatikan bahwa memindahkan file desain dari XD ke Sketch tidak dapat dilakukan . Transisi dari Sketch (dan Photoshop atau Illustrator) ke XD lebih mudah karena XD dapat membuka file Sketch. Beberapa masalah mungkin muncul saat menggunakan plugin khusus Sketch seperti Abstract atau InVision Craft, tetapi ini dapat dihindari dengan sedikit pembersihan.

Beberapa desainer menyukai Adobe XD karena fitur Auto-animate-nya. Ini adalah fitur menarik yang membuat prototipe tampak hebat. Namun, desainer perlu mengingat bahwa itu hanya satu atribut mewah. Mempertimbangkan keunggulan Sketch vs XD, pengorbanannya tidak sepadan. Banyak alat prototyping canggih tersedia yang bekerja mulus dengan Sketch.

Pertempuran belum berakhir. Tahun-tahun mendatang akan melihat perang habis-habisan yang intens antara Adobe XD vs Sketch. Pada akhirnya, desainerlah yang akan diuntungkan karena lebih banyak kemampuan ditambahkan ke kedua alat desain. Ini akan membuat pekerjaan sehari-hari mereka lebih mudah, dan itu adalah sesuatu yang dinanti-nantikan.

Beri tahu kami pendapat Anda! Silakan tinggalkan pemikiran, komentar, dan umpan balik Anda di bawah ini.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Desain dengan Presisi – Ulasan Adobe XD
• Menjelajahi Desain Multimodal – Tutorial Adobe XD
• Bentuk dan Fungsi – Panduan untuk Alat Wireframe Teratas
• Kuasai Kerajinan Anda dengan Alat UX Teratas Ini
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi