Cum se exportă adobe xd în html

Adobe XD este un instrument uimitor de proiectare care vă permite să creați cu ușurință design-uri fantastice de site-uri web, fără experiență anterioară de dezvoltare web. Puteți importa doar fișierele PSD cu designul dvs. din Photoshop și puteți crea o interfață de interes pentru site-ul web.

Aceste modele parcurg un drum lung pentru a ajuta dezvoltatorii să înțeleagă cum doriți ca site-ul dvs. web să arate și să faciliteze procesul de dezvoltare din partea lor. Cu toate acestea, există doar un număr limitat de modalități prin care puteți exporta proiectele din software.

Puteți alege fie să le salvați ca fișier XD și să sperați că dezvoltatorul are deja software-ul instalat pe sistemul său sau să exporte fiecare tablou de artă ca fișier PNG individual, care poate fi un pic inconvenient de utilizat.

De asemenea, pe Ghiding Tech

Cele mai bune 3 instrumente de proiectare pentru crearea de machet-uri și filme

Din fericire, există un plugin util pentru terți care vă permite să exportați tablourile de artă sub formă de fișiere HTML și despre asta voi vorbi. Dar înainte să ajungem la el, trebuie să știi ceva.

Notă: Fișierul HTML generat prin utilizarea acestei metode nu ar trebui în niciun caz tratat ca bază pentru o pagină web completă. Această metodă este doar un mijloc de a împărtăși cu ușurință proiectele cu un dezvoltator și nu un proces de dezvoltare a site-ului funcțional.

Exportați fișierele Adobe XD în HTML cu ajutorul pluginurilor

Acum că am obținut acest lucru, trebuie doar să urmați acești pași simpli pentru a descărca pluginul necesar și apoi exportați fișierele Adobe XD în HTML:

Pasul 1: Faceți clic pe butonul de meniu hamburger din colțul din stânga sus al software-ului.

Pasul 2: Derulați până la capăt, apoi faceți clic pe opțiunea Plugins. Acesta va deschide un nou panou Plugin-uri din dreapta meniului principal.

Pasul 3: selectați opțiunea Descoperiți pluginuri din panoul de pluginuri.

Pasul 4: În pagina următoare, căutați HTML și apoi faceți clic pe butonul Instalare de lângă pluginul Export Web.

După ce ați instalat pluginul necesar, deschideți proiectul pe care doriți să-l exportați în HTML și apoi continuați cu următorii pași. Pentru acest articol voi folosi o tablou de artă gratuită Adobe XD pe care am găsit-o online.

Pasul 5: selectați tabloul de artă pe care doriți să îl exportați făcând clic pe el.

Pasul 6: Acum faceți clic pe butonul de meniu, navigați în panoul Plugins și apoi alegeți opțiunea Export Artboard din noile setări ale pluginului Web Export.

Din aceeași fereastră, puteți alege, de asemenea, să exportați mai multe planșe sau ultima artboard pe care ați editat-o.

Pasul 7: În fereastra pop-up Export Artboard, adăugați un nume pentru fișier și apoi selectați folderul în care doriți să salvați fișierul făcând clic pe pictograma folderului de lângă opțiunea Export Folder.

Pasul 8: Acum, dacă doriți să adăugați un script extern, foaie de stil sau fonturi alternative la fișierul exportat, puteți adăuga cele din aceeași fereastră.

Pasul 9: Apoi, puteți alege dimensiunile fișierului HTML de ieșire tastând valorile din spațiul liber de lângă opțiunea Dimensiune.

Pasul 10: Pentru a vă asigura că proiectul se scalează corect, puteți selecta, de asemenea, diferite setări de scalare din aceeași fereastră bifând caseta de lângă fiecare opțiune.

Pasul 11: Mai mult, puteți alege orice setări suplimentare, cum ar fi Navigarea cu tastatură, reîmprospătare automată etc., bifând casetele de lângă opțiuni.

Pasul 12: După ce ați finalizat toate setările, trebuie doar să faceți clic pe butonul albastru Export și ați terminat. Artboard-ul dvs. va apărea ca fișier HTML în folderul destinație selectat anterior.

Din aceeași fereastră, veți putea, de asemenea, să copiați CSS și marcarea planșei dvs. dacă doriți, de asemenea, să partajați informațiile cu dezvoltatorul.

Încă o dată, rețineți că HTML-ul exportat nu poate fi folosit în niciun caz pentru a dezvolta un site web complet funcțional. De acum, nu există nicio modalitate de a publica public un proiect Adobe XD direct pe web și, în conformitate cu mai multe discuții pe forumurile Adobe, nu va fi unul în curând.

Adobe XD este doar un instrument de prototip care vă permite să creați un design inițial fără cod. După ce ați pregătit un design, puteți utiliza o platformă precum Dreamweaver pentru a vă transforma designul într-un site web. Dar pentru asta, veți avea nevoie de o experiență anterioară de dezvoltare web sau va trebui să angajați pe cineva care o face.

De asemenea, pe Ghiding Tech

#proiecta

Faceți clic aici pentru a vedea pagina noastră de articole de design

Exportați fișierul Adobe XD în HTML

Deci, acum când știți cum să exportați fișierul Adobe XD în HTML, sunt sigur că veți putea partaja cu ușurință tablourile dvs. de artă cu un dezvoltator sau un client. Și nu va trebui să vă faceți griji pentru probleme de compatibilitate. Instalați pluginul imediat și începeți să exportați plăcile dvs. cu ușurință

Urmăriți mai departe : consultați următorul articol pentru câteva site-uri web interactive gratuite pe care puteți învăța cum să codați și să vă scrieți propriul site HTML.