Come esportare Adobe XD in HTML

Adobe XD è uno straordinario strumento di progettazione che ti consente di creare facilmente fantastici progetti di siti Web senza alcuna precedente esperienza di sviluppo web. Puoi semplicemente importare i file PSD del tuo design da Photoshop e crea un'interfaccia utente accattivante per il sito web.

Questi design aiutano molto gli sviluppatori a capire come vuoi che appaia il tuo sito web e rendono il processo di sviluppo un po' più semplice da parte loro. Tuttavia, esiste solo un numero limitato di modi per esportare i progetti dal software.

Puoi scegliere di salvarli come file XD e sperare che lo sviluppatore abbia già installato il software sul suo sistema o esportare ogni tavola da disegno come individuo PNG file che può essere un po' scomodo da usare.

Per fortuna, c'è una terza parte a portata di mano collegare che ti consente di esportare le tavole da disegno come file HTML ed è di questo che parlerò in questo articolo. Ma prima di arrivarci, c'è qualcosa che devi sapere.

Nota: Il file HTML generato utilizzando questo metodo non deve in alcun modo essere considerato come base per una pagina web completa. Questo metodo è solo un mezzo per condividere facilmente i tuoi progetti con uno sviluppatore e non un processo di sviluppo di un sito web funzionale.

Esporta file Adobe XD in HTML usando i plugin

Ora che abbiamo risolto, segui questi semplici passaggi per scaricare il plug-in richiesto e quindi esportare i file Adobe XD in HTML:

Passo 1: Fare clic sul pulsante del menu dell'hamburger nell'angolo in alto a sinistra del software.

Passo 2: Scorri fino in fondo e quindi fai clic sull'opzione Plugin. Questo aprirà un nuovo pannello Plugin a destra del menu principale.

Passaggio 3: Seleziona l'opzione Scopri plugin dal pannello Plugin.

Passaggio 4: Nella pagina seguente, cerca HTML e quindi fai clic sul pulsante Installa accanto al plug-in Web Export.

Dopo aver installato il plug-in richiesto, apri il progetto che desideri esportare in HTML e poi continua con i passaggi seguenti. Per questo articolo utilizzerò una tavola da disegno Adobe XD gratuita che ho trovato online.

Passaggio 5: Seleziona la tavola da disegno che desideri esportare facendo clic su di essa.

Passaggio 6: Ora fai clic sul pulsante del menu, vai al pannello Plugin e quindi scegli l'opzione Esporta tavola da disegno dalle nuove impostazioni del plug-in Esportazione Web.

Dalla stessa finestra, puoi anche scegliere di esportare più tavole da disegno o l'ultima tavola da disegno che hai modificato.

Passaggio 7: Nel pop-up Esporta tavola da disegno, aggiungi un nome per il file e quindi seleziona la cartella in cui desideri salvare il file facendo clic sull'icona della piccola cartella accanto all'opzione Esporta cartella.

Passaggio 8: Ora, se desideri aggiungere uno script esterno, un foglio di stile o caratteri alternativi al file esportato, puoi aggiungerli nella stessa finestra.

Passaggio 9: Quindi, puoi scegliere le dimensioni del file HTML di output digitando i valori nello spazio vuoto accanto all'opzione Dimensioni.

Passaggio 10: Per assicurarti che il progetto venga ridimensionato correttamente, puoi anche selezionare varie impostazioni di ridimensionamento dalla stessa finestra selezionando la casella accanto a ciascuna opzione.

Passaggio 11: Inoltre, puoi scegliere qualsiasi impostazione aggiuntiva come Navigazione tramite tastiera, Aggiornamento automatico, ecc. selezionando le caselle accanto alle opzioni.

Passaggio 12: Dopo aver finalizzato tutte le impostazioni, fai clic sul pulsante blu Esporta e il gioco è fatto. La tua tavola da disegno apparirà come un file HTML nella cartella di destinazione che hai selezionato in precedenza.

Dalla stessa finestra, sarai anche in grado di copiare il CSS e il markup della tua tavola da disegno se desideri condividere tali informazioni con il tuo sviluppatore.

Ancora una volta, tieni presente che l'HTML esportato non può in alcun modo essere utilizzato per sviluppare un sito Web completamente funzionante. A partire da ora, non è possibile pubblicare direttamente un progetto Adobe XD sul Web e, secondo diversi discussioni sui forum di Adobe, non ce ne sarà uno a breve.

Adobe XD è solo uno strumento di prototipazione che ti consente di creare un progetto iniziale senza codice. Una volta che hai un design pronto, puoi utilizzare una piattaforma come Dreamweaver per convertire il tuo design in un sito web. Ma per questo, avrai bisogno di una precedente esperienza di sviluppo web o dovrai assumere qualcuno che lo faccia.

Esporta il tuo file Adobe XD in HTML

Quindi, ora che sai come esportare il tuo file Adobe XD in HTML, sono sicuro che sarai in grado di condividere facilmente le tue tavole da disegno con uno sviluppatore o un cliente. E non dovrai preoccuparti di eventuali problemi di compatibilità. Installa subito il plug-in e inizia a esportare le tue tavole da disegno con facilità.

Prossimo: Dai un'occhiata al seguente articolo per un paio di siti Web interattivi gratuiti su cui puoi imparare a codificare e scrivere il tuo sito Web HTML.