Pembuatan Prototipe XD Produktif – Tutorial Komponen Adobe XD

Sistem komponen Adobe XD memberdayakan desainer dengan fitur canggih untuk membuat prototipe produk digital. Namun, itu bukan tanpa kebiasaan dan membutuhkan perawatan khusus. Memanfaatkan pintasan cerdas dan mengikuti praktik terbaik akan memungkinkan desainer untuk merampingkan alur kerja pembuatan prototipe XD mereka.

Sejak peluncuran resminya ke publik pada akhir tahun 2017, Adobe XD telah membuat langkah besar untuk menjadi alat wireframing dan prototyping yang sangat kompetitif untuk desainer UX. Secara khusus, sistem komponen barunya memperluas jenis interaksi yang dapat digunakan desainer untuk bereksperimen. Namun, komponen bukan tanpa kebiasaan dan kekurangan. Saat bekerja dengan komponen XD, akan sangat membantu jika mengadopsi serangkaian praktik alur kerja untuk menghindari kesibukan dan memanfaatkan potensi penuh sistem.

Apa itu Komponen Adobe XD?

Komponen XD adalah pengelompokan elemen yang dapat digunakan kembali, seperti teks, bentuk, atau garis. Sebuah komponen memiliki “Main Component” yang berfungsi sebagai parent dan “instances” atau anak-anak yang ditempatkan pada artboard. Saat mengubah Komponen Utama, perubahan menyebar ke semua instance-nya.

Mengganti sistem "simbol" XD sebelumnya, yang memiliki tujuan serupa, komponen menawarkan pembeda utama . Mereka dapat memiliki beberapa status yang merespons input berbeda yang ditentukan dalam Mode Prototipe XD. Misalnya, sebuah tombol dapat memiliki status default tetapi mengubah tampilannya saat berada dalam status melayang atau diklik. Itu dapat memutar suara saat diklik atau bahkan mengubah tampilannya sesuai dengan input dari pengenalan suara.

Sistem komponen adalah penghemat waktu tetapi membutuhkan perawatan khusus. Pendekatan yang bijaksana dan alur kerja yang disiapkan dengan hati-hati diperlukan untuk meningkatkan kekuatan sistem.

Keakraban dengan Adobe XD Disarankan

Desainer dengan tingkat keakraban yang wajar dengan Adobe XD akan mendapatkan manfaat maksimal dari tip dan saran berikut. Untuk memulai, unduh Adobe XD Design Kit dari halaman beranda Desain Material Google. Kit ini akan menyediakan set komponen Adobe XD untuk bereksperimen dan mendekonstruksi.

Tip #1 – Pertimbangkan Semua Status Sebelum Membuat Komponen

Saat membuat komponen dengan status untuk pertama kalinya, desainer harus memahami bagaimana potensi perubahan pada komponen dapat memengaruhi instance lain. Sebagai ilustrasi, mari pertimbangkan menu tarik-turun dengan beberapa status:

• Status default : menu diciutkan
• Status melayang : warna garis mungkin berubah saat kursor berada di atasnya
• Status yang diperluas dan diklik : opsi menu tarik-turun ditampilkan

Saat mengedit status default turunan turunan dari dropdown, perubahan tersebut tidak akan menyebar ke status melayang atau diklik . Perubahan harus dilakukan pada status default di Komponen Utama untuk memperbarui status hover atau diklik dari semua instance.

Meskipun mungkin tergoda untuk masuk dan mulai mengulangi pada Komponen Utama , terkadang masalah tak terduga terjadi karena perbedaan perilaku komponen induk dan anak.

Praktik yang baik adalah mempertimbangkan dan mengantisipasi semua yang diperlukan dalam status default Komponen Utama sebelum menambahkan status lain atau membuat instance komponen—bahkan sampai meletakkan status yang berbeda secara berdampingan.

Desainer juga harus ingat bahwa mereka dapat menambahkan dan mengubah elemen dalam status non-default dari Komponen Utama atau instance anak tanpa memengaruhi status default, tetapi kebalikannya tidak benar.

Rekomendasi untuk Adobe : Berikan fitur penguncian status komponen sehingga desainer dapat menjaga status non-default tetap utuh dan mencegah perubahan status default Komponen Utama menyebar.

Tip #2 – Beri Nama Komponen pada Penciptaan

Membuat komponen (klik kanan elemen, lalu pilih “Make Component” di menu, atau tekan Cmd-K di Mac/Ctrl-K di PC) menambahkan komponen ke panel Aset di bilah sisi kiri. XD akan memberikan komponen nama default "Komponen XX" (di mana "XX" adalah angka). Itu tidak terlalu deskriptif, jadi akan lebih baik untuk memberinya nama yang unik dan dapat dicari.

Mengapa melakukannya? Saat daftar komponen terisi, akan menjadi berat jika semua komponen dimulai dengan nama default yang sama dan nomor yang tidak berarti. Meskipun opsi "tampilan ubin" membantu, opsi ini tidak memiliki label teks, membuat identifikasi visual menjadi lambat dan menantang. “Tampilan daftar” dengan thumbnail kecil juga mempersulit untuk mengidentifikasi perbedaan antara komponen dengan nama yang tidak dapat dipahami. Komponen dapat dan akan hilang. Membuatnya dapat dicari dengan memberi nama akan menghemat waktu nanti.

Rekomendasi untuk Adobe : Saat membuat komponen, pilih secara otomatis dan fokuskan pengguna pada panel Aset->Komponen untuk mengganti namanya atau memunculkan pop-up penamaan. Akan sangat membantu jika memungkinkan untuk mengaktifkan fitur ini di Preferensi.

Tip #3 – Jaga Komponen Utama Tetap Teratur

Saat membuat komponen, mudah untuk menempatkan Komponen Utama pada artboard secara tidak sengaja. Sementara XD menyediakan alat untuk menemukan Komponen Utama (baik dengan mencari di panel Aset atau mengklik kanan dan memilih "Edit Komponen Utama" dari turunan turunan), terlalu mudah untuk membuat perubahan yang tidak diinginkan pada Komponen Utama sambil meyakini bahwa itu adalah sebuah instans. Melakukannya dapat menyebabkan banyak perubahan yang tidak diinginkan di beberapa artboard.

Bahkan jika hanya ada beberapa contoh komponen pada artboard, hal-hal dapat dengan cepat menjadi tidak terkendali setelah artboard dikloning. Perubahan yang tidak disengaja pada Komponen Utama dapat menambah waktu pembersihan yang sebenarnya dapat dihindari.

Sebaiknya biasakan memindahkan Komponen Utama dari artboards desain segera setelah pembuatan . Cara ideal untuk melakukan ini adalah dengan menempatkan Komponen Utama pada papan tulis di file XD atau pada Artboard khusus yang diberi label dengan jelas. Melakukan hal itu akan membuat segalanya lebih efisien nantinya.

Rekomendasi untuk Adobe : Pertimbangkan prompt saat membuat perubahan pada Komponen Utama sehingga desainer diperingatkan bahwa perubahan mungkin menyebar ke instance anak.

Tip #4 – Tetap Terorganisir dengan Panel Layers

Sangat mudah untuk mencoba ide di artboard dan masuk ke aliran pengelompokan/pemisahan komponen dan mengubah properti status komponen. Mungkin ada godaan kuat untuk meminimalkan bilah sisi kiri agar memiliki lebih banyak ruang kerja. Namun, ada kemungkinan besar bahwa status komponen dan transisi tidak akan berperilaku seperti yang diharapkan dalam kesibukan iterasi. Ini mungkin terjadi karena organisasi dan pengelompokan sub-elemen (seperti bentuk, vektor, atau teks) telah menyimpang dari yang seharusnya agar transisi berfungsi dengan benar.

Tampilan Layer memberikan transparansi 100% ke dalam hierarki dan penamaan elemen, dan organisasinya yang kedap udara sangat penting. Menggunakan transisi Auto-Animate XD yang kuat antar status mengharuskan elemen memiliki nama dan posisi yang sama dalam hierarki lapisan komponen. Jika tidak, transisi akan default ke fade alih-alih Auto-Animation yang menarik.

Kadang-kadang, mungkin diinginkan untuk menekan properti dari interpolasi saat transisi Animasi-Otomatis. Untuk mencapai ini, desainer dapat mengganti nama elemen dalam status komponen atau artboard yang berbeda untuk memutuskan tautan berbasis nama.

Dalam kedua kasus tersebut, tampilan Lapisan dapat digunakan untuk memecahkan masalah saat muncul masalah yang tidak terduga . Ini harus menjadi langkah pertama saat men-debug masalah pembuatan prototipe, apakah itu transisi antar status komponen atau antar artboard.

Tip #5 – Gunakan Alpha Fading untuk Menginterpolasi Warna

Auto-Animate adalah tambahan yang sangat baik untuk XD tetapi hadir dengan keterbatasan dan keistimewaan. Salah satu kebiasaan ini menjadi jelas saat mengubah warna elemen antara dua status komponen atau artboard menggunakan Auto-Animate. Alih-alih interpolasi halus antara dua warna, itu berubah secara tiba-tiba saat diuji.

Solusi saat ini sedikit canggung dan memiliki konsekuensi tentang bagaimana status Komponen Utama harus diatur. Ini melibatkan penambahan dua objek dengan warna berbeda alih-alih satu dan kemudian menyilangkan alfa pada dua objek di kedua keadaan untuk mencapai transisi yang mulus. Transisi fade default mungkin berfungsi, tetapi jika menginterpolasi bentuk dan ukuran dengan Auto-Animate, fade mungkin tidak cukup.

Tip #6 – Manfaatkan Komponen dalam Kotak Berulang

Repeat Grid adalah fitur penghemat waktu luar biasa lainnya di XD yang membuatnya mudah untuk mengatur dan memelihara array elemen serupa. Seperti komponen, Repeat Grids memiliki hubungan hierarkis di mana elemen pertama di sudut kiri atas grid adalah "induk" yang mendefinisikan properti untuk elemen "anak". (Ada pengecualian untuk ini: bitmap bisa unik untuk elemen turunan, seperti halnya string teks, tetapi bukan properti teks.)

Namun, saat menggunakan komponen di dalam Repeat Grids, semuanya berubah.

Saat bekerja dengan Repeat Grids secara normal, perubahan yang dilakukan pada induk langsung menyebar ke anak-anaknya. Namun, perubahan Komponen Utama hanya menyebar ke anak-anak di Grid Berulang jika tidak ada properti lokal yang menimpa . Dengan kata lain, mengubah properti komponen di grid "menguncinya" dari perubahan yang menyebar dari Komponen Utama.

Untuk menyebarkan perubahan dari induk yang juga merupakan komponen dalam Kisi Berulang, ubah ukuran kisi menjadi hanya induknya. Ini menghilangkan anak-anaknya. Kemudian, seret gagang kembali ke dimensi yang diinginkan untuk memperbarui anak-anak.

Setelah desainer dapat mengatasi kekhasan komponen dan Repeat Grids, menggabungkannya bisa menjadi sangat kuat.

Tip #7 – Asumsikan Transisi Status Komponen Berbasis Waktu Tidak Ada (Untuk Saat Ini)

Saat menerapkan transisi antar artboard menggunakan penundaan berbasis waktu (bukan berdasarkan input), wajar untuk mengasumsikan bahwa hal yang sama tersedia di antara status komponen. Sayangnya, ini tidak terjadi. Semua perubahan status berbasis komponen harus didasarkan pada input pengguna atau interaksi dalam mode prototipe, bukan waktu.

Rekomendasi untuk Adobe: Tambahkan opsi transisi berbasis waktu ke komponen sehingga statusnya dapat dianimasikan secara independen dari input pengguna.

Tip #8 – Teliti Saat Mengkloning Hirarki Komponen Utama

Tip terakhir ini lebih merupakan kasus tepi yang mungkin tidak sering ditemui oleh desainer XD tetapi harus diperhatikan .

Mari kita asumsikan skenario di mana Komponen Utama memerlukan variasi yang masih mempertahankan kualitas "satu-ke-banyak" dari properti turunan turunan tetapi tidak memengaruhi komponen turunan yang ada. Untuk membuat hierarki komponen induk baru, komponen yang diinstance harus dipisahkan dan dibuat ulang dari awal. Pengelompokan komponen juga akan kehilangan semua status dan properti transisi yang diatur dalam mode Prototipe. Berikut solusinya:

• Mengkloning instance komponen untuk setiap status dalam komponen.
• Setel status setiap instance ke status yang berbeda.
• Telusuri dan ungroup setiap instance komponen.
• Mulai membuat tweak dan perubahan yang diinginkan untuk setiap instance komponen.
• Buat kembali Komponen Utama yang baru.
• Masuk ke mode prototipe dan buat ulang interaksi dan tipe transisi yang telah disiapkan sebelumnya.

Rekomendasi untuk Adobe: Saat mengklik kanan Komponen Utama di panel Aset, berikan opsi menu "duplikat".

Prototyping dengan Komponen Adobe XD: Takeaways untuk Sukses

Adobe XD telah membuat peningkatan yang signifikan dalam fungsionalitas dan utilitas dalam beberapa tahun terakhir. Ini telah berkembang menjadi alternatif yang layak dan kompetitif untuk Sketch dan alat prototyping mapan lainnya. Berdasarkan bagaimana alat ini telah berkembang sejak debutnya, lebih banyak perbaikan kemungkinan akan dilakukan.

Secara khusus, sistem komponen Adobe XD memiliki potensi luar biasa untuk meningkatkan dan memperluas jenis interaksi yang dapat dibuat oleh desainer.

Berikut adalah beberapa takeaways utama yang perlu diingat:

• Pahami bagaimana perubahan menyebar antara Komponen Utama dan instance turunan.
• Perhatikan bagaimana komponen berinteraksi dengan fitur Adobe XD lainnya, seperti Auto-Animate dan Repeat Grid.
• Berusaha keras untuk mengadopsi praktik alur kerja yang konsisten untuk menghemat waktu, seperti memberi nama komponen dan memelihara area papan tulis Komponen Utama yang terpisah dalam file XD.

Menyadari keistimewaan bekerja dengan komponen Adobe XD, sambil mempertahankan alur kerja yang disiplin, akan memaksimalkan produktivitas desain. Ini akan menghindari pembersihan dan pemeliharaan yang tidak perlu dan memberi desainer XD keunggulan efisiensi saat membuat prototipe produk digital.

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

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Adobe XD vs Sketch – Showdown 2020
• Desain dengan Presisi – Ulasan Adobe XD
• Menjelajahi Desain Multimodal – Tutorial Adobe XD
• Mitos UX – Pembuatan Prototipe, Pengujian Pengguna, dan Hasil Kerja UX
• Sempurnakan Proses Desain UX Anda – Panduan untuk Desain Prototipe