KATEGORI

Cara Mengekspor Adobe XD ke HTML

SUBULUSSALAMKINI.COM -  Hallo sahabat semuanya, di postingan pertama kali ini saya akan membuat artikel tutorial Cara Mengekspor Adobe XD ke HTML.  buat kalian para tukang coding jomblo, upssss. maaf mbloh. hhhehe

APA IT ADOBE XD?

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.

Cara Mengekspor Adobe XD ke HTML

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.

Untungnya, ada plugin pihak ketiga yang berguna yang memungkinkan Anda mengekspor artboards sebagai file HTML dan itulah yang akan saya bicarakan dalam artikel ini. 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 lengkap. Metode ini hanya sarana untuk membagikan desain Anda dengan mudah kepada pengembang dan bukan proses pengembangan situs web fungsional.

EKSPOR ADOBE XD FILES KE HTML MENGGUNAKAN PLUGIN

Sekarang kita sudah menyingkir, ikuti saja langkah-langkah sederhana ini untuk mengunduh plugin yang diperlukan dan kemudian ekspor 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 bahwa 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 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 membagikan informasi itu dengan pengembang Anda.

Ekspor Adobe Xd Ke Html 15

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 perlu mempekerjakan seseorang yang melakukannya.

oke temen-temen sekian dulu tutorial Cara Mengekspor Adobe XD ke HTML, jika kamu mempunyai pertanyaan, silahkan tuliskan di kolom komentar yaaa. Makasih :)

No comments:

Post a Comment

Follow by Email