Cómo exportar Adobe XD a HTML

Cómo exportar Adobe XD a HTML
5 (100%) 1 voto

Adobe XD es una herramienta de dise√Īo sorprendente que le permite crear f√°cilmente dise√Īos fant√°sticos de sitios web sin ninguna experiencia previa en desarrollo web. Simplemente puede importar archivos PSD de su dise√Īo desde Photoshop y crear una interfaz de usuario de sitio web llamativa.

Convertir a Html Adobe Xd Destacado

Estos dise√Īos ayudan mucho a los desarrolladores a comprender c√≥mo desea que se vea su sitio web y hacen que el proceso de desarrollo sea un poco m√°s sencillo. Sin embargo, solo hay un n√ļmero limitado de formas en que puede exportar los dise√Īos desde el software.

Puede elegir guardarlos como un archivo XD y esperar que el desarrollador ya tenga el software instalado en su sistema o exportar cada mesa de trabajo como un archivo PNG individual que puede ser un poco inconveniente de usar.

Afortunadamente, hay un √ļtil complemento de terceros que te permite exportar las mesas de trabajo como archivos HTML y eso es de lo que hablar√© en este art√≠culo. Pero antes de que lleguemos a esto, hay algo que debes saber.

Note
:
El archivo HTML generado mediante el uso de este m√©todo no debe ser tratado de ninguna manera como una base para una p√°gina web completa. Este m√©todo es solo un medio para compartir f√°cilmente sus dise√Īos con un desarrollador y no un proceso funcional de desarrollo de sitios web.

Exportar archivos de Adobe XD a HTML usando complementos

Ahora que lo hemos eliminado, solo siga estos sencillos pasos para descargar el complemento requerido y luego exportar los archivos Adobe XD a HTML:

Recomendamos:
Aquí están los mejores juegos de acción para teléfonos Android en 2019

Paso 1
:
Haga clic en el bot√≥n de men√ļ de hamburguesas en la esquina superior izquierda del software.

Exportar Adobe Xd a HTML 01

Paso 2
:
Despl√°zate hasta el final y luego haz clic en la opci√≥n Complementos. Esto abrir√° un nuevo panel de Complementos a la derecha del men√ļ principal.

Exportar Adobe Xd a HTML 02

Paso 3
:
Seleccione la opción Descubrir complementos en el panel Complementos.

Exportar Adobe Xd a Html 03

Paso 4
:
En la siguiente página, busque HTML y luego haga clic en el botón Instalar al lado del complemento de exportación web.

Exportar Adobe Xd a HTML 04

Una vez que haya instalado el complemento requerido, abra el proyecto que desea exportar a HTML y luego contin√ļe con los siguientes pasos. Para este art√≠culo usar√© una mesa de trabajo gratuita de Adobe XD que encontr√© en l√≠nea.

Paso 5
:
Seleccione la mesa de trabajo que desea exportar haciendo clic en ella.

Exportar Adobe Xd a HTML 05

Paso 6
:
Ahora haga clic en el bot√≥n del men√ļ, navegue hasta el panel Complementos y luego elija la opci√≥n Exportar Artboard de la nueva configuraci√≥n del complemento de exportaci√≥n web.

Exportar Adobe Xd a HTML 06

Desde la misma ventana, tambi√©n puede optar por exportar varias mesas de trabajo o la √ļltima mesa de trabajo que haya editado.

Paso 7
:
En la ventana emergente Exportar Artboard, agregue un nombre para el archivo y luego seleccione la carpeta en la que desea guardar el archivo haciendo clic en el peque√Īo icono de carpeta junto a la opci√≥n Exportar carpeta.

Exportar Adobe Xd a HTML 07

Paso 8
:
Ahora, si desea agregar un script externo, una hoja de estilo o fuentes alternativas al archivo exportado, puede agregarlas en la misma ventana.

Exportar Adobe Xd a HTML 11

Paso 9
:
Luego, puede elegir las dimensiones del archivo HTML de salida escribiendo los valores en el espacio en blanco al lado de la opci√≥n Tama√Īo.

Recomendamos:
Cómo hacer un video más brillante

Exportar Adobe Xd a HTML 12

Paso 10: Para asegurarse de que el proyecto se amplíe correctamente, también puede seleccionar varias configuraciones de escala en la misma ventana al marcar la casilla junto a cada opción.

Exportar Adobe Xd a HTML 13

Paso 11: Además, puede elegir cualquier configuración adicional como Navegación con teclado, Actualización automática, etc. marcando las casillas junto a las opciones.

Exportar Adobe Xd a HTML 14

Paso 12: Una vez que hayas finalizado todos los ajustes, simplemente haz clic en el botón azul Exportar y listo. Su mesa de trabajo aparecerá como un archivo HTML en la carpeta de destino que seleccionó anteriormente.

Exportar Adobe Xd a Html 09

Desde la misma ventana, también podrá copiar el CSS y el marcado de su mesa de trabajo si también desea compartir esa información con su desarrollador.

Exportar Adobe Xd a HTML 15

Una vez más, tenga en cuenta que el HTML exportado no puede ser utilizado para desarrollar un sitio web completamente funcional. A partir de ahora, no hay forma de publicar un proyecto de Adobe XD directamente en la web, y de acuerdo con varias discusiones en los foros de Adobe, no habrá ninguna en un futuro próximo.

Adobe XD es solo una herramienta de creaci√≥n de prototipos que le permite crear un dise√Īo inicial sin c√≥digo. Una vez que tenga un dise√Īo listo, puede usar una plataforma como Dreamweaver para convertir su dise√Īo en un sitio web. Pero para eso, necesitar√° alguna experiencia previa en desarrollo web o tendr√° que contratar a alguien que lo haga.