Come esportare Adobe XP in HTML

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

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

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

Anche su

I migliori 3 strumenti di progettazione per la creazione di mockup e wireframe

Per fortuna, c'è un pratico plug-in di terze parti che ti consente di esportare le tavole da disegno come file HTML ed è di questo che parlerò. Ma prima di arrivare a questo, 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 siti Web funzionale.

Esporta i file Adobe XD in HTML usando i plugin

Ora che abbiamo rimosso questo, basta seguire questi semplici passaggi per scaricare il plug-in richiesto e quindi esportare i file Adobe XD in HTML:

Passaggio 1: fai clic sul pulsante del menu hamburger nell'angolo in alto a sinistra del software.

Passaggio 2: scorrere fino in fondo e quindi fare clic sull'opzione Plugin. Ciò aprirà un nuovo pannello Plugin a destra del menu principale.

Passaggio 3: selezionare l'opzione Scopri plug-in dal pannello Plug-in.

Passaggio 4: nella pagina seguente, cercare HTML e quindi fare clic sul pulsante Installa accanto al plug-in di esportazione Web.

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

Passaggio 5: selezionare la tavola da disegno che si desidera 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 Esporta Web.

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

Passaggio 7: nella finestra a comparsa Esporta tavola da disegno, aggiungi un nome per il file, quindi seleziona la cartella in cui desideri salvare il file facendo clic sull'icona della cartella piccola accanto all'opzione Esporta cartella.

Passaggio 8: Ora, se si desidera aggiungere uno script esterno, un foglio di stile o caratteri alternativi al file esportato, è possibile 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 Dimensione.

Passaggio 10: per garantire che il progetto venga ridimensionato correttamente, è anche possibile selezionare varie impostazioni di ridimensionamento dalla stessa finestra selezionando la casella accanto a ciascuna opzione.

Passaggio 11: Inoltre, è possibile scegliere qualsiasi impostazione aggiuntiva come Navigazione da tastiera, Aggiornamento automatico, ecc. Selezionando le caselle accanto alle opzioni.

Passaggio 12: dopo aver completato tutte le impostazioni, fai clic sul pulsante blu Esporta e il gioco è fatto. La tavola da disegno verrà visualizzata come file HTML nella cartella di destinazione selezionata in precedenza.

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

Ancora una volta, si noti che l'HTML esportato non può assolutamente essere utilizzato per sviluppare un sito Web completamente funzionale. A partire da ora, non c'è modo per te di pubblicare direttamente un progetto Adobe XD sul Web e, secondo diverse discussioni sui forum di Adobe, non ce ne sarà mai uno presto.

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

Anche su

#design

Clicca qui per vedere la nostra pagina di articoli di design

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 client. E non dovrai preoccuparti di problemi di compatibilità. Installa subito il plugin e inizia a esportare le tue tavole da disegno con facilità.

Prossimo: consulta il seguente articolo per un paio di siti Web interattivi gratuiti su cui puoi imparare a programmare e scrivere il tuo sito Web HTML.