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. Puede importar archivos PSD de su diseño desde Photoshop y crear una interfaz de usuario atractiva para el sitio web.

Estos diseños ayudan mucho 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 por su parte. 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 incómodo de usar.

También en

Las 3 mejores herramientas de diseño para crear maquetas y estructuras alámbricas

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

Nota: El archivo HTML generado mediante este método no debe ser tratado como 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 Adobe XD a HTML usando complementos

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

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

Paso 2: desplácese hasta abajo y luego haga clic en la opción Complementos. Eso abrirá un nuevo panel de Complementos a la derecha del menú principal.

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

Paso 4: en la página siguiente, busque HTML y luego haga clic en el botón Instalar junto al complemento Web Export.

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.

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 de la nueva configuración del complemento Web Export.

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 pequeño icono de carpeta junto a la opción Exportar carpeta.

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

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.

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.

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

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.

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.

Una vez más, tenga en cuenta que el HTML exportado de ninguna manera se puede utilizar para desarrollar un sitio web completamente funcional. A partir de ahora, no hay forma de que publique un proyecto de Adobe XD en la web directamente, y de acuerdo con 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á algo de experiencia previa en desarrollo web o deberá contratar a alguien que lo haga.

También en

#diseño

Haga clic aquí para ver nuestra página de artículos de diseño.

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á que preocuparse 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.