Sådan eksporteres Adobe XD til HTML

Adobe XD er et fantastisk designværktøj, der lader dig nemt skabe fantastiske hjemmesidedesigns uden forudgående erfaring med webudvikling. Du kan bare importere PSD-filer af dit design fra Photoshop og opret et iøjnefaldende websteds-UI.

Disse designs hjælper i høj grad udviklere med at forstå, hvordan du vil have din hjemmeside til at se ud og gøre udviklingsprocessen en smule lettere fra deres side. Der er dog kun et begrænset antal måder, hvorpå du kan eksportere design fra softwaren.

Du kan enten vælge at gemme dem som en XD-fil og håbe, at udvikleren allerede har softwaren installeret på sit system eller eksportere hvert tegnebræt som en individuel PNG fil, som kan være en smule upraktisk at bruge.

Heldigvis er der en praktisk tredjepart plugin der lader dig eksportere tegnebrætterne som HTML-filer, og det er det, jeg vil tale om i denne artikel. Men før vi når til det, er der noget, du skal vide.

Bemærk: HTML-filen, der genereres ved hjælp af denne metode, bør på ingen måde behandles som en base for en komplet webside. Denne metode er kun et middel til nemt at dele dine designs med en udvikler og ikke en funktionel hjemmesideudviklingsproces.

Eksporter Adobe XD-filer til HTML ved hjælp af plugins

Nu hvor vi har fået det af vejen, skal du bare følge disse enkle trin for at downloade det nødvendige plugin og derefter eksportere Adobe XD-filerne til HTML:

Trin 1: Klik på hamburgermenuknappen i øverste venstre hjørne af softwaren.

Trin 2: Rul hele vejen ned, og klik derefter på Plugins-indstillingen. Det åbner et nyt Plugins-panel til højre for hovedmenuen.

Trin 3: Vælg indstillingen Discover Plugins fra Plugins-panelet.

Trin 4: På den følgende side skal du søge efter HTML og derefter klikke på knappen Installer ved siden af ​​plugin'et Webeksport.

Når du har installeret det nødvendige plugin, skal du åbne det projekt, du vil eksportere til HTML, og derefter fortsætte med følgende trin. Til denne artikel vil jeg bruge et gratis Adobe XD tegnebræt, jeg fandt online.

Trin 5: Vælg det tegnebræt, du vil eksportere, ved at klikke på det.

Trin 6: Klik nu på menuknappen, naviger til panelet Plugins, og vælg derefter Eksporter tegnebræt fra de nye Web Export plugin-indstillinger.

Fra det samme vindue kan du også vælge at eksportere flere tegnebrætter eller det sidste tegnebræt, du redigerede.

Trin 7: I pop op-vinduet Eksporter tegnebræt skal du tilføje et navn til filen og derefter vælge den mappe, hvor du vil gemme filen, ved at klikke på det lille mappeikon ved siden af ​​indstillingen Eksporter mappe.

Trin 8: Hvis du nu vil tilføje et eksternt script, typografiark eller alternative skrifttyper til den eksporterede fil, kan du tilføje dem i samme vindue.

Trin 9: Derefter kan du vælge dimensionerne for output-HTML-filen ved at indtaste værdierne i det tomme felt ud for indstillingen Størrelse.

Trin 10: For at sikre, at projektet skaleres korrekt, kan du også vælge forskellige skaleringsindstillinger fra det samme vindue ved at markere afkrydsningsfeltet ud for hver mulighed.

Trin 11: Desuden kan du vælge yderligere indstillinger som Tastaturnavigation, Auto-refresh osv. ved at markere felterne ud for mulighederne.

Trin 12: Når du har afsluttet alle indstillingerne, skal du blot klikke på den blå eksportknap, og du er færdig. Dit tegnebræt vises som en HTML-fil i den destinationsmappe, du tidligere valgte.

Fra samme vindue vil du også være i stand til at kopiere CSS'en og markeringen af ​​dit tegnebræt, hvis du også vil dele disse oplysninger med din udvikler.

Endnu en gang skal du bemærke, at den eksporterede HTML på ingen måde kan bruges til at udvikle en fuldt funktionel hjemmeside. Lige nu er der ingen måde for dig at udgive et Adobe XD-projekt på nettet direkte, og ifølge flere diskussioner på Adobes fora, vil der ikke være en lige nu.

Adobe XD er blot et prototypeværktøj, der giver dig mulighed for at skabe et indledende design uden kode. Når du har et design klar, kan du bruge en platform som Dreamweaver til at konvertere dit design til en hjemmeside. Men for det har du brug for noget tidligere webudviklingserfaring, eller du bliver nødt til at ansætte en, der gør.

Eksporter din Adobe XD-fil til HTML

Så nu hvor du ved, hvordan du eksporterer din Adobe XD-fil til HTML, er jeg sikker på, at du nemt vil være i stand til at dele dine tegnebrætter med en udvikler eller en klient. Og du behøver ikke bekymre dig om kompatibilitetsproblemer. Installer plugin'et med det samme, og begynd nemt at eksportere dine tegnebrætter.

Næste: Tjek den følgende artikel for et par gratis interaktive websteder, hvor du kan lære, hvordan du koder og skriver din egen HTML-hjemmeside.