Cara Menggunakan Kit UI di Adobe XD:
Bagi mereka yang tertarik dengan desain web, kit UI di Adobe XD merupakan cara yang bagus untuk memulai proyek desain baru. Dengan kit ini, Anda mendapatkan akses ke beberapa sumber berguna yang dapat Anda modifikasi dan gunakan untuk desain situs web atau aplikasi Anda.
Jika Anda baru mengenal perangkat lunak dan tidak yakin cara menggunakan kit UI di Adobe XD, Anda telah datang ke tempat yang tepat. Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menginstal kit UI di perangkat lunak dan kemudian menggunakan sumber daya yang disertakan untuk proyek Anda.
Cara Mengdowload Kit UI di Adobe XD
Pertama, mari kita lihat cara mengdowload kit UI di Adobe XD, langsung dari dalam perangkat lunak. Cukup ikuti langkah-langkah ini untuk memulai:
Langkah 1: Klik tombol menu hamburger di pojok kiri atas perangkat lunak.
Langkah 2: Di menu, gulir ke bawah ke opsi Dapatkan Kit UI, lalu klik salah satu dari tiga opsi yang tersedia.
Untuk artikel ini, saya akan memilih kit Google Material UI.
Namun, tergantung pada proyek Anda, Anda dapat memilih kit Apple iOS atau Microsoft Windows. Itu akan membuka halaman web resmi tempat Anda dapat mengdowload kit UI secara gratis.
Langkah 3: Temukan kit Adobe XD UI di halaman web berikut, dan dowload di sistem Anda.
Langkah 4: Sekarang buka file yang didowload di Adobe XD dan Anda akan disambut dengan sekumpulan artboards yang berisi sumber daya UI untuk masing-masing platform.
Anda dapat menahan tombol Ctrl dan menggerakkan roda gulir untuk memperbesar/memperkecil untuk melihat semua artboard individual.
Jika Anda ingin mengdowload Wireframes, Anda dapat mengklik opsi Wireframes di menu Get UI Kits.
Anda juga dapat mencari kit UI tambahan di situs web Adobe dengan mengeklik opsi More UI Kits di menu Get UI Kits.
Situs web ini memiliki beberapa opsi bagus untuk dipilih, termasuk kit Movie Magic UI yang sangat keren ini yang terlihat seperti tampilan kepala.
Sekarang setelah Anda mengetahui cara mengdowload kit UI, mari kita lihat bagaimana Anda dapat menggunakannya dalam proyek Anda.
Cara Menggunakan Kit UI di Adobe XD
Untuk menggunakan kit UI di proyek Anda, cukup ikuti langkah-langkah sederhana ini:
Langkah 1: Perbesar elemen UI yang ingin Anda gunakan dalam proyek Anda dan klik judulnya untuk memilihnya.
Langkah 2: Sekarang salin elemen menggunakan pintasan Ctrl+C.
Langkah 3: Kemudian buka proyek Adobe XD baru dari menu.
Langkah 4: Di sini, rekatkan elemen UI menggunakan pintasan Ctrl+V.
Untuk artikel ini, saya akan menggunakan elemen Mobile Dark dari kit Google Material UI. Elemen menyertakan panduan untuk membantu Anda menempatkan lebih banyak lapisan, tetapi jika Anda tidak ingin menggunakannya, Anda dapat dengan mudah menghapusnya dengan mengikuti langkah berikutnya.
Langkah 5: Untuk menghapus panduan, klik ikon gembok di pojok kiri atas lalu tekan hapus. Anda dapat melewati langkah ini jika ingin menggunakan panduan untuk menempatkan lebih banyak objek ke dalam elemen secara akurat.
Langkah 6: Sekarang kembali ke kit UI untuk memilih elemen lain untuk ditambahkan ke halaman ini. Sekali lagi, klik judul elemen dan salin menggunakan pintasan Ctrl+C.
Saya akan membuat roti panggang dasar untuk artikel ini yang akan saya gunakan salah satu dialognya. Langkah 7: Tempel elemen baru pada elemen sebelumnya dan kemudian sejajarkan sesuai panduan.
Langkah 8: Sekarang untuk mengedit setiap elemen dalam roti panggang, klik dua kali pada kotak teks lalu masukkan teks yang ingin Anda gunakan. Pertama, mari kita ubah judul roti bakarnya.
Selanjutnya, ubah konten badan dengan mengklik dua kali pada kotak teks dan mengetik apa pun yang ingin Anda tambahkan.
Anda juga dapat mengubah teks tombol dengan cara yang sama.
Setelah selesai mengedit teks, Anda dapat mengubah warna dan opasitas teks. Untuk mengubah opacity, gerakkan saja slider di bawah opsi Opacity di toolbar sebelah kanan.
Untuk mengubah warna teks, klik persegi panjang di sebelah opsi Isi lalu pilih warna baru dari pemilih warna.
Dan bukan hanya teks yang dapat Anda edit dengan cara ini.
Anda juga dapat mengubah warna dan opacity dari hampir semua item di kotak dialog, yang bagus jika Anda menginginkan skema warna yang unik.
Setelah Anda puas dengan hasilnya, lanjutkan dan simpan file Anda dengan mengeklik opsi Simpan Sebagai di menu atau dengan menggunakan pintasan Shift+Ctrl+S.
Sempurnakan Desain Anda Menggunakan Kit UI
Sekarang setelah Anda tahu cara mengdowload dan menggunakan kit UI di Adobe XD, saya yakin Anda akan mulai membuat desain yang luar biasa dalam waktu singkat. Kit UI ini pasti sangat berguna dan membantu Anda langsung ke proyek Anda tanpa khawatir tentang mendesain setiap elemen UI.
Selanjutnya: Menyelesaikan proyek di Adobe XD dan tidak tahu cara mengekspornya ke HTML? Lihat artikel selanjutnya untuk tutorial langkah demi langkah sederhana.