Kaip eksportuoti Adobe XD į HTML

„Adobe XD“ yra nuostabus dizaino įrankis, leidžiantis lengvai sukurti fantastišką svetainių dizainą be jokios išankstinės žiniatinklio kūrimo patirties. Galite tiesiog importuoti savo dizaino PSD failus iš Photoshop ir sukurti akį traukiančią svetainės vartotojo sąsają.

Šie dizainai labai padeda kūrėjams suprasti, kaip norite, kad jūsų svetainė atrodytų, ir palengvinti kūrimo procesą. Tačiau yra tik ribotas skaičius būdų, kaip galite eksportuoti dizainą iš programinės įrangos.

Galite pasirinkti išsaugoti juos kaip XD failą ir tikėtis, kad kūrėjas jau turi įdiegtą programinę įrangą savo sistemoje arba eksportuoti kiekvieną piešimo lentą kaip atskirą PNG failą, kurį naudoti gali būti šiek tiek nepatogu.

Laimei, yra patogi trečioji šalis Prijunkite leidžia eksportuoti piešinius kaip HTML failus, ir apie tai kalbėsiu šiame straipsnyje. Tačiau prieš tai, kai mes tai padarysime, reikia kai ką žinoti.

Pastaba: HTML failas, sukurtas naudojant šį metodą, jokiu būdu neturėtų būti traktuojamas kaip viso tinklalapio pagrindas. Šis metodas yra tik priemonė lengvai bendrinti savo dizainą su kūrėju, o ne funkcionalus svetainės kūrimo procesas.

Eksportuokite Adobe XD failus į HTML naudodami papildinius

Dabar, kai to nepadarėme, tiesiog atlikite šiuos paprastus veiksmus, kad atsisiųstumėte reikiamą papildinį ir eksportuotumėte Adobe XD failus į HTML:

1 žingsnis: Viršutiniame kairiajame programinės įrangos kampe spustelėkite mėsainio meniu mygtuką.

2 žingsnis: Slinkite iki galo žemyn ir spustelėkite parinktį Papildiniai. Tai atvers naują Plugins skydelį pagrindinio meniu dešinėje.

3 veiksmas: Papildinių skydelyje pasirinkite parinktį Atraskite papildinius.

4 veiksmas: Kitame puslapyje ieškokite HTML ir spustelėkite mygtuką Įdiegti, esantį šalia žiniatinklio eksporto papildinio.

Įdiegę reikiamą papildinį, atidarykite projektą, kurį norite eksportuoti į HTML, ir tęskite toliau nurodytus veiksmus. Šiam straipsniui naudosiu nemokamą Adobe XD piešimo lentą, kurią radau internete.

5 veiksmas: Pasirinkite piešimo lentą, kurią norite eksportuoti, spustelėdami ją.

6 veiksmas: Dabar spustelėkite meniu mygtuką, eikite į papildinių skydelį ir iš naujų žiniatinklio eksporto įskiepių nustatymų pasirinkite parinktį Export Artboard.

Tame pačiame lange taip pat galite pasirinkti eksportuoti kelias piešinių lentas arba paskutinę redaguotą piešinių lentą.

7 veiksmas: Iššokančiajame lange Eksportuoti iliustraciją pridėkite failo pavadinimą ir pasirinkite aplanką, kuriame norite išsaugoti failą, spustelėdami mažą aplanko piktogramą šalia parinkties Eksportuoti aplanką.

8 veiksmas: Dabar, jei norite į eksportuotą failą įtraukti išorinį scenarijų, stiliaus lapą ar alternatyvius šriftus, galite juos įtraukti tame pačiame lange.

9 veiksmas: Tada galite pasirinkti išvesties HTML failo matmenis, įvesdami reikšmes tuščioje vietoje šalia parinkties Dydis.

10 veiksmas: Norėdami užtikrinti, kad projektas būtų tinkamai pritaikytas, tame pačiame lange taip pat galite pasirinkti įvairius mastelio nustatymus, pažymėdami langelį šalia kiekvienos parinkties.

11 veiksmas: Be to, galite pasirinkti bet kokius papildomus nustatymus, pvz., klaviatūros navigaciją, automatinį atnaujinimą ir kt. pažymėdami langelius šalia parinkčių.

12 veiksmas: Kai baigsite visus nustatymus, tiesiog spustelėkite mėlyną mygtuką Eksportuoti ir viskas. Jūsų piešinių lenta bus rodoma kaip HTML failas paskirties aplanke, kurį anksčiau pasirinkote.

Tame pačiame lange taip pat galėsite nukopijuoti savo piešinių lentos CSS ir žymėjimą, jei taip pat norite bendrinti šią informaciją su kūrėju.

Dar kartą atminkite, kad eksportuotas HTML jokiu būdu negali būti naudojamas kuriant visiškai veikiančią svetainę. Šiuo metu nėra galimybės tiesiogiai publikuoti „Adobe XD“ projekto žiniatinklyje ir, remiantis kai kuriais diskusijos Adobe forumuose, greitai jo nebus.

„Adobe XD“ yra tik prototipų kūrimo įrankis, leidžiantis sukurti pradinį dizainą be kodo. Paruošę dizainą, galite naudoti tokią platformą kaip „Dreamweaver“, kad pakeistumėte dizainą į svetainę. Tačiau tam jums reikės tam tikros ankstesnės žiniatinklio kūrimo patirties arba turėsite pasamdyti ką nors, kas tai daro.

Eksportuokite savo Adobe XD failą į HTML

Taigi, dabar, kai žinote, kaip eksportuoti „Adobe XD“ failą į HTML, esu tikras, kad galėsite lengvai bendrinti piešinius su kūrėju ar klientu. Ir jums nereikės jaudintis dėl suderinamumo problemų. Nedelsdami įdiekite papildinį ir pradėkite lengvai eksportuoti savo piešinių lentas.

Kitas: Šiame straipsnyje rasite keletą nemokamų interaktyvių svetainių, kuriose galite sužinoti, kaip koduoti ir parašyti savo HTML svetainę.