¿Cómo convertir diseños de Adobe XD a código HTML?

¿Está familiarizado con estos pasos a la hora de crear un nuevo diseño de aplicación en Adobe XD desde cero y convertirlo en un producto completo, codificado y listo para la producción?

ideación y diseño real –> wireframing y abordaje de las transferencias entre diseñadores y desarrolladores–> pruebas de usuario/usabilidad, iteración de cambios con las partes interesadas–> y, finalmente, codificación

Entonces sabrás que el proceso es complicado y requiere mucho tiempo porque se divide entre varias personas y equipos, e implica muchas fases.

Afortunadamente, es el año 2022 y existen aceleradores integrales de aplicaciones de diseño y desarrollo, como App Builder, que ayudan en este proceso de diseño a código.

Prueba App Builder

¿Qué es Adobe XD?

Diseñado desde cero para equipar a los diseñadores con un arsenal de herramientas moderno y fácil de usar que les permite diseñar wireframes y aplicaciones, Adobe XD es una de las plataformas de diseño gráfico vectorial más populares del mercado actual. Junto con las funciones de estructura alámbrica, los diseñadores pueden crear prototipos de alta fidelidad, colaborar entre equipos a través del proceso de diseño, configurar animaciones y recopilar comentarios.

Al igual que los equipos de desarrollo de software y los equipos de TI, los equipos de diseño dependen de la reutilización más que nunca para crear un ecosistema de herramientas sostenible y dinámico que ahorre tiempo y esfuerzos en tareas repetitivas. Adobe XD apoya estos objetivos en el sentido de que permite la creación de componentes de nivel superior, como botones y navegación, en forma de kits de interfaz de usuario que promueven diseños reutilizables y agilizan el proceso de diseño.

¿Para qué es mejor Adobe XD?

• Cree rápida y fácilmente prototipos interactivos, wireframes, agregue animaciones
• Ejecute prototipos en varios tipos y tamaños de dispositivos
• Cree elementos de diseño y sistemas de diseño reutilizables
• Funcionalidades de intercambio, espaciado, cambio de tamaño y alineación para sus diseños
• Compartir entregas y recopilar comentarios

¿Cuáles son las desventajas de Adobe XD?

• No incluye la generación de código ni la salida de código
• No hay funciones de prueba de usuario / estudio de usuario
• Ecosistema de plug-ins limitado
• No se puede transferir su prototipo o estructura alámbrica a un diseño oficial

Adobe XD está diseñado para crear wireframes y prototipos, sin la promesa de generación de código de obtener ningún tipo de resultados codificados en HTML. Los programadores front-end y los equipos de software digital deben intervenir para producir el código HTML requerido (o tratar de encontrar complementos en línea que puedan ayudar), para que el diseño se vuelva real y se pueda sincronizar con todo lo desarrollado en el back-end.

¿Qué es un archivo de Adobe XD?

Los archivos de Adobe XD son archivos .zip que incluyen recursos de imagen, valores de color, guía de estilo y algo de CSS. En otras palabras, contienen elementos de diseño que se pueden convertir en código HTML de calidad de producción con herramientas y automatización adicionales. En un escenario de transferencia de desarrollador, el desarrollador debe tener Adobe XD instalado en su sistema para leer los archivos de diseño. Por otro lado, la conversión de archivos de diseño a PNG o PDF, si bien es posible, los elementos de diseño, las capas y el flujo de la aplicación se pierden en la traducción.

Existen herramientas y sitios web como filext.com, que pueden ser útiles para ver el contenido del archivo XD, pero esto solo agrega más tiempo al proyecto y ralentiza el tiempo de comercialización del producto.

¿Qué significa Adobe XD to Code?

En esencia, Adobe XD a código se refiere al proceso de transformar los archivos de diseño de XD en código. El objetivo de crear un nuevo diseño de producto digital con Adobe XD es poder convertirlo en una aplicación funcional con código real y utilizable. Por lo general, este proceso implica muchos pasos, personas y tiempo invertidos en comunicación, colaboración, mejoras de diseño y correcciones manuales de código.

Se deben crear tableros de arte y maquetas visuales.  Las pruebas de concepto deben comunicar claramente la idea y el valor del diseño a las partes interesadas. Las transferencias entre diseñador y desarrollador deben ser lo suficientemente extensas y detalladas como para proporcionar todas las especificaciones a los programadores y eliminar las iteraciones, los silos y la falta de comunicación en una etapa posterior antes de volver a crear el prototipo en el código de la interfaz de usuario. También se necesitan realizar pruebas de usuario y de usabilidad para ver cómo interactúan los usuarios con el diseño, si valida su propósito y si puede aumentar el valor de un negocio determinado.

Las herramientas de generación de código como nuestra App Builder intervienen para ayudar a los equipos a transformar los diseños de archivos de Adobe XD en código listo para producción en cuestión de minutos, no de días.

¿Cómo convertir Adobe XD a código HTML usando App Builder?

Hay un par de requisitos previos para empezar:

• Inicie sesión en su cuenta o inicie una prueba gratuita de App Builder 
• Inicie sesión en su cuenta o inicie una prueba gratuita de Adobe XD 

Una vez que haya instalado Adobe XD, debe instalar el complemento Indigo.Design App Builder, que permite diseñar para codificar.  Puede acceder a esto desde Stock & Marketplace -> Plugins en la aplicación Creative Cloud, simplemente busque Indigo.Design.

Figure 1: Adobe Creative Cloud Plugins

Una vez que haya instalado el complemento Indigo.Design App Builder, necesita un diseño basado en los kits de interfaz de usuario de Infragistics.  La forma en que el diseño a código funciona con App Builder es que los diseños en Adobe XD deben crearse utilizando nuestros kits de interfaz de usuario, que son bibliotecas completas, extensibles y personalizables de componentes de interfaz de usuario y patrones de interfaz de usuario que aceleran la fase de diseño.

Go to our sample’s library here https://es.infragistics.com/resources/sample-applications/angular-people-app and download the Adobe XD files for the People App example.

 

Figure 2: People App Adobe XD files

Una vez descargado, abra el archivo Adobe XD de la aplicación People en Adobe XD.

Figure 3: People App Opened in Adobe XD

Desde aquí, selecciona la opción Crear nueva aplicación en el menú Plugins -> Indigo.Design.

Figure 4: Create New App Menu Option

A continuación, se le presenta el cuadro de diálogo Crear nueva aplicación, donde puede cambiar su espacio de trabajo, y algunas otras opciones en el proceso de creación de aplicaciones.

Figure 5: Create New App Dialog

Una vez que hace clic en Crear aplicación en este cuadro de diálogo, el archivo de Adobe XD se envía a la nube, donde se procesa, analiza, disecciona y, finalmente, se transforma en el modelo de aplicación común del App Builder.

Figura 6: Implementación correcta de la aplicación Personas en App Builder en la nube

Una vez que haga clic en el enlace en el cuadro de diálogo de éxito, o haga clic en el botón Visitar espacio de trabajo, se le llevará directamente a App Builder, donde verá su nueva aplicación.

Figure 7: People App in you Workspace in App Builder

A continuación, simplemente haga clic en la aplicación Personas para editarla en el App Builder!

Figure 8: People App in App Builder

Desde aquí, puede obtener una vista previa del código, generar código Angular o Blazor, o comenzar a modificar la aplicación en el diseñador WYSIWYG. Y como sabemos que a los desarrolladores les encanta GitHub, App Builder les permite subir todos los archivos de la aplicación a un repositorio de GitHub o descargarlos como un paquete que se puede ejecutar localmente.

¿Qué diferencia a App Builder de otras herramientas de desarrollo de diseño low-code?

En la sección "¿ Qué es el desarrollo de código bajo y por qué es importante?"​ ​Destacamos que existen tres desafíos principales cuando se trata de diseñar para codificar:

• Falta de creadores de aplicaciones WYSIWYG low-code para crear aplicaciones listas para la empresa que funcionen con los marcos más populares como Angular, React, Blazor y Web Components.
• Los bocetos de diseño y los prototipos son difíciles de traducir automáticamente en código real o aplicaciones funcionales.
• Pocas plataformas low-code tienen un sistema de diseño integrado con una amplia gama de controles, patrones y pautas de estilo de UX que se traducen en componentes de software y se pueden reutilizar o contextualizar para crear soluciones de marca.

Y aquí es cuando el App Builder puede superar a los ejemplos de software de diseño a código de la competencia. El principal factor diferenciador es que, a diferencia de otros fabricantes de aplicaciones que producen código espagueti no editable ni modificable, App Builder genera código limpio listo para producción que es utilizable, comprobable y depurable.

Además de esto, App Builder se basa en una base de código compartida e incluye capacidades integradas de desarrollo, prueba, depuración e implementación, lo que significa que este creador de aplicaciones web de bajo código basado en la nube de Infragistics, reduce su tiempo de desarrollo en un 80%. Al servir como un único "multiplicador de fuerza", agiliza la creación de bocetos, diseños, creación de prototipos, pruebas de usuario, vista previa de código en tiempo real y generación de código, y también automatiza tareas repetitivas, eliminando la complejidad detrás de la creación de interfaces de usuario y permitiéndole crear una excelente experiencia de usuario sin codificación manual.

De esta manera, todos, desde las partes interesadas, pasando por los diseñadores, hasta los desarrolladores, se consolidan dentro de una sola plataforma sin pedir a los miembros del equipo que renuncien a las herramientas que han estado utilizando hasta ahora.

Además, App Builder reemplaza las tareas de desarrollo, configura los componentes de la interfaz de usuario y las interacciones que se pueden vincular al código, el estilo y los diseños.

Recientemente, publicamos una descripción general completa del producto App Builder y un tutorial. Puede verlo a continuación para conocer todo sobre sus características y capacidades y comenzar a usarlo.

Desde el punto de vista empresarial, nuestra plataforma low-code reduce los costes de desarrollo de aplicaciones al democratizar el proceso de desarrollo de aplicaciones, ayuda a evitar los cambios tecnológicos y automatiza los flujos de trabajo empresariales. Dado que está basado en la nube, el software de creación de aplicaciones también promueve la escalabilidad y el cifrado de datos.