Cara Mengekspor Adobe XD ke HTML:
Adobe XD merupakan alat desain luar biasa yang memungkinkan Anda dengan mudah membuat desain situs web yang fantastis tanpa pengalaman pengembangan web sebelumnya. Anda cukup 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 sedikit lebih mudah di pihak mereka. Namun, hanya ada beberapa cara untuk mengekspor desain dari perangkat lunak.
Anda dapat memilih untuk menyimpannya sebagai file XD dan berharap pengembang sudah menginstal perangkat lunak di sistemnya atau mengekspor setiap artboard sebagai file PNG individual yang mungkin sedikit merepotkan untuk digunakan. Untungnya, ada plugin pihak ketiga yang berguna yang memungkinkan Anda mengekspor artboards sebagai file HTML dan itulah yang akan saya bicarakan di artikel ini.
Tapi sebelum kita sampai ke sana, ada sesuatu yang perlu Anda ketahui. Catatan:
Ekspor File Adobe XD ke HTML Menggunakan Plugin
Sekarang setelah kita menyingkir, cukup ikuti langkah-langkah sederhana ini untuk mengdowload plugin yang diperlukan dan kemudian mengekspor file Adobe XD ke HTML:
Langkah 1: Klik tombol menu hamburger di pojok kiri atas perangkat lunak.
Langkah 2: Gulir ke bawah lalu klik opsi Plugin. Itu akan membuka panel Plugin baru di sebelah kanan menu utama.
Langkah 3: Pilih opsi Discover Plugins dari panel Plugins.
Langkah 4: Di halaman berikut, cari HTML lalu klik tombol Instal di sebelah plugin Ekspor Web.
Setelah Anda menginstal plugin yang diperlukan, buka proyek yang ingin Anda ekspor ke HTML, lalu 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 tombol menu, arahkan ke panel Plugins dan kemudian pilih opsi Export Artboard dari pengaturan plugin Web Export yang baru.
Dari jendela yang sama, Anda juga dapat memilih untuk mengekspor beberapa artboard atau artboard terakhir yang Anda edit. Langkah 7: Di pop-up Ekspor Artboard, tambahkan nama untuk file tersebut dan kemudian pilih folder tempat Anda ingin menyimpan file dengan mengklik 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 file HTML keluaran dengan mengetikkan nilai di ruang kosong di sebelah opsi Ukuran.
Langkah 10: Untuk memastikan skala proyek dengan benar, Anda juga dapat memilih berbagai pengaturan penskalaan dari jendela yang sama dengan mencentang kotak di samping setiap opsi.
Langkah 11: Selanjutnya, Anda dapat memilih pengaturan tambahan seperti Navigasi Keyboard, Penyegaran otomatis, dll.
Dengan mencentang kotak di sebelah opsi.
Langkah 12: Setelah Anda menyelesaikan semua pengaturan, cukup klik tombol Ekspor berwarna biru dan selesai.
Artboard Anda akan muncul sebagai file HTML di folder tujuan yang Anda pilih sebelumnya.
Dari jendela yang sama, Anda juga dapat menyalin CSS dan markup artboard Anda jika Anda juga ingin berbagi informasi tersebut dengan pengembang Anda.
Sekali lagi, perhatikan 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 dalam waktu dekat.
Adobe XD hanyalah alat prototyping yang memungkinkan Anda membuat desain awal tanpa kode. Setelah desain Anda siap, Anda dapat menggunakan platform seperti Dreamweaver untuk mengonversi desain Anda menjadi situs web.
Tetapi untuk itu, Anda memerlukan pengalaman pengembangan web sebelumnya atau Anda harus mempekerjakan seseorang yang memilikinya.
Ekspor File Adobe XD Anda ke HTML
Jadi, sekarang setelah Anda mengetahui cara mengekspor file Adobe XD ke HTML, saya yakin Anda dapat dengan mudah membagikan artboards Anda dengan pengembang atau klien. Dan Anda tidak perlu khawatir tentang masalah kompatibilitas apa pun.
Instal plugin segera dan mulailah mengekspor artboards Anda dengan mudah. Selanjutnya: Lihat artikel berikut untuk beberapa situs web interaktif gratis tempat Anda dapat mempelajari cara membuat kode dan menulis situs web HTML Anda sendiri.