Kako izvoziti Adobe XD v HTML

Adobe XD je neverjetno orodje za oblikovanje, ki vam omogoča preprosto ustvarjanje fantastičnih dizajnov spletnih mest brez predhodnih izkušenj z razvojem spletnih strani. Lahko samo uvozite PSD datoteke svojega dizajna Photoshop in ustvarite privlačen uporabniški vmesnik spletnega mesta.

Ti dizajni v veliki meri pomagajo razvijalcem razumeti, kako želite videti vaše spletno mesto, in olajšajo razvojni proces z njihove strani. Vendar pa obstaja le omejeno število načinov, na katere lahko izvozite načrte iz programske opreme.

Lahko se odločite, da jih shranite kot datoteko XD in upate, da ima razvijalec programsko opremo že nameščeno v svojem sistemu, ali izvozite vsako umetniško ploščo kot posamezno PNG datoteko, ki je lahko nekoliko neprijetna za uporabo.

Na srečo obstaja priročna tretja oseba vključiti ki vam omogoča izvoz umetniških plošč kot datoteke HTML in o tem bom govoril v tem članku. Toda preden pridemo do tega, morate nekaj vedeti.

Opomba: Datoteka HTML, ustvarjena s to metodo, se nikakor ne sme obravnavati kot osnova za celotno spletno stran. Ta metoda je le sredstvo za enostavno deljenje vaših modelov z razvijalcem in ne funkcionalen proces razvoja spletnega mesta.

Izvozite datoteke Adobe XD v HTML z uporabo vtičnikov

Zdaj, ko smo to odpravili, sledite tem preprostim korakom, da prenesete zahtevani vtičnik in nato izvozite datoteke Adobe XD v HTML:

Korak 1: Kliknite gumb menija za hamburgerje v zgornjem levem kotu programske opreme.

2. korak: Pomaknite se do konca in nato kliknite možnost Vtičniki. To bo odprlo novo ploščo vtičnikov na desni strani glavnega menija.

3. korak: Na plošči Vtičniki izberite možnost Odkrij vtičnike.

4. korak: Na naslednji strani poiščite HTML in nato kliknite gumb Namesti poleg vtičnika Web Export.

Ko namestite zahtevani vtičnik, odprite projekt, ki ga želite izvoziti v HTML, in nato nadaljujte z naslednjimi koraki. Za ta članek bom uporabil brezplačno umetniško ploščo Adobe XD, ki sem jo našel na spletu.

5. korak: Izberite umetno ploščo, ki jo želite izvoziti, tako da kliknete nanjo.

6. korak: Zdaj kliknite gumb menija, se pomaknite do plošče Vtičniki in nato v novih nastavitvah vtičnika Web Export izberite možnost Izvozi umetniško ploščo.

V istem oknu lahko izberete tudi izvoz več umetniških plošč ali zadnje umetne plošče, ki ste jo urejali.

7. korak: V pojavnem oknu Export Artboard dodajte ime za datoteko in nato izberite mapo, v katero želite shraniti datoteko, tako da kliknete ikono majhne mape poleg možnosti Izvozi mapo.

8. korak: Zdaj, če želite v izvoženo datoteko dodati zunanji skript, slogovno tabelo ali alternativne pisave, jih lahko dodate v istem oknu.

9. korak: Nato lahko izberete dimenzije izhodne datoteke HTML tako, da vnesete vrednosti v prazen prostor poleg možnosti Velikost.

10. korak: Če želite zagotoviti, da se projekt pravilno prilagaja, lahko v istem oknu izberete tudi različne nastavitve skaliranja, tako da potrdite polje poleg vsake možnosti.

11. korak: Poleg tega lahko izberete vse dodatne nastavitve, kot so navigacija po tipkovnici, samodejno osveževanje itd. tako, da potrdite polja poleg možnosti.

12. korak: Ko dokončate vse nastavitve, samo kliknite modri gumb Izvozi in končali ste. Vaša umetniška plošča bo prikazana kot datoteka HTML v ciljni mapi, ki ste jo predhodno izbrali.

V istem oknu boste lahko tudi kopirali CSS in oznake svoje umetniške plošče, če želite te podatke deliti tudi s svojim razvijalcem.

Še enkrat upoštevajte, da izvoženega HTML nikakor ni mogoče uporabiti za razvoj popolnoma delujočega spletnega mesta. Trenutno ne morete objaviti projekta Adobe XD neposredno v spletu in glede na več razprave na forumih Adobe, kmalu ga ne bo.

Adobe XD je le orodje za izdelavo prototipov, ki vam omogoča, da ustvarite začetni dizajn brez kode. Ko imate pripravljen dizajn, lahko uporabite platformo, kot je Dreamweaver, da svoj dizajn pretvorite v spletno mesto. Toda za to boste potrebovali nekaj predhodnih izkušenj s spletnim razvojem ali pa boste morali najeti nekoga, ki to počne.

Izvozite svojo datoteko Adobe XD v HTML

Zdaj, ko veste, kako izvoziti svojo datoteko Adobe XD v HTML, sem prepričan, da boste lahko svoje umetniške plošče preprosto delili z razvijalcem ali odjemalcem. In ne bo vam treba skrbeti za kakršne koli težave z združljivostjo. Takoj namestite vtičnik in začnite z lahkoto izvažati svoje umetniške plošče.

Naslednji: Oglejte si naslednji članek za nekaj brezplačnih interaktivnih spletnih mest, na katerih se lahko naučite kodirati in napisati svoje spletno mesto HTML.