Paano i-export ang adobe xd sa html

Ang Adobe XD ay isang kamangha-manghang tool ng disenyo na nagbibigay-daan sa iyo na madaling lumikha ng mga kamangha-manghang mga disenyo ng website nang walang anumang naranasang karanasan sa web development. Maaari ka lamang mag-import ng mga file ng PSD ng iyong disenyo mula sa Photoshop at lumikha ng isang website ng UI na nakahahalina sa mata.

Ang mga disenyo na ito ay pumunta sa isang mahabang paraan sa pagtulong sa mga developer na maunawaan kung paano mo nais ang hitsura ng iyong website at gawing mas madali ang proseso ng pag-unlad sa kanilang bahagi. Gayunpaman, mayroon lamang isang limitadong bilang ng mga paraan na ma-export mo ang mga disenyo mula sa software.

Maaari mong piliin ang upang mai-save ang mga ito bilang isang XD file at umaasa na ang developer ay mayroon nang software na naka-install sa kanyang system o i-export ang bawat artboard bilang isang indibidwal na file PNG na maaaring medyo hindi gagamitin.

Gayundin sa Gabay na Tech

Pinakamahusay na 3 Mga Kasangkapan sa Disenyo para sa Paglikha ng mga Mockup at Wireframes

Sa kabutihang palad, mayroong isang madaling gamitin na plugin ng third-party na nagbibigay-daan sa iyo na i-export ang mga artboards bilang mga file ng HTML at iyon ang sasabihin ko. Ngunit bago tayo makarating dito, mayroong isang bagay na kailangan mong malaman.

Tandaan: Ang HTML file na nabuo sa pamamagitan ng paggamit ng pamamaraang ito ay hindi dapat na ituring bilang isang batayan para sa isang kumpletong web page. Ang pamamaraang ito ay isang paraan lamang upang madaling ibahagi ang iyong mga disenyo sa isang developer at hindi isang proseso ng pag-unlad ng website.

I-export ang Adobe XD Files sa HTML Gamit ang Mga Plugin

Ngayon na nakuha namin iyon, sundin lamang ang mga simpleng hakbang upang i-download ang kinakailangang plugin at pagkatapos ay i-export ang mga Adobe XD file sa HTML:

Hakbang 1: Mag-click sa pindutan ng menu ng hamburger sa tuktok na kaliwang sulok ng software.

Hakbang 2: Mag-scroll sa lahat ng paraan pababa at pagkatapos ay mag-click sa pagpipilian na Plugins. Buksan iyon ng isang bagong panel ng Plugins sa kanan ng pangunahing menu.

Hakbang 3: Piliin ang pagpipilian ng Discover Plugins mula sa panel ng Plugins.

Hakbang 4: Sa sumusunod na pahina, maghanap para sa HTML at pagkatapos ay mag-click sa pindutan ng I-install sa tabi ng plugin ng Web Export.

Kapag na-install mo ang kinakailangang plugin, buksan ang proyekto na nais mong i-export sa HTML at pagkatapos ay magpatuloy sa mga sumusunod na hakbang. Para sa artikulong ito Gumagamit ako ng isang libreng art sa Adobe XD na aking nahanap online.

Hakbang 5: Piliin ang artboard na nais mong i-export sa pamamagitan ng pag-click dito.

Hakbang 6: Ngayon mag-click sa pindutan ng menu, mag-navigate sa panel ng Plugins at pagkatapos ay piliin ang pagpipilian ng Export Artboard mula sa bagong mga setting ng plugin ng Web Export.

Mula sa parehong window, maaari mo ring piliing mag-export ng maraming mga artboards o ang huling artboard na iyong na-edit.

Hakbang 7: Sa pop-up ng Export Artboard, magdagdag ng isang pangalan para sa file at pagkatapos ay piliin ang folder kung saan nais mong i-save ang file sa pamamagitan ng pag-click sa maliit na icon ng folder sa tabi ng pagpipilian ng Export Folder.

Hakbang 8: Ngayon, kung nais mong magdagdag ng isang panlabas na script, styleheet o alternatibong mga font sa na-export na file, maaari mong idagdag ang mga nasa parehong window.

Hakbang 9: Pagkatapos, maaari mong piliin ang mga sukat ng file ng output ng HTML sa pamamagitan ng pag-type sa mga halaga sa blangko na puwang sa tabi ng pagpipilian sa Laki.

Hakbang 10: Upang matiyak na maayos ang mga kaliskis ng proyekto, maaari ka ring pumili ng iba't ibang mga setting ng scaling mula sa parehong window sa pamamagitan ng pagsuri sa kahon sa tabi ng bawat pagpipilian.

Hakbang 11: Bukod dito, maaari kang pumili ng anumang mga karagdagang setting tulad ng Keyboard Navigation, Auto-refresh, atbp sa pamamagitan ng pagsuri sa mga kahon sa tabi ng mga pagpipilian.

Hakbang 12: Kapag natapos mo na ang lahat ng mga setting, mag-click lamang sa asul na I-export na button at tapos ka na. Ang iyong artboard ay lilitaw bilang isang file ng HTML sa folder ng patutunguhan na dati mong napili.

Mula sa parehong window, magagawa mong kopyahin ang CSS at markup ng iyong artboard kung nais mo ring ibahagi ang impormasyong iyon sa iyong developer.

Muli, tandaan na ang na-export na HTML ay maaaring hindi magamit upang mabuo ang isang ganap na functional na website. Sa ngayon, walang paraan para sa iyo na mag-publish ng isang proyekto ng X XD sa web nang direkta, at ayon sa ilang mga talakayan sa mga forum ng Adobe, hindi magkakaroon ng anumang oras sa lalong madaling panahon.

Ang Adobe XD ay isang tool lamang na prototyping na nagbibigay-daan sa iyo upang lumikha ng isang paunang disenyo nang walang code. Kapag mayroon kang handa na disenyo, maaari mong gamitin ang isang platform tulad ng Dreamweaver upang mai-convert ang iyong disenyo sa isang website. Ngunit para doon, kakailanganin mo ang ilang paunang karanasan sa pagbuo ng web o kailangan mong umarkila ng isang tao.

Gayundin sa Gabay na Tech

#design

Mag-click dito upang makita ang aming pahina ng mga artikulo ng disenyo

I-export ang Iyong Adobe XD File sa HTML

Kaya, ngayon alam mo kung paano i-export ang iyong Adobe XD file sa HTML, sigurado ako na madali mong maibabahagi ang iyong mga artboards sa isang developer o isang kliyente. At hindi ka na kailangang mag-alala tungkol sa anumang mga isyu sa pagiging tugma. I-install ang plugin kaagad at simulan ang pag-export ng iyong mga artboards nang madali.

Susunod up: Suriin ang sumusunod na artikulo para sa isang pares ng libreng interactive na mga website kung saan maaari mong malaman kung paano mag-code at isulat ang iyong sariling HTML website.