Cara menggunakan ui kit di adobe xd

Bagi mereka yang tertarik dalam mendesain web, kit UI di Adobe XD adalah cara yang bagus untuk memulai proyek desain baru. Dengan kit ini, Anda mendapatkan akses ke beberapa sumber daya praktis 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 di Adobe XD, maka Anda telah datang ke tempat yang tepat., Saya akan menunjukkan kepada Anda bagaimana Anda dapat menginstal kit UI dalam perangkat lunak dan kemudian menggunakan sumber daya yang disertakan untuk proyek Anda.

Juga di

Bagaimana Batch Mengkonversi Foto dengan Adobe Bridge

Cara Mengunduh Kit UI di Adobe XD

Pertama, mari kita lihat bagaimana Anda dapat mengunduh perangkat UI di Adobe XD, langsung dari dalam perangkat lunak. Cukup ikuti langkah-langkah ini untuk memulai:

Langkah 1: Klik tombol menu hamburger di sudut kiri atas perangkat lunak.

Langkah 2: Di menu, gulir ke bawah ke opsi Dapatkan Kit UI dan kemudian klik salah satu dari tiga opsi yang tersedia.

Untuk artikel ini, saya akan memilih kit UI Material Google. Namun, tergantung pada proyek Anda, Anda dapat memilih perangkat Apple iOS atau Microsoft Windows. Itu akan membuka halaman web resmi dari mana Anda dapat mengunduh kit UI secara gratis.

Langkah 3: Temukan kit Adobe XD UI di halaman web berikut, dan unduh di sistem Anda.

Langkah 4: Sekarang buka file yang diunduh dalam Adobe XD dan Anda akan disambut dengan sekelompok artboards berisi sumber daya UI untuk platform masing-masing.

Anda dapat menahan tombol Ctrl dan menggerakkan roda gulir untuk memperbesar / memperkecil untuk melihat semua artboards individu.

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 More UI Kits di menu Get UI Kits.

Situs web ini memiliki beberapa opsi hebat untuk dipilih, termasuk kit UI Magic Film yang benar-benar keren ini yang terlihat seperti tampilan utama.

Sekarang setelah Anda tahu cara mengunduh 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: Memperbesar elemen UI yang ingin Anda gunakan dalam proyek Anda dan klik judulnya untuk memilihnya.

Langkah 2: Sekarang salin elemen menggunakan cara pintas Ctrl + C.

Langkah 3: Kemudian buka proyek Adobe XD baru dari menu.

Langkah 4: Di sini, tempelkan elemen UI menggunakan pintasan Ctrl + V.

Untuk artikel ini, saya akan menggunakan elemen Mobile Dark dari kit UI Material Google. Elemen ini mencakup panduan untuk membantu Anda menempatkan lebih banyak layer, tetapi jika Anda tidak ingin menggunakannya, Anda dapat dengan mudah menghapusnya dengan mengikuti langkah berikutnya.

Langkah 5: Untuk menghapus panduan, klik pada ikon kunci di sudut kiri atas dan kemudian tekan hapus. Anda bisa 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 pada judul elemen dan salin menggunakan shortcut Ctrl + C.

Saya akan membuat bersulang dasar untuk artikel ini yang saya akan menggunakan salah satu dialog.

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 dan kemudian masukkan teks yang ingin Anda gunakan. Pertama, mari kita ubah judul roti bakar.

Selanjutnya, ubah konten tubuh dengan mengklik dua kali pada kotak teks dan mengetikkan 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 opacity teks. Untuk mengubah opacity, cukup gerakkan slider di bawah opsi Opacity di toolbar di sebelah kanan.

Untuk mengubah warna teks, klik pada persegi panjang di sebelah opsi Isi dan kemudian pilih warna baru dari pemilih warna.

Dan bukan hanya teks yang bisa Anda edit dengan cara ini. Anda juga dapat mengubah warna dan opacity dari hampir semua item di kotak dialog, yang sangat bagus jika Anda menggunakan skema warna yang unik.

Setelah Anda puas dengan hasilnya, langsung saja simpan file Anda dengan mengklik opsi Simpan Sebagai di menu atau dengan menggunakan pintasan Shift + Ctrl + S.

Juga di

#desain grafis

Klik di sini untuk melihat halaman artikel desain grafis kami

Sempurnakan Desain Anda Menggunakan Kit UI

Sekarang setelah Anda tahu cara mengunduh dan menggunakan perangkat UI di Adobe XD, saya yakin Anda akan mulai menghasilkan desain yang luar biasa dalam waktu singkat. Kit UI ini pasti sangat berguna dan membantu Anda langsung ke proyek Anda tanpa perlu khawatir merancang setiap elemen UI.

Selanjutnya: Menyelesaikan proyek pada Adobe XD dan tidak tahu cara mengekspornya ke HTML? Lihatlah artikel selanjutnya untuk tutorial langkah demi langkah yang sederhana.