Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

Cara Menggunakan Responsive Resize dan Constraint di Adobe XD

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Naufal (you can also view the original English article)

Dalam tutorial ini, kita akan menjelajahi beberapa fitur baru di Adobe XD, yaitu "responsive resize dan constraint". Fitur-fitur ini, ditambahkan pada bulan September 2018, yang memungkinkan penskalaan desain dalam Adobe XD, memberi kita kemampuan desain web yang benar-benar responsif.

Untuk mendemonstrasikan fitur-fitur baru ini, saya akan menggunakan Bones iOS wireframe kit yang tersedia di Envato Elements:

Bones IOS Wireframe Kit
Bones IOS Wireframe Kit

Lihatlah Videonya

Mengubah Ukuran Sebelum ada Update XD

Sebelum Adobe XD memperkenalkan fitur pengubahan ukurannya yang baru, mengubah ukuran terhadap desain berarti memposisikan ulang secara manual semua elemen yang diperlukan. Misalnya, Anda membuat artboard yang lebih besar, lalu memposisikan ulang, meluruskan kembali, dan mengubah ukuran elemen bar atas dan semua objek lainnya hingga sesuai. Bukan sesuatu yang ideal.

Resizing Before the XD Update

Sekarang Waktunya Responsive Resize

Responsive resize meng-handle semua kerja manual tersebut dan memperbaiki semuanya untuk Anda secara otomatis. Buka dokumen di Adobe XD dan Anda akan melihat toggle Responsive Resize di panel properties:

Responsive Resize toggle Adobe XD

Sekarang ketika saya mengubah ukuran artboard yang sama, Anda akan melihat bahwa objek yang disejajarkan secara terpusat tetap berada di tengah, objek-objek yang rata kanan (right-aligned) menempel di kanan, dan objek-objek yang rata kiri (left-aligned) tetap berada di sebelah kiri. Sama, ketika saya meregangkan artboard secara vertikal, posisi elemen-elemen UI dipertahankan pada posisi sempurna.

Original and resized UI in Adobe XD
UI original dan hasil resize di Adobe XD

Menyesuaikan Alignment

Alignment dan spacing objek dapat disesuaikan dengan kebutuhan Anda. Misalnya, jika Anda melihat empat elemen di bagian bawah layar demo kami, Anda akan melihat bahwa ketika mengubah ukuran input email dan password diberi jarak yang terlalu jauh dari satu sama lain (seperti yang kita tahu, jarak adalah faktor penting dalam mendesain hubungan visual).

email and password inputs are spaced a bit too far away from one another

Dengan lebih dulu grouping inputnya kita dapat memberi tahu Adobe XD bahwa kita ingin mereka terhubung secara visual, jadi mereka akan lebih dekat bersama saat mengubah ukuran (perhatikan garis merah muda di sekeliling group):

Constraint

Manual constraintl membuat segala hal selangkah lebih maju dengan memungkinkan kita untuk menjadi lebih spesifik dengan bagaimana Adobe XD berurusan dengan resizing yang responsive.

Di bawah toggle Responsive Resize, ada switch untuk membuat proses Manual, bukan Automatic. Kontrol yang memberikan memungkinkan bagi kita untuk menentukan, untuk setiap objek, tepi artboard mana yang ingin kita patuhi / ikuti, dan apakah kita ingin tetap (fix) mempertahankan tinggi atau lebarnya.

Manual constraints in Adobe XD

Misalnya, ini adalah interface tempat objek-objek diubah secara otomatis secara responsive. Ini tidaklah buruk sama sekali, tetapi bisa lebih baik lagi:

automatic resize
Automatic resizing

Dengan satu atau dua elemen yang secara manual constraint, kita dapat memastikan tombol follow menempel ke tepi atas, sama halnya dengan bagian tab, dan post content tetap rata kiri:

Manual constraints much better
Manual constraints: jauh lebih baik!

Kesimpulan

Download update Adobe XD terbaru dan bermain-main dengan settingresponsive resize yang baru ini - Saya jamin Anda akan menyukai apa yang Anda temukan! Dengan pembaruan ini Adobe telah membuat proses yang sangat membosankan menjadi sangat intuitif dan cepat - dan dikombinasikan dengan fungsi seperti Repeat Grid Anda akan menemukan desain responsif dalam Adobe XD yang sangat powerful untuk desain UI yang rumit.

Pelajari Lebih Lanjut Tentang Adobe XD

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.