Gunakan Adobe XD untuk membuat interaksi mikro

Sep 13, 2025

Bagaimana caranya

(Kredit Gambar: Adobe)

Adobe XD dapat membantu dengan prototyping - salah satu proses paling penting dalam siklus hidup desain, yang memainkan peran penting dalam pengembangan dengan membantu desainer dan tim dev dengan pemeliharaan alur kerja. Ada beberapa perubahan besar dalam lanskap prototipe baru-baru ini: desainer dimanjakan untuk pilihan.

Sama seperti banyak disiplin ilmu lain, tidak ada alat desain dan prototyping tunggal yang dapat mencapai segalanya. Tahapan yang berbeda memerlukan seperangkat alat yang unik. Pergi adalah hari-hari ketika desainer biasanya hanya mengandalkan Photoshop dan Sketsa. Meskipun mereka adalah alat desain UI yang hebat, mereka tidak memiliki kemampuan untuk arus pengguna cepat dan wireframes (lihat top kami Alat Wireframe. Untuk lebih banyak opsi bingkai).

Sekarang dengan jumlah interaksi yang berkembang dalam desain - seperti animasi, gerakan dan kontrol suara - sulit untuk menemukan alat yang dapat mencapai semua kemampuan prototipe ini dan masih sederhana. Coding adalah salah satu cara untuk menciptakan interaksi ini tetapi memakan waktu. Untungnya, Adobe XD telah datang ke penyelamatan dengan merilis pembaruan ke alat prototyping yang mencakup fitur praktis yang disebut 'Auto Animate'. Sejauh ini merupakan tambahan terbesar untuk toolset yang ampuh.

Dapatkan Adobe Creative Cloud

Idenya di sini sederhana: Animasi otomatis memungkinkan desainer untuk membangun prototipe interaktif dengan animasi mendalam dengan hanya menduplikasi artboard atau memodifikasi properti suatu objek. Properti ini bisa berupa apa saja, seperti dimensi, posisi x dan y, opacity, rotasi. Adobe XD sebelumnya menawarkan interaksi dasar seperti geser, dorongan dan larut.

Dengan penambahan fitur-fitur baru, desainer dapat dengan mudah membuat animasi berbasis gerakan, yang pada gilirannya akan membantu pengguna untuk membuat model int informasi mental ketika mereka menavigasi antara beberapa layar. Ini juga dapat digunakan untuk membuat hierarki visual, CTA, atau pesan yang memudar atau keluar dari layar sementara.

Pada artikel ini, saya akan menjelaskan cara membuat animasi mikro sederhana menggunakan fitur animasi otomatis baru dari Adobe XD. Sebelum kita mulai, ada beberapa hal yang perlu dipertimbangkan tentang bagaimana objek harus ditangani untuk animasi otomatis:

Ketika suatu objek atau elemen tidak ada di artboard tujuan, biasanya memudar saat dipratinjau
Ketika suatu elemen tidak ada di artboard awal, ia cenderung memudar
Selalu kawat artboard saat Anda berada dalam mode prototipe, yang akan membuat interaksi
Untuk membuat animasi, selalu pastikan objek dan elemen memiliki nama yang cocok di lapisan dan juga nama grup yang mungkin ada

Buat perubahan keadaan menggunakan animasi otomatis

Adobe XD tutorial — Ini mungkin terdengar sederhana, tetapi Anda harus mulai dengan dua bentuk (Kredit Gambar: VAMSI BATCHU)

Mari kita mulai dengan membuat contoh sederhana dari perubahan negara menggunakan animasi otomatis. Dalam contoh ini, sifat-sifat yang akan berubah adalah lebar, tinggi dan warna. Untuk transisi animasi otomatis, Anda memerlukan lebih dari dua artboard.

Pada artboard awal, gambar bentuk - dalam contoh kami, ini adalah persegi panjang hijau 500px x 200px. Gandakan artboard ini dan pilih persegi panjang di artboard kedua. Kita perlu memodifikasi sifat-sifat persegi panjang dengan meningkatkan lebar menjadi 1000 dan ketinggian hingga 500. Anda juga dapat melakukan modifikasi lebih lanjut seperti mengubah opacity menjadi 50% atau membuat warna pink.

Sekarang klik tab Prototipe di sudut kiri atas. Pilih artboard pertama dan tautkan menggunakan panah ke arri kedua. Ketika Anda melakukan ini, ada tab interaksi di sebelah kanan aplikasi yang dapat digunakan untuk mengatur parameter seperti pemicu, tindakan, tujuan dan pelonggaran. Setiap parameter dapat disesuaikan sesuai dengan kebutuhan Anda. Ada lima jenis pemicu - termasuk keran, seret dan waktunya - yang akan memulai animasi.

Atur tab Aksi default untuk menghidupkan otomatis dan karena hanya ada dua artboard dalam contoh kami, atur tab tujuan ke artboard 2. Ada juga beberapa transisi halus yang dapat dipilih dan waktunya. Klik pada ikon Play di kanan atas untuk melihat animasi otomatis melakukan sihirnya dan menghidupkan persegi panjang. Ketika ada lebih dari dua elemen yang perlu diubah secara bersamaan, pastikan nama elemen-elemen ini sama di kedua artboard. Ini akan menginformasikan aplikasi bahwa kedua elemen ini perlu dianimasikan.

Perluas kartu

Sekarang mari kita maju ke contoh dengan lebih banyak interaktivitas dan yang mencakup beberapa elemen. Mari kita mulai dengan membuat artboard pertama untuk ini, terdiri dari kartu. Kartu akan memiliki elemen seperti header, deskripsi, dan tautan di riwayat tampilan baca bawah. Di sebelah tautan, akan ada ikon panah yang menghadap ke bawah. Ketika pengguna mengklik tautan, kartu akan terbuka seperti laci untuk menampilkan entri sebelumnya. Karena ini terjadi pada fungsi klik / ketuk, entri sebelumnya tidak boleh dibuat di artboard pertama.

Selanjutnya, kami menduplikasi artboard ini dan mengubah beberapa properti kartu. Hal pertama yang harus dilakukan adalah meningkatkan ketinggian kartu persegi panjang untuk membuatnya terlihat seperti negara yang diperluas. Header dan deskripsi di bawah ini harus tidak berubah. Sekarang saatnya menambahkan entri yang kami sebutkan sebelumnya.

Bayangkan ada tiga entri untuk kartu. Setiap entri memiliki nama entri, tanggal entri dan tombol seperti yang ditunjukkan pada gambar utama. Anda dapat membuat satu entri dan menduplikasi dua kali untuk membuat sekelompok entri. Atur mereka seperti yang ditunjukkan pada gambar utama dan letakkan tautan teks Riwayat tampilan di bawah entri ini. Karena dalam keadaan diperluas, putar ikon panah sehingga menghadap ke atas. Itu dia. Anda telah menyelesaikan pengaturan artboard.

Untuk membuat animasi, buka artboard pertama dan klik pada tab Prototipe dari sudut kiri atas. Sekarang klik tautan Lihat Riwayat pada artboard pertama dan seret tautan prototipe ke artboard kedua. Ini membuat tampilan sejarah tautan pelatuk. Ubah properti di tab Interaksi di sebelah kanan dengan mengatur pemicu untuk mengetuk dan beraksi untuk menghidupkan otomatis. Uji untuk melihat animasi laci yang halus. Buat perubahan pada opsi pelonggaran di tab Interaksi Jika Anda menemukan animasi tidak cukup halus.

Buat drag animations.

Seret adalah salah satu animasi paling umum dalam hal interaksi seluler. Mari kita coba contoh sederhana dengan dua artboards. Untuk artboard pertama, mulailah dengan membuat lingkaran warna dan dimensi apa pun. Sekarang buat persegi panjang dengan lebar 250px dan ketinggian 25px. Gandakan persegi panjang ini delapan kali, mempertahankan ruang 20px antara setiap duplikat, sehingga ia menciptakan tumpukan. Tempatkan lingkaran di atas persegi panjang pertama sebelum menduplikasi artboard ini.

Tidak banyak yang tersisa untuk dilakukan untuk artboard kedua. Cukup kurangi celah antara masing-masing persegi panjang duplikat sehingga rasanya seperti dikompresi. Mirip dengan artboard pertama, letakkan lingkaran di atas persegi panjang pertama. Langkah terakhir adalah membuat prototipe dengan mengklik tab Prototipe dari sudut kiri atas. Sekarang klik pada lingkaran dari artboard pertama dan jadikan pemicu. Sama seperti contoh sebelumnya, ubah properti di tab interaksi di sebelah kanan dengan mengatur pemicu untuk menyeret dan beraksi untuk menghidupkan otomatis. Ketika Anda mengklik tombol Play untuk melihat pratinjau animasi, Anda akan dapat melihat tindakan yang lancar seolah-olah blok dikompresi oleh bola.

Buat Animasi Loader Infinite

Salah satu fitur terbaik Adobe XD adalah animasi otomatis dapat diterapkan di antara beberapa artboard. Untuk melakukan animasi seperti itu, Anda hanya perlu membuat perubahan sederhana pada salah satu properti.

Mari kita buat animasi pemuatan di mana baterai terisi. Kunci untuk mendapatkan ini sempurna adalah dengan membuat artboard pertama dengan benar. Artboard pertama memiliki baterai placeholder seperti yang ditunjukkan pada gambar. Itu dapat dibuat menggunakan bentuk persegi panjang. Untuk baterai yang sebenarnya di dalam placeholder, artboard pertama harus kosong (yang mewakili 0%). Gandakan artboard ini dan buat persegi panjang hijau dengan tinggi 50px yang pas di dalam placeholder. Buat duplikat serupa sehingga ketinggian baterai di artboard ketiga meningkat 50px dan sebagainya. Lanjutkan sampai artboard sepenuhnya terisi.

Sekarang kita harus membuat loop tak terbatas di antara artboard ini sehingga menciptakan animasi pemuatan sinkron. Untuk ini, buka mode prototipe, klik pada artboard pertama dan seret panah prototipe ke artboard kedua. Ubah properti di panel interaksi, dengan mengatur pemicu ke waktu dan kemudian atur penundaan ke 0 detik, yang akan menghidupkan ke artboard kedua ketika dipratinjau. Lakukan perubahan yang sama untuk semua artboard, dengan menghubungkan yang kedua hingga ketiga dan seterusnya sebelum akhirnya menghubungkan artboard terakhir ke yang pertama. Kami telah berhasil menautkan semua artboard untuk membentuk loop yang tak terbatas. Ubah pengaturan pelonggaran dan durasi sesuai kebutuhan Anda untuk membuat pemuatan lebih halus.

Meskipun ada banyak variasi yang dapat dicoba menggunakan Adobe XD, kemampuan alat saat ini terbatas dan masih diperbarui secara teratur oleh tim pengembangan. Jadi, jika dibandingkan dengan alat seperti prinsip, Anda mungkin merasa seolah-olah XD memiliki toolset terbatas. Namun, Adobe telah melakukan pekerjaan yang sangat baik untuk membuat alat ini mudah dipelajari dan digunakan. Menciptakan interaksi yang kompleks mungkin membutuhkan waktu dan upaya tetapi mereka benar-benar dapat dicapai dengan menggunakan fitur XD Auto Animate. Kuncinya adalah memahami dasar-dasar benda bergerak, mengubah ukurannya, menambah lapisan dan menggunakan pemicu.

Artikel ini awalnya muncul masalah 326 dari bersih , majalah terkemuka dunia untuk desainer dan pengembang web. Membeli Masalah 326. atau berlangganan di sini .

Baca lebih lajut:

40 tutorial WordPress yang brilian
11 Kerangka JavaScript yang luar biasa
Apakah neumorphism benar-benar tren terpanas 2020?

Gunakan Adobe XD untuk membuat interaksi mikro

Buat perubahan keadaan menggunakan animasi otomatis

Perluas kartu

Buat drag animations.

Buat Animasi Loader Infinite

Bagaimana caranya - Artikel Terpopuler

Cara meregangkan kanvas dan mengatur untuk cat minyak

Buat tekstur dengan alat cap pola

Cara membuat formulir web yang dapat diakses

Cara mengubah hari menjadi malam di Photoshop

Cara membawa karakter 2D ke kehidupan di VR

Master ilmu Pengoptimalan Tingkat Konversi

cat ke mesh 3D dengan alat polipain Zbrushcore

Cara menggambar lanskap dengan pastel

Kategori