Cara menggunakan ui kit dalam adobe xd

Bagi mereka yang berminat dalam merekabentuk web, kit UI di Adobe XD adalah cara yang baik untuk melancarkan projek reka bentuk baru. Dengan kit ini, anda mendapat akses kepada beberapa sumber berguna yang boleh anda ubah dan gunakan untuk reka bentuk laman web atau aplikasi anda.

Jika anda baru dalam perisian dan tidak pasti bagaimana untuk menggunakan kit UI dalam Adobe XD, maka anda telah datang ke tempat yang betul., Saya akan menunjukkan kepada anda bagaimana anda boleh memasang kit UI dalam perisian dan kemudian gunakan sumber yang disertakan untuk projek anda.

Juga pada

Bagaimana Batch Convert Photos dengan Adobe Bridge

Bagaimana untuk Mengunduh Kit UI di Adobe XD

Mula-mula, mari kita lihat bagaimana anda boleh memuat turun kit UI di Adobe XD, langsung dari dalam perisian. Ikuti langkah berikut untuk bermula:

Langkah 1: Klik pada butang menu hamburger di penjuru kiri atas perisian.

Langkah 2: Dalam menu, tatal ke bawah untuk mendapatkan pilihan Kit UI dan kemudian klik pada salah satu daripada tiga pilihan yang tersedia.

Untuk artikel ini, saya akan memilih kit Bahan Google UI. Walau bagaimanapun, bergantung kepada projek anda, anda boleh memilih sama ada Apple iOS atau kit Microsoft Windows. Itu akan membuka laman web rasmi dari mana anda boleh memuat turun kit UI secara percuma.

Langkah 3: Cari kit Adobe XD UI di halaman web berikut, dan muat turun pada sistem anda.

Langkah 4: Sekarang buka fail yang dimuat turun di Adobe XD dan anda akan disambut dengan banyak papan iklan yang mengandungi sumber UI untuk platform masing-masing.

Anda boleh menahan butang Ctrl dan gerakkan roda skrol untuk zum masuk / keluar untuk melihat semua papan iklan individu.

Sekiranya anda ingin memuat turun Wireframes, anda boleh mengklik pada pilihan Wireframes dalam menu Get UI Kit.

Anda juga boleh mencari kit UI tambahan di laman web Adobe dengan mengklik pada pilihan Lagi UI Kit dalam menu Get UI Kit.

Laman web ini mempunyai beberapa pilihan yang hebat untuk dipilih, termasuk kit Magic Movie Magic yang sangat sejuk yang kelihatan seperti paparan kepala.

Sekarang bahawa anda tahu bagaimana untuk memuat turun kit UI, mari kita lihat bagaimana anda boleh menggunakannya dalam projek anda.

Bagaimana Menggunakan Kit UI di Adobe XD

Untuk menggunakan kit UI dalam projek anda, ikuti langkah berikut:

Langkah 1: Zum masuk pada elemen UI yang anda ingin gunakan dalam projek anda dan klik pada tajuknya untuk memilihnya.

Langkah 2: Sekarang salin elemen menggunakan pintasan Ctrl + C.

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

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

Untuk artikel ini, saya akan menggunakan elemen Dark Mobile dari kit Google Material UI. Unsur ini termasuk panduan untuk membantu anda meletakkan lebih banyak lapisan, tetapi jika anda tidak mahu menggunakannya, anda dapat dengan mudah menghapusnya dengan mengikuti langkah seterusnya.

Langkah 5: Untuk mengeluarkan panduan, klik pada ikon kunci di sudut kiri atas dan kemudian tekan padam. Anda boleh melangkau langkah ini jika anda ingin menggunakan panduan untuk menempatkan lebih banyak objek ke dalam elemen dengan tepat.

Langkah 6: Sekarang kembali ke kit UI untuk memilih elemen lain untuk ditambahkan pada halaman ini. Sekali lagi, klik pada tajuk elemen dan salinnya menggunakan pintasan Ctrl + C.

Saya akan membuat roti bakar asas untuk artikel ini yang akan saya gunakan salah satu dialog.

Langkah 7: Sisipkan elemen baru pada elemen sebelumnya dan kemudian selarinya mengikut panduan.

Langkah 8: Sekarang untuk mengedit setiap elemen dalam roti bakar, klik dua kali pada kotak teks dan kemudian masukkan teks yang anda mahu gunakan. Pertama, mari kita ubah tajuk roti bakar.

Seterusnya, tukar kandungan badan dengan mengklik dua kali pada kotak teks dan menaip apa sahaja yang anda ingin tambah.

Anda juga boleh menukar teks butang dengan cara yang sama. Sebaik sahaja anda selesai dengan menyunting teks, anda boleh menukar warna dan kelegapan teks. Untuk menukar kelegapan, hanya pindahkan slider di bawah pilihan Opacity di bar alat di sebelah kanan.

Untuk menukar warna teks, klik pada segi empat tepat di sebelah pilihan Isi dan kemudian pilih warna baru dari pemetik warna.

Dan bukan hanya teks yang anda boleh edit dengan cara ini. Anda juga boleh menukar warna dan kelegapan hampir semua item dalam kotak dialog, yang bagus jika anda pergi untuk skema warna yang unik.

Sebaik sahaja anda berpuas hati dengan hasilnya, teruskan dan simpan fail anda dengan mengklik pada pilihan Save As di dalam menu atau dengan menggunakan pintasan Shift + Ctrl + S.

Juga pada

#reka bentuk grafik

Klik di sini untuk melihat halaman artikel reka bentuk grafik kami

Sempurna Reka Bentuk Anda Menggunakan Kit UI

Sekarang anda tahu bagaimana untuk memuat turun dan menggunakan kit UI di Adobe XD, saya pasti anda akan mula membuat reka bentuk yang luar biasa dalam masa yang singkat. Kit UI ini pasti agak berguna dan membantu anda mendapatkan projek anda terus tanpa bimbang tentang mereka bentuk setiap elemen UI.

Seterusnya: Menyiapkan projek pada Adobe XD dan tidak tahu bagaimana untuk mengeksport ke HTML? Lihat artikel seterusnya untuk tutorial langkah demi langkah yang mudah.