Tutorial Adobe XD

Setelah menjelajahi susunan dasar Adobe XD antarmuka, contoh berikut menunjukkan

proses langkah-demi-langkah untuk membuat prototipe UI pertama Anda pada Adobe XD.
Kita akan membangun sesuatu untuk ukuran layar iPhone 6. Anda bisa mengunduh fail
latihan dengan mengunjungi visiting repositori Github untuk tutorial inil. Atau mengunduh
langsung dari Pixapay:

• lotus
• flower
• sparrow
• baboon

Bagian pertama dari tutorial ini akan berfokus pada pembuatan layout pada tampilan Design
Adobe XD.
1. Membuat Proyek Prototipe

Setelah Adobe XD dibuka, layar awal akan muncul dan memungkinkan Anda memilih jenis
proyek Pilih iPhone 6 (375 × 667px). emudian klik ikon iPhone untuk membuat proyek. Dari
iOS Apple, Anda bisa mengakses elemen UI iPhone yang bisa digunakan pada prototipe
Anda. Setelah artboard dibuat, klik dua kali nama artboard, dan ubah ke "Home”.

Layar awal Adobe XD

2. Membuat latar belakang Prototipe
Klik artboard untuk menampilkan karakteristiknya di Properties panel pada sisi kanan
aplikasi, dan klik warna Fill warna untuk membuka pilihan otak dialog Colors. Atur warna
menjadi abu-abu gelap dan tutup kotak dialog.

Tetapkan latar belakang artboard ke abu-abu gelap

Advertisement
3. Pengaturan Layar Header

Selanjutnya masuk ke File > Import. Di situs web fail, mengarahkan ke gambar header dan
klik Import. Gunakan kontrol di sekitar gambar untuk mengubah ukurannya agar sesuai
dengan tajuk layar. Anda juga bisa mengklik dua kali gambar untuk memotong gambar.

Pilih Text Tools dari panel Tools, klik pada area header dan ketik "Nature". Klik dua kali teks
dan dari panel Properties kanan, pilih "Helvetica", atur bentuk tulisan menjadi "bold", dan
ukuran ke "32". Klik dua kali warna Fill lalu atur ke "abu-abu gelap".

4. Membangun Latar Belakang Area Konten

Pilih sarana Rectangle dari panel Tools di sisi kanan, lalu buat persegi panjang di bawah
header. Dari kanan panel Properties, atur warna Fill menjadi abu-abu tua, dan hapus
centang pada opsi Border untuk menghilangkan goresan.
Membuat latar belakang area konten
Tambahkan Konten

Impor konten thumbnail konten dan tambahkan teks seperti yang ditunjukkan pada langkah
3. Atur thumbnail agar sesuai dengan latar belakang area konten dan di sisi kanan
tambahkan teks seperti yang ditunjukkan pada gambar 5 di bawah ini. Untuk memotong
thumbnail pada area tertentu, Anda dapat mengklik dua kali gambar tersebut dan
menggunakan keempat sudut untuk memotongnya.
Menambahkan konten di bawah area header
Advertisement

6. Membuat Kisi Konten

Salah satu sarana yang paling berguna di Adobe XD adalah Anda dapat membuat kisi dari
konten yang ada tanpa menggandakannya secara manual. Tekan Shift pada keyboard Anda
dan pilih thumbnail, content background, dan text. Kemudian, klik tombol Repeat Grid di
panel Properties. Ini menerjemahkan konten yang dibuat ke dalam kisi.

Tarik ikon hijau bagian bawah untuk membuat kisi konten vertikal. Kemudian, Anda dapat
mengklik dua kali konten berulang untuk memodifikasinya. Terakhir, pilih konten dan
pilih Ungroup Grid untuk memutus keterkaitan di antara keduanya.
7. Membuat Halaman Baru (Artboard)

Untuk membuat halaman dengan layout baru, tekan pada Artboard tool dari panel Tools
yang terletak di sebelah kiri. Kemudian, pilih template iPhone 6 dari kanan untuk membuat
halaman baru.
Membuat Artboard baru
8. Membuat lebih banyak halaman

Ulangi langkah di atas untuk membuat lebih banyak halaman dan tambahkan konten ke
halaman seperti petunjuk di atas. Layout tampilan terakhir harus seperti gambar di bawah
ini.

Prototipe terakhir dari desain layout UI

Setelah desain layout selesai, kita akan beralih ke tampilan Prototype untuk membangun
keterkaitan antara halaman yang dibuat.
9. Mengatur Beranda Proyek

Sebelum mengatur hubungan antar halaman, kita perlu menetapkan beranda untuk proyek
tersebut. Beranda bisa berupa halaman yang dibuat. Dalam contoh ini, kami akan
menetapkan layout pertama yang kami buat sebagai beranda dengan mengklik
ikon Home yang muncul pada bagian kiri atas artboard.

Tetapkan beranda pada proyek

10. Membangun Keterkaitan Antara Halaman
Untuk menghubungkan antar halaman, pilih beranda, klik panah buram ke sisi kanan.
Menu Target akan muncul; pilih halaman berikutnya, dan atur jenis animasi transisi
(misalnya "Dissolve"). Ulangi langkah ini untuk menghubungkan antara halaman lain.
Tautan antar halaman
11. Menciptakan Interaksi

Dalam prototipe ini, konten blok pertama yang terdapat di beranda harus beralih menjadi
konten pertama artboard, dan konten blok kedua harus terhubung ke artboard kedua ... dll.
Jadi, pilih konten blok pertama, dan klik kanan tanda panah biru untuk menetapkan target
sama dengan apa yang kita lakukan di langkah 10. Ulangi langkah dengan konten blok kedua.

Tambahkan interaksi pada konten

Setelah membuat prototipe, ada dua metode utama pratinjau. Pertama adalah
menggunakan fitur Preview yang terdapat dalam Adobe XD itu sendiri, dan yang lainnya
adalah melalui hipertaut web yang bisa dikirim ke anggota tim.
12. Pratinjau Prototip

Klik ikon Preview di sebelah kanan atas aplikasi. Ini akan menampilkan layar pratinjau yang
memungkinkan kita melihat dan mengarahkan halaman yang berbeda. Sebagai tambahan
yang bagus, ia memiliki ikon Record yang memungkinkan kita untuk merekam arus antar
halaman dan menyimpannya ke format Quicktime (MOV).

Pratinjau prototipe pada Adobe XD

13. Berbagi Prototipe

Dilakukan! Sekarang kita hanya perlu membagikan dokumen kita dengan anggota tim lain
atau pemangku kepentingan yang belum tentu menggunakan XD. Klik pada ikon Share di
bagian kanan atas aplikasi; menu akan muncul, memberikan URL yang bisa disalin dan dibagi
antar anggota tim: