Slik eksporterer du Adobe xd til html

Adobe XD er et fantastisk designverktøy som lar deg enkelt lage fantastiske nettdesigndesign uten noen tidligere webutviklingserfaring. Du kan bare importere PSD-filer med design fra Photoshop og opprette et iøynefallende brukergrensesnitt for nettsteder.

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

Du kan enten velge å lagre dem som en XD-fil, og håper utvikleren allerede har programvaren installert på systemet sitt eller eksportere hvert tavle som en individuell PNG-fil som kan være litt upraktisk å bruke.

Også på

De beste 3 designverktøyene for å lage modeller og wireframes

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

Merk: HTML-filen som er generert ved bruk av denne metoden, skal på ingen måte behandles som en base for en komplett webside. Denne metoden er bare et middel til å enkelt dele designene dine med en utvikler og ikke en funksjonell nettstedutviklingsprosess.

Eksporter Adobe XD-filer til HTML ved hjelp av plugins

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

Trinn 1: Klikk på hamburger-menyknappen i øverste venstre hjørne av programvaren.

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

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

Trinn 4: På den neste 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, åpner du opp prosjektet du vil eksportere til HTML, og fortsetter deretter med følgende trinn. For denne artikkelen bruker jeg et gratis Adobe XD-tavle 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 Eksporter Artboard-alternativet fra de nye innstillinger for Web Export-plugin.

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

Trinn 7: Legg til et navn på filen i popup-eksporten Artboard, og velg deretter mappen du vil lagre filen i, ved å klikke på det lille mappeikonet ved siden av alternativet Eksporter mappe.

Trinn 8: Hvis du vil legge til et eksternt skript, stilark eller alternative skrifter til den eksporterte filen, kan du legge dem til i samme vindu.

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

Trinn 10: For å sikre at prosjektet skaleres riktig, kan du også velge forskjellige skaleringsinnstillinger fra det samme vinduet ved å merke av i ruten ved siden av hvert alternativ.

Trinn 11: Videre kan du velge 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å Eksporter-knappen og du er ferdig. Tavlen din vises som en HTML-fil i destinasjonsmappen du tidligere valgte.

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

Legg igjen merke til at den eksporterte HTML 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 i følge flere diskusjoner på Adobe-fora vil det ikke være noe snart.

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

Også på

#design

Klikk her for å se siden med designartikler

Eksporter Adobe XD-filen til HTML

Så nå som du vet hvordan du eksporterer Adobe XD-filen til HTML, er jeg sikker på at du enkelt kan 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 tegnebrettet med letthet.

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