Hur man exporterar Adobe xd till html

Adobe XD är ett fantastiskt designverktyg som låter dig enkelt skapa fantastiska webbplatsdesign utan tidigare erfarenhet av webbutveckling. Du kan bara importera PSD-filer med din design från Photoshop och skapa en iögonfallande UI-webbplats.

Dessa mönster hjälper utvecklare att förstå hur du vill att din webbplats ska se ut och göra utvecklingsprocessen lite enklare från deras sida. Det finns emellertid bara ett begränsat antal sätt du kan exportera mönster från programvaran.

Du kan antingen välja att spara dem som en XD-fil och hoppas att utvecklaren redan har programvaran installerad på sitt system eller exporterar varje tavla som en enskild PNG-fil som kan vara lite obekvämt att använda.

Också på

Bästa 3 designverktygen för att skapa mockups och trådramar

Tack och lov finns det en praktisk plug-in från tredje part som låter dig exportera tavlan som HTML-filer och det är vad jag kommer att prata om. Men innan vi kommer till det finns det något du behöver veta.

Obs: HTML-filen som genereras med denna metod ska inte behandlas som en bas för en komplett webbsida. Denna metod är bara ett sätt att enkelt dela dina mönster med en utvecklare och inte en funktionell webbutvecklingsprocess.

Exportera Adobe XD-filer till HTML med hjälp av plugins

Nu när vi har tagit det ur vägen, följ bara dessa enkla steg för att ladda ner den nödvändiga plugin och sedan exportera Adobe XD-filer till HTML:

Steg 1: Klicka på hamburgermenyknappen i det övre vänstra hörnet av programvaran.

Steg 2: Bläddra hela vägen ner och klicka sedan på alternativet Plugins. Det öppnar en ny plugin-panel till höger om huvudmenyn.

Steg 3: Välj alternativet Upptäck plugins från panelen Plugins.

Steg 4: På följande sida söker du efter HTML och klickar sedan på Installera-knappen bredvid Web Export-insticksprogrammet.

När du har installerat det nödvändiga plugin öppnar du projektet du vill exportera till HTML och fortsätter sedan med följande steg. För den här artikeln kommer jag att använda en gratis Adobe XD-tavla som jag hittade online.

Steg 5: Välj tavlan du vill exportera genom att klicka på den.

Steg 6: Klicka nu på menyknappen, navigera till panelen Plugins och välj sedan Export Artboard-alternativet från de nya inställningarna för webbexport.

Från samma fönster kan du också välja att exportera flera tavlor eller den sista tavlan du redigerade.

Steg 7: Lägg till ett namn på filen i popup-fönstret Export Artboard och välj sedan mappen där du vill spara filen genom att klicka på den lilla mappikonen bredvid alternativet Exportera mapp.

Steg 8: Om du vill lägga till ett externt skript, stilark eller alternativa teckensnitt till den exporterade filen kan du lägga till dem i samma fönster.

Steg 9: Sedan kan du välja dimensioner för den utgående HTML-filen genom att skriva in värdena i det tomma utrymmet bredvid alternativet Storlek.

Steg 10: För att säkerställa att projektet skalar korrekt kan du också välja olika skalningsinställningar från samma fönster genom att kryssa i rutan bredvid varje alternativ.

Steg 11: Dessutom kan du välja alla ytterligare inställningar som tangentbordsnavigering, automatisk uppdatering etc. genom att markera rutorna bredvid alternativen.

Steg 12: När du har slutfört alla inställningar klickar du bara på den blå Export-knappen så är du klar. Din tavla visas som en HTML-fil i den destinationsmapp du valt tidigare.

Från samma fönster kan du också kopiera CSS och markering av ditt tavla om du också vill dela den informationen med din utvecklare.

Notera än en gång att den exporterade HTML inte på något sätt kan användas för att utveckla en fullt fungerande webbplats. För närvarande finns det inget sätt för dig att publicera ett Adobe XD-projekt direkt på webben, och enligt flera diskussioner på Adobe-forumen kommer det inte att finnas något snart.

Adobe XD är bara ett prototypningsverktyg som låter dig skapa en initial design utan kod. När du har en design klar kan du använda en plattform som Dreamweaver för att konvertera din design till en webbplats. Men för det behöver du tidigare erfarenhet av webbutveckling eller så behöver du anställa någon som gör det.

Också på

#design

Klicka här för att se vår designartikelsida

Exportera din Adobe XD-fil till HTML

Så nu när du vet hur du exporterar din Adobe XD-fil till HTML är jag säker på att du enkelt kan dela dina tavlor med en utvecklare eller en klient. Och du behöver inte oroa dig för kompatibilitetsproblem. Installera plugin direkt och börja exportera dina tavlor med lätthet.

Nästa: Kolla in följande artikel för ett par gratis interaktiva webbplatser där du kan lära dig hur du kodar och skriver din egen HTML-webbplats.