Kako izvesti Adobe XD u HTML

Adobe XD je nevjerojatan alat za dizajn koji vam omogućuje jednostavno stvaranje fantastičnih dizajna web stranica bez prethodnog iskustva u razvoju weba. Možete samo uvesti PSD datoteke svog dizajna iz Photoshop i stvorite privlačno korisničko sučelje web stranice.

Ovi dizajni uvelike pomažu programerima da shvate kako želite da vaša web stranica izgleda i olakšavaju proces razvoja s njihove strane. Međutim, postoji samo ograničen broj načina na koje možete izvesti dizajne iz softvera.

Možete ih ili spremiti kao XD datoteku i nadati se da programer već ima instaliran softver na svom sustavu ili izvesti svaku montažnu ploču kao pojedinačnu PNG datoteku koja može biti pomalo nezgodna za korištenje.

Srećom, postoji zgodna treća strana uključiti koji vam omogućuje izvoz artboarda kao HTML datoteke i to je ono o čemu ću govoriti u ovom članku. Ali prije nego što dođemo do toga, postoji nešto što trebate znati.

Bilješka: HTML datoteka generirana ovom metodom se ni na koji način ne smije smatrati osnovom za cjelovitu web stranicu. Ova metoda je samo način da jednostavno podijelite svoje dizajne s programerom, a ne funkcionalan proces razvoja web stranice.

Izvezite Adobe XD datoteke u HTML pomoću dodataka

Sada kada smo to riješili, samo slijedite ove jednostavne korake za preuzimanje potrebnog dodatka, a zatim izvezite Adobe XD datoteke u HTML:

Korak 1: Kliknite na gumb izbornika hamburgera u gornjem lijevom kutu softvera.

Korak 2: Pomaknite se do kraja, a zatim kliknite na opciju Plugins. To će otvoriti novu ploču s dodacima desno od glavnog izbornika.

3. korak: Odaberite opciju Otkrij dodatke na ploči Plugins.

4. korak: Na sljedećoj stranici potražite HTML, a zatim kliknite na gumb Instaliraj pored dodatka za web izvoz.

Nakon što instalirate potrebni dodatak, otvorite projekt koji želite izvesti u HTML i zatim nastavite sa sljedećim koracima. Za ovaj članak koristit ću besplatnu Adobe XD artboard koju sam pronašao na internetu.

5. korak: Odaberite montažnu ploču koju želite izvesti klikom na nju.

6. korak: Sada kliknite na gumb izbornika, idite na ploču Plugins i zatim odaberite opciju Izvoz Artboard iz novih postavki dodatka za Web Export.

U istom prozoru također možete odabrati izvoz više umjetničkih ploča ili posljednjeg uređivanja koje ste uređivali.

7. korak: U skočnom prozoru Export Artboard dodajte naziv za datoteku, a zatim odaberite mapu u koju želite spremiti datoteku klikom na malu ikonu mape pored opcije Izvoz mape.

Korak 8: Sada, ako želite dodati vanjsku skriptu, tablicu stilova ili alternativne fontove u izvezenu datoteku, možete ih dodati u istom prozoru.

9. korak: Zatim možete odabrati dimenzije izlazne HTML datoteke upisivanjem vrijednosti u prazan prostor pored opcije Veličina.

10. korak: Kako biste osigurali ispravno skaliranje projekta, također možete odabrati različite postavke skaliranja iz istog prozora tako da potvrdite okvir pored svake opcije.

11. korak: Nadalje, možete odabrati bilo koje dodatne postavke poput navigacije tipkovnicom, automatskog osvježavanja itd. tako da potvrdite okvire pored opcija.

Korak 12: Nakon što ste dovršili sve postavke, samo kliknite na plavi gumb Izvoz i gotovi ste. Vaša artboard će se pojaviti kao HTML datoteka u odredišnoj mapi koju ste prethodno odabrali.

Iz istog prozora također ćete moći kopirati CSS i oznaku svoje umjetničke ploče ako također želite podijeliti te podatke sa svojim razvojnim programerom.

Još jednom, imajte na umu da se izvezeni HTML nipošto ne može koristiti za razvoj potpuno funkcionalne web stranice. Za sada ne postoji način da Adobe XD projekt objavite izravno na webu, a prema nekoliko rasprave na Adobe forumima, neće ga uskoro biti.

Adobe XD je samo alat za izradu prototipa koji vam omogućuje izradu početnog dizajna bez koda. Nakon što pripremite dizajn, možete koristiti platformu kao što je Dreamweaver da svoj dizajn pretvorite u web stranicu. Ali za to će vam trebati prethodno iskustvo u razvoju weba ili ćete morati zaposliti nekoga tko to radi.

Izvezite svoju Adobe XD datoteku u HTML

Dakle, sada kada znate kako izvesti svoju Adobe XD datoteku u HTML, siguran sam da ćete moći lako podijeliti svoje umjetničke ploče s razvojnim programerom ili klijentom. I nećete morati brinuti o problemima s kompatibilnošću. Odmah instalirajte dodatak i počnite s lakoćom izvoziti svoje umjetničke ploče.

sljedeće: Pogledajte sljedeći članak za nekoliko besplatnih interaktivnih web stranica na kojima možete naučiti kako kodirati i pisati vlastitu HTML web stranicu.