Kaip eksportuoti „Adobe XD“ į HTML

„Adobe XD“ yra nuostabi projektavimo priemonė, leidžianti lengvai kurti fantastiškus svetainių dizainus be jokios išankstinės žiniatinklio kūrimo patirties. Galite tiesiog importuoti savo dizaino PSD failus iš „Photoshop“ ir sukurkite akį traukiančią svetainės vartotojo sąsają.




Šie dizainai nuosekliai padeda kūrėjams suprasti, kaip norite, kad jūsų svetainė atrodytų, ir šiek tiek palengvinti jų kūrimo procesą. Tačiau yra tik keletas 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 yra įdiegęs programinę įrangą savo sistemoje, arba eksportuoti kiekvieną iliustraciją kaip atskirą PNG failą, kurį naudoti gali būti šiek tiek nepatogu.



Taip pat apie „Guiding Tech“
3 geriausi projektavimo įrankiai, skirti kurti maketus ir vielos rėmus
Skaityti daugiau

Laimei, čia yra patogi trečioji šalis prijungti tai leidžia eksportuoti lenteles kaip HTML failus ir apie tai, apie ką aš kalbėsiu šiame straipsnyje. Bet prieš mums įeinant į tai, ką reikia žinoti.

Pastaba: Šiuo metodu sugeneruotas HTML failas jokiu būdu neturėtų būti laikomas viso interneto puslapio pagrindu. Šis metodas yra tik priemonė lengvai dalintis savo projektais su kūrėju, o ne funkcinis svetainės kūrimo procesas.



Eksportuokite „Adobe XD“ failus į HTML naudodami papildinius

Dabar, kai mes tai sukūrėme, tiesiog atlikite šiuos paprastus veiksmus, norėdami atsisiųsti reikiamą papildinį ir eksportuoti „Adobe XD“ failus į HTML:

1 žingsnis: Spustelėkite mėsainio meniu mygtuką, esantį viršutiniame kairiajame programinės įrangos kampe.

2 žingsnis: Slinkite iki galo ir spustelėkite parinktį „Papildiniai“. Tai atidarys naują „Plugins“ skydą pagrindinio meniu dešinėje.

3 veiksmas: „Plugins“ skydelyje pasirinkite parinktį Discover Plugins.

4 veiksmas: Kitame puslapyje ieškokite HTML ir tada spustelėkite mygtuką Įdiegti šalia „Web Export“ papildinio.

Įdiegę reikiamą papildinį, atidarykite norimą eksportuoti projektą į HTML ir toliau atlikite šiuos veiksmus. Šiam straipsniui naudosiu nemokamą „Adobe XD“ iliustraciją, kurią radau internete.

5 veiksmas: Pasirinkite norimą eksportuoti iliustraciją spustelėdami ją.

6 veiksmas: Dabar spustelėkite meniu mygtuką, eikite į papildinių skydelį ir tada pasirinkite parinktį Eksportuoti lentelę iš naujų žiniatinklio eksporto papildinių nustatymų.

Iš to paties lango taip pat galite pasirinkti eksportuoti kelis paveikslus arba paskutinį redaguotą paveikslėlį.

7 veiksmas: Iššokančiajame meniu „Eksportuoti„ Artboard “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 prie eksportuojamo failo pridėti išorinį scenarijų, stiliaus lentelę ar alternatyvius šriftus, galite juos pridėti tame pačiame lange.

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

10 veiksmas: Norėdami įsitikinti, kad projekto masteliai yra tinkami, iš to paties lango taip pat galite pasirinkti įvairius mastelio nustatymus, pažymėdami langelį šalia kiekvienos parinkties.

11 veiksmas: Be to, pažymėdami langelius šalia parinkčių, galite pasirinkti bet kokius papildomus parametrus, tokius kaip Naršymas klaviatūra, Automatinis atnaujinimas ir kt.

12 veiksmas: Kai baigsite visus parametrus, tiesiog spustelėkite mėlyną mygtuką „Eksportuoti“ ir viskas bus atlikta. Jūsų iliustracija bus rodoma kaip HTML failas anksčiau pasirinktame paskirties aplanke.

Iš to paties lango taip pat galėsite nukopijuoti CSS ir brėžinio brėžinius, jei taip pat norite pasidalinti ta informacija su savo kūrėju.

Dar kartą atkreipkite dėmesį, kad eksportuotas HTML jokiu būdu negali būti naudojamas visiškai funkcionaliai svetainei kurti. Kaip dabar, nėra jokios galimybės tiesiogiai skelbti „Adobe XD“ projektą žiniatinklyje ir, remiantis keletu diskusijos „Adobe“ forumuose, greitai nebus tokio.

„Adobe XD“ yra tik prototipų kūrimo įrankis, leidžiantis sukurti pradinį dizainą be kodo. Paruošę dizainą galite naudoti tokią platformą kaip „Dreamweaver“, kad konvertuotumėte savo dizainą į svetainę. Bet tam jums reikės tam tikros išankstinės žiniatinklio kūrimo patirties arba jums reikės pasisamdyti ką nors.

Taip pat apie „Guiding Tech“
#design
Spustelėkite čia, norėdami pamatyti mūsų dizaino straipsnių puslapį



Eksportuokite „Adobe XD“ failą į HTML

Taigi, dabar, kai žinote, kaip eksportuoti „Adobe XD“ failą į HTML, aš įsitikinęs, kad galėsite lengvai pasidalyti savo lentelėmis su kūrėju ar klientu. Ir jūs neturite jaudintis dėl bet kokių suderinamumo problemų. Iš karto įdiekite papildinį ir lengvai pradėkite eksportuoti savo lentas.

Kitas: Peržiūrėkite šį straipsnį, kuriame rasite porą nemokamų interaktyvių svetainių, kuriose galite sužinoti, kaip koduoti ir rašyti savo HTML svetainę.