Bagaimana untuk mengeksport adobe xd ke html

Adobe XD adalah alat reka bentuk yang menakjubkan yang membolehkan anda dengan mudah membuat reka bentuk laman web yang hebat tanpa pengalaman pembangunan web sebelum ini. Anda hanya boleh mengimport fail JPA reka bentuk anda dari Photoshop dan mencipta UI laman web yang menarik.

Reka bentuk ini banyak membantu pemaju memahami bagaimana anda mahu laman web anda kelihatan dan membuat proses pembangunan sedikit lebih mudah di pihak mereka. Walau bagaimanapun, hanya terdapat beberapa cara yang boleh anda eksport reka bentuk dari perisian tersebut.

Anda boleh memilih untuk menyimpannya sebagai fail XD dan berharap pemaju sudah memiliki perisian yang dipasang pada sistemnya atau mengeksport setiap artboard sebagai fail PNG individu yang boleh sedikit menyusahkan untuk digunakan.

Juga pada

Best 3 Design Tools for Creating Mockups and Wireframes

Terima kasih, terdapat plugin pihak ketiga yang berguna yang membolehkan anda mengeksport papan iklan sebagai fail HTML dan itulah yang saya akan bincangkan. Tetapi sebelum kita dapat, ada sesuatu yang perlu anda ketahui.

Nota: Fail HTML yang dihasilkan dengan menggunakan kaedah ini tidak boleh dianggap sebagai pangkalan untuk halaman web yang lengkap. Kaedah ini hanya satu cara untuk berkongsi rekaan dengan mudah dengan pemaju dan bukan proses pembangunan laman web yang berfungsi.

Eksport Fail Adobe XD ke HTML Menggunakan Plugin

Sekarang bahawa kita telah mendapat jalan itu, ikuti langkah-langkah mudah ini untuk memuat turun plugin yang diperlukan dan kemudian mengeksport fail Adobe XD ke HTML:

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

Langkah 2: Tinjau semua jalan ke bawah dan kemudian klik pada pilihan Plugin. Itu akan membuka panel Plugin baru di sebelah kanan menu utama.

Langkah 3: Pilih pilihan Plugin Terok dari panel Plugin.

Langkah 4: Di halaman berikut, cari HTML dan kemudian klik pada butang Pasang bersebelahan dengan plugin Eksport Web.

Sebaik sahaja anda memasang plugin yang diperlukan, buka projek yang ingin anda eksport ke HTML dan kemudian lanjutkan dengan langkah berikut. Untuk artikel ini saya akan menggunakan papan iklan Adobe XD percuma yang saya dapati dalam talian.

Langkah 5: Pilih artboard yang anda mahu eksport dengan mengklik padanya.

Langkah 6: Sekarang klik pada butang menu, navigasi ke panel Plugin dan kemudian pilih pilihan Eksport Artboard dari tetapan plugin Eksport Web baru.

Dari tetingkap yang sama, anda juga boleh memilih untuk mengeksport beberapa papan iklan atau artboard terakhir yang anda edit.

Langkah 7: Dalam pop timbul Artboard Eksport, tambahkan nama untuk fail tersebut dan kemudian pilih folder di mana anda ingin menyimpan fail dengan mengklik ikon folder kecil di sebelah pilihan Folder Eksport.

Langkah 8: Sekarang, jika anda ingin menambahkan skrip luaran, lembaran gaya atau fon alternatif ke fail yang dieksport, anda boleh menambah mereka dalam tetingkap yang sama.

Langkah 9: Kemudian, anda boleh memilih dimensi fail HTML output dengan menaip nilai-nilai di ruang kosong di sebelah pilihan Saiz.

Langkah 10: Untuk memastikan skala projek dengan betul, anda juga boleh memilih pelbagai tetapan skala dari tetingkap yang sama dengan memeriksa kotak di sebelah setiap pilihan.

Langkah 11: Tambahan lagi, anda boleh memilih tetapan tambahan seperti Navigasi Papan Kekunci, Auto-refresh, dan lain-lain dengan menyemak kotak di sebelah pilihan.

Langkah 12: Setelah selesai semua tetapan, klik pada butang Eksport biru dan anda selesai. Artboard anda akan muncul sebagai fail HTML dalam folder destinasi yang anda pilih sebelum ini.

Dari tetingkap yang sama, anda juga akan dapat menyalin CSS dan markup artboard anda jika anda juga ingin berkongsi maklumat itu dengan pemaju anda.

Sekali lagi, perhatikan bahawa HTML yang dieksport tidak boleh digunakan untuk membangunkan laman web berfungsi sepenuhnya. Sehingga sekarang, tidak ada cara untuk anda menerbitkan projek Adobe XD secara langsung ke web, dan menurut beberapa perbincangan di forum Adobe, tidak akan ada masa yang lama lagi.

Adobe XD hanyalah alat prototaip yang membolehkan anda membuat reka bentuk awal tanpa kod. Sebaik sahaja anda mempunyai reka bentuk bersedia, anda boleh menggunakan platform seperti Dreamweaver untuk menukar reka bentuk anda ke laman web. Tetapi untuk itu, anda memerlukan beberapa pengalaman pembangunan web sebelum ini atau anda perlu mengupah seseorang yang melakukannya.

Juga pada

#design

Klik di sini untuk melihat halaman artikel reka bentuk kami

Eksport Fail XD Adobe Anda ke HTML

Oleh itu, sekarang bahawa anda tahu bagaimana untuk mengeksport fail Adobe XD anda ke HTML, saya pasti anda akan dapat dengan mudah berkongsi papan iklan anda dengan pemaju atau pelanggan. Dan anda tidak perlu bimbang tentang sebarang isu keserasian. Pasang plugin segera dan mula mengeksport papan iklan anda dengan mudah.

Seterusnya: Lihat artikel berikut untuk beberapa laman web interaktif percuma di mana anda boleh belajar bagaimana untuk kod dan menulis laman web HTML anda sendiri.