Cómo exportar Adobe XD a HTML

Adobe XD es una increíble herramienta de diseño que le permite crear fácilmente fantásticos diseños 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.

Estos diseños contribuyen en gran medida a ayudar a los desarrolladores a comprender cómo desea que se vea su sitio web y hacer que el proceso de desarrollo sea un poco más fácil de su parte. Sin embargo, solo hay un número limitado de formas de exportar los diseños desde el software.

Puede optar por 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 incómodo de usar.

Afortunadamente, hay un práctico complemento de terceros que le permite exportar las mesas de trabajo como archivos HTML y de eso hablaré en este artículo. Pero antes de llegar a eso, hay algo que debes saber.

Nota:

Exportar archivos de Adobe XD a HTML mediante complementos

Ahora que lo hemos solucionado, simplemente siga estos sencillos pasos para descargar el complemento requerido y luego exporte los archivos de Adobe XD a HTML:

Paso 1: Haga clic en el botón del menú de hamburguesas en la esquina superior izquierda del software.

Exportar Adobe Xd a Html 01

Paso 2: Desplácese hacia abajo y luego haga clic en la opción Complementos. Eso 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 junto al complemento Web Export.

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 de menú, navegue hasta el panel Complementos y luego elija la opción Exportar mesa de trabajo desde la nueva configuración del complemento Web Export.

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 editó.

Paso 7: En la ventana emergente Exportar mesa de trabajo, agregue un nombre para el archivo y luego seleccione la carpeta en la que desea guardar el archivo haciendo clic en el icono de la carpeta pequeña junto a la opción Exportar carpeta.

En relación :  Cómo cambiar la aplicación de mensajes de texto LG G5
Exportar Adobe Xd a Html 07

Paso 8: Ahora, si desea agregar una secuencia de comandos externa, 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 junto a la opción Tamaño.

Exportar Adobe Xd a Html 12

Paso 10: Para asegurarse de que el proyecto se escala correctamente, también puede seleccionar varias configuraciones de escala desde la misma ventana marcando 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 por teclado, Actualización automática, etc. marcando las casillas junto a las opciones.

Exportar Adobe Xd a Html 14

Paso 12: Una vez que haya finalizado todas las configuraciones, simplemente haga 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ó previamente.

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 de ninguna manera se puede utilizar para desarrollar un sitio web totalmente funcional. A partir de ahora, no hay forma de que publiques un proyecto de Adobe XD en la web directamente y, según varias discusiones en los foros de Adobe, no habrá uno pronto.

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á experiencia previa en desarrollo web o deberá contratar a alguien que lo haga.

Exporte su archivo Adobe XD a HTML

Entonces, ahora que sabe cómo exportar su archivo Adobe XD a HTML, estoy seguro de que podrá compartir fácilmente sus mesas de trabajo con un desarrollador o un cliente. Y no tendrás que preocuparte por ningún problema de compatibilidad. Instale el complemento de inmediato y comience a exportar sus mesas de trabajo con facilidad.

A continuación: Consulte el siguiente artículo para ver un par de sitios web interactivos gratuitos en los que puede aprender a codificar y escribir su propio sitio web HTML.