Diseño, Tutoriales, Video | 10 de abril de 2019

Exportar un sitio funcional (HTML y CSS) desde Adobe XD

Últimamente he hecho bastantes videos e incluso un curso hablando de Adobe XD y realmente han tenido una buena recepción, sin embargo, hay una pregunta que ha surgido constantemente:

Cuando ya tengo el diseño listo ¿Cómo lo exporto a html y css para subirlo a mi hosting?

La respuesta es que simplemente no se puede, porque Adobe XD (al igual que Sketch, Figma e Invision Studio) es una aplicación de diseño y no de desarrollo front-end.

Al recibir esta respuesta muchos se cuestionan el porqué no se puede exportar sitios funcionales e incluso hay quienes se atreven a sugerir que una aplicación que sirve solo para diseñar y no para desarrollar no tiene sentido de existir.

Pues bien, a continuación voy a explicarte por qué, a mi juicio, está perfectamente bien que no podamos exportar código desde Adobe XD (o cualquier otra aplicación de diseño).

Diseñadores vs desarrolladores

Ser diseñador y ser desarrollador son dos cosas diferentes.

Los diseñadores nos encargamos de que la interfaz que estamos diseñando se vea bien, tenga coherencia con la marca, sea útil y ofrezca una buena experiencia de uso al usuario.

Los desarrolladores se encargan de escribir el código para que esas interfaces que los diseñadores creamos cobren vida y sean funcionales. El trabajo de los desarrolladores podemos separarlo entre front-end y backend.

Los desarrolladores front-end son quienes más se relacionan con la interfaz, ya que se encargan de construir la parte frontal del producto.

Los desarrolladores front-end ponen mucho cuidado a la hora de construir la estructura de una pantalla:se preocupan de que sea semántico, que sea amigable con los buscadores, que sea compatible con lectores de pantalla y así un montón de otras cosas.

Cuando quieres exportar un sitio funcional desde una aplicación como Adobe XD, estás queriendo reemplazar el trabajo de análisis y estructuración que los desarrolladores frontend hacen.

Si estamos construyendo esta pantalla, por ejemplo, el desarrollador frontend podrá usar su criterio para decir que el título forma parte de la cabecera o que el botón de compartir, a pesar de aparecer sobre el contenido, a un nivel estructural debe estar afuera.

Por su parte, si esperamos que la aplicación haga este análisis por su propia cuenta, probablemente lo hará mal, ya que carece del criterio humano profesional.

Quizás puedas argumentar que la app podría tener alguna forma de estructurar el diseño que le de a entender la jerarquía que queremos tener, pero eso indudablemente reducirá la libertad que tenemos al diseñar y esa es precisamente la gracia de Adobe XD, que podamos hacer prototipos y cambios muy rápido.

Más que un sitio web

Si tu misión es diseñar y construir sitios súper simples (de esos que tienen cuatro a cinco páginas, cuando mucho), puede parecer súper razonable esperar que una aplicación de diseño exporte sitios funcionales, ya que, al fin y al cabo, no se requiere más que un par de enlaces entre páginas.

Pero las aplicaciones de diseño como Adobe XD tienen que servir para más que eso. Deben estar a la altura para diseñar proyectos complejos como un sitio corporativo de decenas de páginas, una aplicación web o una aplicación móvil.

Si diseñamos este tipo de proyectos y luego queremos exportarlo de manera funcional, necesitaríamos un montón de lógica, comprobaciones condicionales, registro de sesiones y un cerro de otras cosas que tiene mucho más sentido hacerlo directamente desde el código, o eventualmente desde una herramienta con ese propósito.

Otras herramientas

Muchas de las personas que esperan que una aplicación de diseño pueda exportar código directamente son huérfanos de Adobe Muse, que era una aplicación que hacía precisamente eso, que están buscando con qué reemplazarlo.

Si ese es tu caso, te digo desde ya que Adobe XD no es en ningún caso reemplazo pasa Muse. Mientras Adobe XD es una aplicación de diseño, Muse era una aplicación visual de desarrollo.

El problema de Muse fue que quiso hacer demasiado visual el desarrollo, pretendió darnos tanta libertad de diseño como photoshop y quiso generar código de manera automática sin pasar por el criterio de un desarrollador, generando código sucio y poco legible (al menos hasta la versión que yo probé).

Hoy las herramientas visuales de desarrollo se han dado cuenta de que no es bueno abstraer tanto el desarrollo, dejando siempre espacio para el criterio del desarrollador.

En este contexto, si lo que buscas es reemplazar Adobe Muse, te recomiendo probar Webflow o Pinegrow.

Sobre Webflow tengo varios tutoriales publicados y un curso completo y sobre Pinegrow, acabo de publicar un tutorial recientemente.

Diseñar en el navegador o en una app de diseño

Cuando muestro alguna app de diseño y prototipado como Adobe XD y hago saber que no se pueden exportar sitios funcionales, una respuesta frecuente es decir que es un gastadero de tiempo inútil, que sería mejor hacerlo directo en el navegador, ya sea escribiendo código, usando Webflow o con algún constructor visual tipo divi o elementor para WordPress.

Podríamos argumentar teóricamente cuál de estas opciones es mejor, pero ya que soy bastante prolífico en todas esas opciones, veámoslo en un caso real.

Tenemos tres tarjetas de contenido, cada una de ellas con un título y un texto. Agreguémosle una imagen, un botón y hagamos que sean cuatro columnas.

3:20 es lo que me tomó este proceso en Adobe XD, 7:51 en Elementor y 7:32 en código directo. Claramente Adobe XD es la opción más rápida, pero ¿por qué esto importante?

Es importante porque acelera el proceso de diseño.

Cuando estamos creando un producto digital, lo ideal es que podamos separar el proceso de diseño del proceso de desarrollo, lo cual va muy de la mano con el primer punto.

El proceso de diseño debería finalizar cuando todos los participantes estamos de acuerdo en el flujo del usuario, en el aspecto que tendrá el producto y la experiencia que ofrecerá.

De este modo cuando el proceso de desarrollo comience ya no será un ir y volver de cambios y correcciones, ya que todo eso se hizo en la etapa de diseño.

Esto se enmarca en el enfoque hacer los pivoteos o cambios de dirección lo más pronto que se pueda porque conforme más retrasas los cambios más implicancias tiene. De este modo en Adobe XD puedo crear tres variaciones de un mismo componente de diseño en la mitad del tiempo que me tomaría hacerlo en HTML y CSS y ni hablar si además de eso hay que implementar algún cambio de lógica en el flujo de usuario.

En síntesis

Creo que está perfectamente bien que no se pueda exportar sitios funcionales, listos para producción desde Adobe XD u otras aplicaciones similares.

Considera que estamos hablando de aplicaciones de diseño, no aplicaciones de desarrollo, así que si me preguntas, preferiría que la gente que trabaja creando Adobe XD invierta más tiempo creando herramientas para diseñar mejor y más rápido, que buscando alternativas para exportar sitios funcionales.

Esta es mi visión hoy día, quizás en el futuro la tecnología cambie y se pueda diseñar con tanta libertad como lo hacemos hoy y exportar productos listos… pero dudo que sea en los próximos 4 años al menos.

Si no te gusta el estado actual de las herramientas de diseño y trabajas creando sitios pequeños, creo que una buena alternativa sería pasarte a Webflow, Pinegrow o a alguno de los constructores visuales de WordPress. No tendrás tanta libertad de diseño, pero al menos obtendrás un proyecto funcional de inmediato.

Por ahora yo seguiré diseñando en Adobe XD, en Sketch, en Figma, en InVision studio o la aplicación que amanezca con ganas de usar para mis diseños.

Si quieres aprender a usar Adobe XD o si quieres aprender sobre Webflow, tengo cursos específicos sobre esas aplicaciones en mi plataforma AMK Pro.

Una vez que adquieras tu membresía tendrás acceso a estos dos cursos y a muchos más. Visita amkpro.com y verás para obtener más información.

Eso es todo por ahora, te mando un abrazo y nos vemos pronto.

Chaolín.

@FranciscoAMK

También te podría interesar:

Entrevista en «Más allá del Diseño»

Esta semana tuve el placer de ser invitado al interesantísimo podcast «Más allá del diseño» con Diego González, un diseñador argentino muy apasionado por ayudar a los colegas que recién comienzan y hacer que el rubro sea cada vez más profesional. Para más información visita:  http://creativosestrategicos.com/entrevista-con-francisco-aguilera/

Seguir leyendo...

Cómo cobrar un buen precio sin sentirte mal por ello

En más ocasiones de las que somos capaces de ver, el problema que nos impide cobrar lo que de verdad vale nuestro trabajo está en nuestra propia mente y no en los clientes o el mercado, como se suele pensar. A continuación te contaré 2 de las barreras mentales que me estancaron y cómo logré […]

Seguir leyendo...

Mi mayor éxito también ha sido el mayor fracaso del 2017

Todo se comenzó en octubre del 2016. Estaba lavando los platos y escuchando un podcast en donde se planteaba la idea de los virtual summit (o congresos virtuales) y sus beneficios. No era un concepto nuevo para mí, ya había escuchado al respecto en ocasiones previas e, incluso, había sido público en algunos de ellos. […]

Seguir leyendo...

Hay 2 opiniones

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 8.096 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.