Bagaimana cara mengekspor adobe xd ke html

Adobe XD adalah alat desain luar biasa yang memungkinkan Anda dengan mudah membuat desain situs web yang fantastis tanpa pengalaman pengembangan web sebelumnya. Anda bisa mengimpor file PSD dari desain Anda dari Photoshop dan membuat UI situs web yang menarik.

Desain ini sangat membantu pengembang memahami bagaimana Anda ingin situs web Anda terlihat dan membuat proses pengembangan menjadi lebih mudah. Namun, hanya ada sejumlah cara terbatas untuk mengekspor desain dari perangkat lunak.

Anda dapat memilih untuk menyimpannya sebagai file XD dan berharap pengembang sudah memiliki perangkat lunak yang diinstal pada sistemnya atau mengekspor setiap artboard sebagai file PNG individual yang mungkin sedikit tidak nyaman untuk digunakan.

Juga di

3 Alat Desain Terbaik untuk Membuat Maket dan Wireframe

Untungnya, ada plugin pihak ketiga yang berguna yang memungkinkan Anda mengekspor artboards sebagai file HTML dan itulah yang akan saya bicarakan. Tapi sebelum kita sampai, ada sesuatu yang perlu Anda ketahui.

Catatan: File HTML yang dihasilkan dengan menggunakan metode ini tidak boleh diperlakukan sebagai basis untuk halaman web yang lengkap. Metode ini hanya sarana untuk membagikan desain Anda dengan mudah kepada pengembang dan bukan proses pengembangan situs web fungsional.

Ekspor File Adobe XD ke HTML Menggunakan Plugin

Sekarang kita sudah dapat dari itu, cukup ikuti langkah-langkah sederhana ini untuk mengunduh plugin yang diperlukan dan kemudian mengekspor file Adobe XD ke HTML:

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

Langkah 2: Gulirkan semuanya ke bawah lalu klik pada opsi Plugins. Itu akan membuka panel Plugins baru di sebelah kanan menu utama.

Langkah 3: Pilih opsi Discover Plugins dari panel Plugins.

Langkah 4: Di halaman berikut, cari HTML dan kemudian klik tombol Instal di sebelah plugin Ekspor Web.

Setelah Anda menginstal plugin yang diperlukan, buka proyek yang ingin Anda ekspor ke HTML dan kemudian lanjutkan dengan langkah-langkah berikut. Untuk artikel ini saya akan menggunakan artboard Adobe XD gratis yang saya temukan online.

Langkah 5: Pilih artboard yang ingin Anda ekspor dengan mengkliknya.

Langkah 6: Sekarang klik pada tombol menu, arahkan ke panel Plugins dan kemudian pilih opsi Ekspor Artboard dari pengaturan plugin Ekspor Web baru.

Dari jendela yang sama, Anda juga dapat memilih untuk mengekspor beberapa artboards atau artboard terakhir yang Anda edit.

Langkah 7: Dalam pop-up Ekspor Artboard, tambahkan nama untuk file dan kemudian pilih folder di mana Anda ingin menyimpan file dengan mengklik pada ikon folder kecil di sebelah opsi Ekspor Folder.

Langkah 8: Sekarang, jika Anda ingin menambahkan skrip eksternal, stylesheet, atau font alternatif ke file yang diekspor, Anda dapat menambahkannya di jendela yang sama.

Langkah 9: Kemudian, Anda dapat memilih dimensi dari file HTML output dengan mengetikkan nilai-nilai di ruang kosong di sebelah opsi Ukuran.

Langkah 10: Untuk memastikan proyek berskala dengan benar, Anda juga dapat memilih berbagai pengaturan penskalaan dari jendela yang sama dengan mencentang kotak di sebelah setiap opsi.

Langkah 11: Selanjutnya, Anda dapat memilih pengaturan tambahan seperti Navigasi Keyboard, Pembaruan Otomatis, dll. Dengan mencentang kotak di sebelah opsi.

Langkah 12: Setelah Anda menyelesaikan semua pengaturan, cukup klik pada tombol Ekspor biru dan Anda selesai. Artboard Anda akan muncul sebagai file HTML di folder tujuan yang sebelumnya Anda pilih.

Dari jendela yang sama, Anda juga dapat menyalin CSS dan markup artboard Anda jika Anda juga ingin berbagi informasi itu dengan pengembang Anda.

Sekali lagi, harap dicatat bahwa HTML yang diekspor sama sekali tidak dapat digunakan untuk mengembangkan situs web yang berfungsi penuh. Sampai sekarang, tidak ada cara bagi Anda untuk mempublikasikan proyek Adobe XD ke web secara langsung, dan menurut beberapa diskusi di forum Adobe, tidak akan ada proyek dalam waktu dekat.

Adobe XD hanyalah alat prototyping yang memungkinkan Anda membuat desain awal tanpa kode. Setelah Anda memiliki desain yang siap, Anda dapat menggunakan platform seperti Dreamweaver untuk mengubah desain Anda menjadi situs web. Tetapi untuk itu, Anda akan memerlukan beberapa pengalaman pengembangan web sebelumnya atau Anda harus mempekerjakan seseorang yang melakukannya.

Juga di

#Desain

Klik di sini untuk melihat halaman artikel desain kami

Ekspor File Adobe XD Anda ke HTML

Jadi, sekarang setelah Anda tahu cara mengekspor file Adobe XD Anda ke HTML, saya yakin Anda dapat dengan mudah berbagi artboards Anda dengan pengembang atau klien. Dan Anda tidak perlu khawatir tentang masalah kompatibilitas. Instal plugin segera dan mulai mengekspor artboards Anda dengan mudah.

Selanjutnya: Lihat artikel berikut untuk beberapa situs web interaktif gratis di mana Anda dapat mempelajari cara membuat kode dan menulis situs web HTML Anda sendiri.