Adobe XD:n vieminen HTML-muotoon

Adobe XD on hämmästyttävä suunnittelutyökalu, jonka avulla voit helposti luoda upeita verkkosivustosuunnitelmia ilman aikaisempaa kokemusta web-kehityksestä. Voit tuoda suunnittelusi PSD-tiedostoja Photoshopista ja luoda silmiinpistävän verkkosivuston käyttöliittymän.

Nämä mallit auttavat kehittäjiä ymmärtämään, miltä haluat verkkosivustosi näyttävän, ja helpottavat kehitysprosessia heidän osaltaan. On kuitenkin vain rajoitettu määrä tapoja viedä malleja ohjelmistosta.

Voit joko tallentaa ne XD-tiedostona ja toivoa, että kehittäjällä on jo ohjelmisto asennettuna järjestelmään tai viedä jokainen piirros yksittäisenä PNG-tiedostona, jonka käyttö voi olla hieman hankalaa.

Onneksi on olemassa kätevä kolmannen osapuolen laajennus, jonka avulla voit viedä taulut HTML-tiedostoina, ja siitä puhun tässä artikkelissa. Mutta ennen kuin pääsemme siihen, sinun on tiedettävä jotain.

Huomautus:

Vie Adobe XD -tiedostot HTML-muotoon lisäosien avulla

Nyt kun olemme saaneet sen pois tieltä, lataa tarvittava laajennus noudattamalla näitä yksinkertaisia ​​ohjeita ja vie sitten Adobe XD -tiedostot HTML-muotoon:

Vaihe 1: Napsauta hampurilaisvalikkopainiketta ohjelmiston vasemmassa yläkulmassa.

Vaihe 2: Vieritä kokonaan alas ja napsauta sitten Plugins-vaihtoehtoa. Tämä avaa uuden Plugins-paneelin päävalikon oikealle puolelle.

Vaihe 3: Valitse Plugins-paneelista Discover Plugins -vaihtoehto.

Vaihe 4: Etsi seuraavalla sivulla HTML ja napsauta sitten Asenna-painiketta Web Export -laajennuksen vieressä.

Kun olet asentanut tarvittavan laajennuksen, avaa projekti, jonka haluat viedä HTML-muotoon, ja jatka sitten seuraavilla vaiheilla. Tässä artikkelissa käytän ilmaista Adobe XD -artboardia, jonka löysin verkosta.

Vaihe 5: Valitse vietävä taulu napsauttamalla sitä.

Vaihe 6: Napsauta nyt valikkopainiketta, siirry Plugins-paneeliin ja valitse sitten Export Artboard -vaihtoehto uusista Web Export -laajennuksen asetuksista.

Samasta ikkunasta voit myös valita, haluatko viedä useita piirroksia tai viimeksi muokkaamasi taulun.

Vaihe 7: Lisää tiedostolle nimi Export Artboard -ponnahdusikkunassa ja valitse sitten kansio, johon haluat tallentaa tiedoston, napsauttamalla Vie kansio -vaihtoehdon vieressä olevaa pientä kansiokuvaketta.

Vaihe 8: Nyt, jos haluat lisätä ulkoisen skriptin, tyylitaulukon tai vaihtoehtoisia kirjasimia vietyyn tiedostoon, voit lisätä ne samassa ikkunassa.

Vaihe 9: Tämän jälkeen voit valita tulostettavan HTML-tiedoston mitat kirjoittamalla arvot koko-asetuksen vieressä olevaan tyhjään tilaan.

Vaihe 10: Varmistaaksesi, että projekti skaalautuu oikein, voit myös valita useita skaalausasetuksia samasta ikkunasta valitsemalla kunkin vaihtoehdon vieressä olevan valintaruudun.

Vaihe 11: Lisäksi voit valita lisäasetuksia, kuten näppäimistön navigoinnin, automaattisen päivityksen jne. valitsemalla vaihtoehtojen vieressä olevat valintaruudut.

Vaihe 12: Kun olet tehnyt kaikki asetukset, napsauta sinistä Vie-painiketta ja olet valmis. Piirustustaulusi näkyy HTML-tiedostona aiemmin valitsemassasi kohdekansiossa.

Samasta ikkunasta voit myös kopioida taidetaulusi CSS:n ja merkinnät, jos haluat myös jakaa nämä tiedot kehittäjäsi kanssa.

Huomaa jälleen kerran, että vietyä HTML-koodia ei voi missään tapauksessa käyttää täysin toimivan verkkosivuston kehittämiseen. Toistaiseksi sinulla ei ole mahdollisuutta julkaista Adobe XD -projektia suoraan verkossa, ja useiden Adoben foorumeilla käytyjen keskustelujen mukaan sellaista ei ole tulossa lähiaikoina.

Adobe XD on vain prototyyppityökalu, jonka avulla voit luoda alkuperäisen suunnittelun ilman koodia. Kun suunnittelu on valmis, voit käyttää Dreamweaverin kaltaista alustaa muuntaaksesi suunnittelusi verkkosivustoksi. Mutta sitä varten tarvitset aikaisempaa kokemusta web-kehityksestä tai sinun on palkattava joku, joka osaa.

Vie Adobe XD -tiedostosi HTML-muotoon

Joten nyt kun tiedät kuinka viedä Adobe XD -tiedostosi HTML-muotoon, olen varma, että pystyt helposti jakamaan piirtotaulusi kehittäjän tai asiakkaan kanssa. Ja sinun ei tarvitse huolehtia yhteensopivuusongelmista. Asenna laajennus heti ja aloita taulujen vienti helposti.

Seuraava: Katso seuraavasta artikkelista muutama ilmainen interaktiivinen verkkosivusto, joilla voit oppia koodaamaan ja kirjoittamaan oman HTML-sivustosi.