Bagi yang berminat Rancangan Situs web, Kit UI di Adobe XD adalah cara yang bagus untuk memulai proyek Rancangan baru. Dengan kit ini, Anda mendapatkan akses ke beberapa sumber daya berguna yang dapat Anda modifikasi dan gunakan untuk situs web atau desain aplikasi Anda.
Jika Anda baru mengenal perangkat lunak dan tidak yakin bagaimana menggunakan Kit UI Adobe XD, Anda berada di tempat yang tepat. Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menginstal kit UI dalam program dan kemudian menggunakan sumber daya yang disertakan untuk proyek Anda.
Cara Mengunduh Kit Antarmuka Pengguna di Adobe XD
Pertama, mari kita lihat cara mengunduh kit UI di Adobe XD , langsung dari dalam program. Cukup ikuti langkah-langkah ini untuk memulai:
Perlengkapan 1: Klik tombol menu hamburger di sudut kiri atas program.
Perlengkapan 2: Dalam daftar, gulir ke bawah ke opsi Dapatkan Kit UI, lalu klik salah satu dari tiga opsi yang tersedia.
Untuk artikel ini, saya akan memilih Google Material UI Toolkit.
Namun, tergantung pada proyek Anda, Anda dapat memilih Apple iOS atau Microsoft Windows Kits. Ini akan membuka halaman web resmi tempat Anda dapat mengunduh kit UI secara gratis.
Perlengkapan 3: Menemukan Adobe Kit XD UI di halaman web berikut, dan unduh ke sistem Anda.
Perlengkapan 4: Sekarang buka file yang diunduh di Adobe XD, dan Anda akan disambut dengan satu set artboards yang berisi sumber daya antarmuka pengguna untuk platform masing-masing.
Anda dapat menahan tombol Ctrl dan menggerakkan roda gulir untuk memperbesar/memperkecil untuk melihat semua artboard individual.
Jika Anda ingin mengunduh Wireframes, Anda dapat mengklik opsi Wireframes di menu Get UI Kits.
Anda juga dapat mencari kit UI tambahan di situs web Adobe dengan mengklik opsi Kit UI Lainnya di menu Dapatkan Kit UI.
Situs web ini memiliki beberapa opsi hebat untuk dipilih, termasuk UI Movie Magic yang sangat keren yang terlihat seperti tampilan head-up.
Sekarang setelah Anda mengetahui cara mengunduh kit UI, mari kita lihat cara menggunakannya di proyek Anda.
Cara Menggunakan Kit UI di Adobe XD
Untuk menggunakan kit UI dalam proyek Anda, cukup ikuti langkah-langkah sederhana ini:
Perlengkapan 1: Perbesar widget yang ingin Anda gunakan dalam proyek Anda dan klik judulnya untuk memilihnya.
Perlengkapan 2: Sekarang salin item menggunakan pintasan Ctrl + C.
Perlengkapan 3: Kemudian buka proyek Adobe XD baru dari daftar.
Perlengkapan 4: Di sini, rekatkan widget menggunakan pintasan Ctrl + V.
Untuk artikel ini, saya akan menggunakan elemen Mobile Dark dari toolkit UI Material Google. Item tersebut mencakup panduan untuk membantu Anda menempatkan lebih banyak lapisan, tetapi jika Anda tidak ingin menggunakannya, Anda dapat dengan mudah menghapusnya dengan mengikuti langkah berikutnya.
Perlengkapan 5: Untuk menghapus panduan, klik ikon kunci di sudut kiri atas lalu tekan Hapus. Anda dapat melewati langkah ini jika Anda ingin menggunakan panduan untuk menempatkan lebih banyak objek secara tepat di elemen.
Perlengkapan 6: Sekarang kembali ke grup UI untuk memilih elemen lain untuk ditambahkan ke halaman ini. Sekali lagi, klik judul item dan salin menggunakan pintasan Ctrl + C.
Saya akan membuat cap dasar untuk artikel ini yang akan saya gunakan dengan salah satu dialognya.
Perlengkapan 7: Rekatkan elemen baru ke yang sebelumnya dan kemudian sejajarkan sesuai dengan panduan.
Perlengkapan 8: Sekarang untuk mengedit setiap item dalam toast, klik dua kali pada kotak teks dan kemudian masukkan teks yang ingin Anda gunakan. Pertama, mari kita ganti judul roti panggangnya.
Selanjutnya, ubah konten teks dengan mengklik dua kali pada kotak teks dan mengetik apa yang ingin Anda tambahkan.
Anda juga dapat mengubah teks tombol dengan cara yang sama.
Setelah Anda selesai mengedit teks, Anda dapat mengubah warna dan transparansi teks. Untuk mengubah opacity, cukup gerakkan penggeser di bawah opsi opacity di bilah alat ke kanan.
Untuk mengubah warna teks, klik pada persegi panjang di sebelah opsi Fill dan kemudian pilih warna baru dari color picker.
Dan bukan hanya teks yang dapat Anda edit dengan cara ini. Anda juga dapat mengubah warna dan transparansi hampir semua elemen dalam dialog, yang sangat bagus jika Anda menggunakan skema warna yang unik.
Setelah Anda puas dengan hasilnya, lanjutkan dan simpan file Anda dengan mengklik opsi Simpan Sebagai di menu atau menggunakan pintasan Shift + Ctrl + S.
Sukseskan desain Anda dengan kit UI
Sekarang setelah Anda mengetahui cara mengunduh dan menggunakan kit UI di Adobe XD, saya yakin Anda akan mulai menghasilkan desain hebat dalam waktu singkat. Toolkit UI ini pasti sangat berguna dan membantu Anda langsung ke proyek Anda tanpa harus khawatir merancang semua elemen UI.
