Hvordan eksportere Adobe XD til HTML

Adobe XD er et fantastisk designverktøy som lar deg enkelt lage fantastiske nettsteddesign uten tidligere erfaring med webutvikling. Du kan bare importere PSD-filer av designet ditt fra Photoshop og lag et iøynefallende brukergrensesnitt for nettstedet.

Disse designene hjelper utviklere med å forstå hvordan du vil at nettstedet ditt skal se ut og gjør utviklingsprosessen litt enklere for deres side. Det er imidlertid bare et begrenset antall måter du kan eksportere designene fra programvaren på.

Du kan enten velge å lagre dem som en XD-fil og håpe at utvikleren allerede har programvaren installert på systemet sitt eller eksportere hvert tegnebrett som et individ PNG fil som kan være litt upraktisk å bruke.

Heldigvis er det en hendig tredjepart plugg inn som lar deg eksportere tegnebrettene som HTML-filer, og det er det jeg skal snakke om i denne artikkelen. Men før vi kommer til det, er det noe du trenger å vite.

Merk: HTML-filen som genereres ved å bruke denne metoden skal på ingen måte behandles som en base for en komplett nettside. Denne metoden er bare et middel for enkelt å dele designene dine med en utvikler og ikke en funksjonell utviklingsprosess for nettstedet.

Eksporter Adobe XD-filer til HTML ved hjelp av plugins

Nå som vi har fått det ut av veien, følg bare disse enkle trinnene for å laste ned den nødvendige plugin-en og eksportere Adobe XD-filene til HTML:

Trinn 1: Klikk på hamburgermenyknappen øverst til venstre i programvaren.

Steg 2: Rull helt ned og klikk deretter på Plugins-alternativet. Det vil åpne opp et nytt Plugins-panel til høyre for hovedmenyen.

Trinn 3: Velg alternativet Discover Plugins fra Plugins-panelet.

Trinn 4: På den følgende siden, søk etter HTML og klikk deretter på Installer-knappen ved siden av Web Export-plugin.

Når du har installert den nødvendige plugin-modulen, åpner du prosjektet du vil eksportere til HTML, og fortsett deretter med følgende trinn. For denne artikkelen skal jeg bruke et gratis Adobe XD-tegnebrett jeg fant på nettet.

Trinn 5: Velg tegnebrettet du vil eksportere ved å klikke på det.

Trinn 6: Klikk nå på menyknappen, naviger til Plugins-panelet og velg deretter alternativet Eksporter tegnebrett fra de nye netteksport-plugininnstillingene.

Fra samme vindu kan du også velge å eksportere flere tegnebrett eller det siste tegnebrettet du redigerte.

Trinn 7: I popup-vinduet Eksporter tegnebrett legger du til et navn for filen og velger deretter mappen du vil lagre filen i ved å klikke på det lille mappeikonet ved siden av alternativet Eksporter mappe.

Trinn 8: Nå, hvis du vil legge til et eksternt skript, stilark eller alternative fonter til den eksporterte filen, kan du legge til disse i samme vindu.

Trinn 9: Deretter kan du velge dimensjonene til utdata-HTML-filen ved å skrive inn verdiene i det tomme rommet ved siden av alternativet Størrelse.

Trinn 10: For å sikre at prosjektet skaleres riktig, kan du også velge ulike skaleringsinnstillinger fra samme vindu ved å merke av i boksen ved siden av hvert alternativ.

Trinn 11: Videre kan du velge eventuelle tilleggsinnstillinger som tastaturnavigering, automatisk oppdatering, etc. ved å merke av i boksene ved siden av alternativene.

Trinn 12: Når du har fullført alle innstillingene, klikker du bare på den blå eksportknappen og du er ferdig. Tegnebrettet ditt vil vises som en HTML-fil i målmappen du valgte tidligere.

Fra samme vindu vil du også kunne kopiere CSS og markering av tegnebrettet ditt hvis du også vil dele den informasjonen med utvikleren din.

Nok en gang, vær oppmerksom på at den eksporterte HTML-en på ingen måte kan brukes til å utvikle et fullt funksjonelt nettsted. Per nå er det ingen måte for deg å publisere et Adobe XD-prosjekt direkte på nettet, og ifølge flere diskusjoner på Adobe-forumene, det vil ikke være en med det første.

Adobe XD er bare et prototypeverktøy som lar deg lage et første design uten kode. Når du har et design klart, kan du bruke en plattform som Dreamweaver til å konvertere designet til et nettsted. Men for det trenger du litt tidligere erfaring med nettutvikling, eller du må ansette noen som gjør det.

Eksporter Adobe XD-filen din til HTML

Så nå som du vet hvordan du eksporterer Adobe XD-filen din til HTML, er jeg sikker på at du enkelt vil kunne dele tegnebrettene dine med en utvikler eller en klient. Og du trenger ikke å bekymre deg for kompatibilitetsproblemer. Installer plugin-en med en gang og begynn å eksportere tegnebrettene dine med letthet.

Neste: Ta en titt på følgende artikkel for et par gratis interaktive nettsteder der du kan lære hvordan du koder og skriver ditt eget HTML-nettsted.