Sådan eksporteres Adobe xd til html

Adobe XD er et fantastisk designværktøj, der lader dig nemt oprette fantastiske webstedsdesign uden nogen forudgående webudviklingserfaring. Du kan bare importere PSD-filer af dit design fra Photoshop og oprette et iøjnefaldende webstedets brugergrænseflade.

Disse designs går langt i at hjælpe udviklere med at forstå, hvordan du ønsker, at dit websted skal se ud og gøre udviklingsprocessen lidt lettere fra deres side. Der er imidlertid kun et begrænset antal måder, du kan eksportere design fra softwaren på.

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

Også på

Bedste 3 designværktøjer til oprettelse af modeller og wireframes

Heldigvis er der et praktisk tredjeparts plugin, der giver dig mulighed for at eksportere tegnebrætne som HTML-filer, og det er hvad jeg vil tale om. Men inden vi kommer til det, er der noget, du har brug for at vide.

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

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

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

Trin 1: Klik på knappen Hamburger-menu i øverste venstre hjørne af softwaren.

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

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

Trin 4: På den følgende side skal du søge efter HTML og derefter klikke på knappen Installer ved siden af ​​webeksport-pluginet.

Når du har installeret det krævede plugin, skal du åbne det projekt, du vil eksportere til HTML, og derefter fortsætte med følgende trin. Til denne artikel bruger jeg et gratis Adobe XD-artboard, 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 eksporten Artboardboard fra de nye Web Export-plugin-indstillinger.

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

Trin 7: I pop-up-eksporten Artboard skal du tilføje et navn til filen og derefter vælge den mappe, som du vil gemme filen i, ved at klikke på det lille mappeikon ved siden af ​​muligheden Eksporter mappe.

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

Trin 9: Derefter kan du vælge dimensionerne på den output-HTML-fil ved at indtaste værdierne i det tomme rum ved siden af ​​indstillingen Størrelse.

Trin 10: For at sikre, at projektet skalerer 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 eventuelle yderligere indstillinger som tastaturnavigation, automatisk opdatering osv. Ved at markere afkrydsningsfelterne ud for indstillingerne.

Trin 12: Når du har færdiggjort alle indstillingerne, skal du blot klikke på den blå Eksporter-knap, og du er færdig. Dit artboard vises som en HTML-fil i den destinationsmappe, du tidligere har valgt.

Fra det samme vindue kan du også kopiere CSS og markering af dit tegnebræt, hvis du også vil dele disse oplysninger med din udvikler.

Bemærk igen, at den eksporterede HTML på ingen måde kan bruges til at udvikle et fuldt funktionelt websted. I øjeblikket er der ingen måde for dig at offentliggøre et Adobe XD-projekt direkte på nettet, og ifølge flere diskussioner på Adobe-foraene vil der ikke være et som helst snart.

Adobe XD er bare et prototype-værktøj, der giver dig mulighed for at oprette 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 et websted. Men til det har du brug for nogle forudgående webudviklingserfaringer, eller du skal ansætte en der gør det.

Også på

#design

Klik her for at se vores designartikelside

Eksporter din Adobe XD-fil til HTML

Så nu du ved, hvordan du eksporterer din Adobe XD-fil til HTML, er jeg sikker på, at du let kan dele dine tegnebræt med en udvikler eller en klient. Og du behøver ikke at bekymre dig om eventuelle kompatibilitetsproblemer. Installer plugin med det samme, og start med at eksportere dine tegnebræt med lethed.

Next up: Tjek den følgende artikel for et par gratis interaktive websteder, hvor du kan lære at kode og skrive dit eget HTML-websted.