Kuinka viedä Adobe xd HTML-tiedostoon

Adobe XD on hämmästyttävä suunnittelutyökalu, jonka avulla voit helposti luoda fantastisia verkkosivustosuunnitelmia ilman aikaisempaa web-kehityskokemusta. Voit tuoda vain mallisi PSD-tiedostot Photoshopista ja luoda herättävän verkkosivuston käyttöliittymän.

Nämä mallit auttavat kehittäjiä ymmärtämään, kuinka haluat verkkosivustosi näyttävän, ja helpottamaan kehitysprosessia heidän puolestaan. Kuitenkin on olemassa vain rajoitettu määrä tapoja viedä mallit ohjelmistosta.

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

Myös ohjaamalla Tech

Paras 3 suunnittelutyökalua mallien ja kehysten luomiseen

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

Huomaa: Tällä menetelmällä luotua HTML-tiedostoa ei tule missään tapauksessa käsitellä kokonaisen verkkosivun pohjana. Tämä menetelmä on vain keino jakaa mallisi helposti kehittäjän kanssa eikä toimiva verkkosivustojen kehitysprosessi.

Vie Adobe XD-tiedostot HTML-muotoon laajennuksia käyttämällä

Nyt kun olemme saaneet tämän käytöstä, suorita vain nämä yksinkertaiset ohjeet ladataksesi tarvittava laajennus ja viedä sitten Adobe XD-tiedostot HTML: ään:

Vaihe 1: Napsauta hampurilavalikkopainiketta ohjelmiston vasemmassa yläkulmassa.

Vaihe 2: Vieritä kokonaan alas ja napsauta sitten Plugins-vaihtoehtoa. Se avaa uuden Plugins-paneelin päävalikon oikealla puolella.

Vaihe 3: Valitse Tutustu laajennukset -vaihtoehto Plugins-paneelista.

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

Kun olet asentanut vaaditun laajennuksen, avaa projekti, jonka haluat viedä HTML-muotoon, ja jatka sitten seuraavilla vaiheilla. Tätä artikkelia varten aion käyttää verkosta löydettyä ilmaista Adobe XD -taulua.

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

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

Samasta ikkunasta voit myös viedä useita taulut tai viimeksi muokatun taulun.

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

Vaihe 8: Jos haluat lisätä ulkoisen komentosarjan, tyylitaulukon tai vaihtoehtoisia fontteja vietyyn tiedostoon, voit lisätä ne samaan ikkunaan.

Vaihe 9: Sitten voit valita tulostettavan HTML-tiedoston mitat kirjoittamalla arvot Koko-vaihtoehdon 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 ruudun.

Vaihe 11: Lisäksi voit valita lisäasetuksia, kuten Näppäimistön selaus, Automaattinen päivitys jne., Valitsemalla asetusten vieressä olevat valintaruudut.

Vaihe 12: Kun olet viimeistely kaikki asetukset, napsauta vain sinistä Vie-painiketta ja olet valmis. Taidekartta näkyy HTML-tiedostona aikaisemmin valitsemassasi kohdekansiossa.

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

Huomaa jälleen kerran, että vietyä HTML: ää ei missään nimessä voida käyttää täysin toimivan verkkosivuston kehittämiseen. Tästä hetkestä lähtien sinun ei ole mitään tapaa julkaista Adobe XD -projektia suoraan verkossa, ja useiden Adobe-foorumeilla käytyjen keskustelujen mukaan sitä ei tule pian.

Adobe XD on vain prototyyppityökalu, jonka avulla voit luoda alkuperäisen suunnittelun ilman koodia. Kun suunnittelu on valmis, voit muuttaa Dreamweaverin kaltaisen alustan muuntamaan mallisi verkkosivustoksi. Mutta sitä varten tarvitset jonkin verran aiempaa web-kehityskokemusta tai sinun on palkattava joku, joka tekee.

Myös ohjaamalla Tech

#design

Napsauta tätä nähdäksesi suunnitteluartikkelisivumme

Vie Adobe XD-tiedosto HTML-tiedostoon

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

Seuraava: Tutustu seuraavaan artikkeliin parille ilmaiselle interaktiiviselle verkkosivustolle, joista voit oppia koodittamaan ja kirjoittamaan oman HTML-verkkosivustosi.