Email Ready: correo HTML desde Figma o una imagen

Convertir un diseño en un correo HTML es más difícil que convertirlo en una página web, porque una bandeja de entrada no es un navegador. Email Ready es el modo de salida de MarkupGen pensado para ese trabajo, y ofrece dos caminos: generar el código HTML del correo a partir de tu diseño de Figma, o crear el correo desde una imagen cortando el diseño y añadiendo enlaces. Este artículo explica ambos, cuándo usar cada uno y todo lo que la herramienta resuelve por ti.

Qué es Email Ready

Cada proyecto de MarkupGen tiene un formato de salida. Responsive HTML es para sitios web y landing pages. Email Ready (en la interfaz en español, «Listo para correo») es para newsletters y correos de marketing: en lugar de flexbox y grid, produce HTML basado en tablas con CSS en línea, el formato que Gmail, Outlook y Apple Mail están preparados para mostrar.

Lo eliges en los ajustes de diseño del proyecto, generas, y el resultado es un documento de correo completo, no una página web.

Camino 1: generar código HTML listo para correo

Es el camino por defecto, y el adecuado cuando el correo es sobre todo texto, botones e imágenes sencillas.

• Maquetación con tablas y CSS en línea. Sin flexbox, sin grid, sin hojas de estilo externas que el cliente de correo pueda eliminar.
• Texto real. Los titulares y párrafos siguen siendo texto: se pueden seleccionar, los lectores de pantalla los leen y se muestran aunque las imágenes estén bloqueadas.
• Los efectos que el correo no admite se convierten en imágenes. Las partes del diseño sin equivalente seguro en correo se rasterizan en vez de perderse o romperse.
• Un documento XHTML 1.0 Transitional válido. El doctype, el espacio de nombres y los atributos se normalizan al exportar, porque es la declaración que Outlook, Gmail y Apple Mail manejan con más consistencia.
• Edición directa. Cambia textos y sustituye imágenes en el editor antes de exportar.
• Un medidor de tamaño. La tarjeta Exportación de correo muestra el tamaño actual del HTML frente al límite, para que veas el problema antes que tus suscriptores.

El problema de los 102 KB: por qué Gmail recorta los correos

Gmail recorta cualquier mensaje cuyo HTML supere aproximadamente 102 KB. El destinatario ve el inicio del correo y un enlace «Ver mensaje completo»; lo que quedaba por debajo del corte, a menudo la llamada a la acción y el enlace de baja, queda oculto.

Un diseño rico con muchas secciones puede superar ese límite en forma de código. MarkupGen te avisa a los 100 KB —en el panel de diseño y de nuevo en el diálogo de envío de prueba— y te propone el segundo camino.

Camino 2: crear el correo desde una imagen

Crear correo desde imagen sigue el enfoque contrario. En lugar de describir el diseño con código, usa la propia imagen del diseño, la corta en porciones y las vuelve a montar en una tabla ligera. El HTML solo contiene la tabla y las referencias a las imágenes, así que suele pesar unos pocos KB por complejo que parezca el diseño.

Cómo funciona:

1. Parte de una imagen. La imagen de diseño del proyecto se carga automáticamente, o puedes subir otra: un artboard de Figma, un banner, un cartel.
2. Dibuja las regiones clicables. Arrastra sobre la imagen para dibujar un recuadro sobre cada botón, banner o producto. Muévelo, redimensiónalo desde cualquier borde o esquina, desplázalo 1 px con las flechas o escribe coordenadas exactas.
3. Añade enlace y texto alternativo. Cada región admite un enlace (http(s)://, mailto: o tel:), un nombre y un texto alternativo.
4. Define el ancho del correo. 600 px por defecto; cámbialo si tu plantilla necesita otro ancho.
5. Genera. MarkupGen corta la imagen y construye la tabla.
6. Previsualiza, prueba y exporta. Revisa las vistas previas de escritorio y móvil (375 px), envía un correo de prueba y aplica el código al proyecto o llévatelo a otro sitio.

De qué se ocupa la herramienta durante el proceso:

• Corta solo donde hace falta. La imagen se corta por el borde superior e inferior de cada región. Las porciones contiguas sin enlace se fusionan, de modo que hay menos imágenes y menos peticiones.
• Líneas de corte visibles. Unas guías amarillas muestran exactamente dónde caerán los cortes, para que queden sobre fondo vacío y no atraviesen una línea de texto.
• Montaje exacto al píxel. Las posiciones de corte se ajustan a píxeles enteros en el tamaño de visualización, así que las porciones suman la imagen original sin huecos ni columnas desplazadas.
• Porciones sin pérdida y ya alojadas. Las porciones se guardan como PNG y se suben por ti con URL absolutas: no tienes que alojar nada. Una imagen 2x se mantiene nítida porque se muestra al ancho del correo, sin reducirla.
• Marcado específico para Outlook. Anchos fijos, comentarios condicionales para el motor de Outlook basado en Word y resets que evitan espacios extraños entre porciones.
• Solo enlaces seguros. Todo lo que no sea http(s), mailto o tel se rechaza, y una región sin enlace válido se omite con un aviso en vez de publicar un enlace roto.
• Las regiones se guardan con el proyecto. Vuelve a abrir la herramienta más tarde para corregir un enlace o mover una región sin redibujarlo todo.
• Límites amplios. Hasta 200 regiones de enlace y 400 porciones por correo, con imágenes de hasta 4000 px de ancho.

¿Cuál deberías usar?

Una regla práctica: empieza con el código generado. Pasa al método de imagen cuando el medidor de tamaño supere el límite, o cuando el diseño dependa de fuentes y efectos que los clientes de correo no pueden reproducir.

Todo lo que puedes hacer con el resultado

Ambos caminos terminan en el mismo lugar:

• Enviar un correo de prueba a una bandeja real, directamente desde el editor. El envío se bloquea si queda algún texto o imagen del diseño sin asignar.
• Previsualizar en escritorio y móvil antes de enviar.
• Copiar el código, descargar el archivo .html o compartir un enlace a una copia alojada del correo.
• Aplicar al proyecto y guardar, para que el correo viva junto al resto del proyecto.
• Trabajar en tu idioma: la interfaz está disponible en 10 idiomas.

Para profundizar en las pruebas, consulta cómo generar y probar el envío de HTML de email marketing.

Las contrapartidas, sin rodeos

Un correo basado en imagen no sale gratis. Su texto no se puede seleccionar, copiar ni buscar. Si un cliente bloquea las imágenes por defecto, el destinatario solo ve el texto alternativo hasta que las permite; por eso la herramienta pide texto alternativo en cada región. La maquetación es de ancho fijo, así que en pantallas pequeñas se escala en lugar de reorganizarse; revisa la vista previa móvil. Y una vista previa en el navegador nunca es una prueba: abre siempre el correo de prueba en los clientes que usa tu audiencia.

Preguntas frecuentes

¿Por qué Gmail recorta mi correo? Gmail recorta los mensajes cuyo HTML supera unos 102 KB y oculta el resto tras un enlace «Ver mensaje completo». MarkupGen muestra el tamaño actual y te avisa a los 100 KB.

¿Puedo convertir una imagen en un correo HTML con enlaces clicables? Sí. Crear correo desde imagen corta la imagen, envuelve cada región que dibujas en su propio enlace y reconstruye la imagen como una tabla que los clientes de correo muestran de forma fiable.

¿Tengo que alojar las imágenes yo mismo? No. Las porciones se suben automáticamente y se referencian con URL absolutas, así que el correo funciona en cuanto lo envías.

¿Funcionará en Outlook un correo basado en imagen? El resultado usa maquetación con tablas, anchos fijos y marcado condicional específico para Outlook. Aun así, conviene enviar una prueba a una bandeja de Outlook antes de una campaña.

¿Puedo editar los enlaces después de generar? Sí. Las regiones se guardan con el proyecto, así que puedes reabrir la herramienta, cambiar un enlace o mover una región y generar de nuevo.

¿Solo funciona con diseños de Figma? El camino del código generado parte de un diseño de Figma. El camino de imagen también acepta cualquier imagen que subas dentro de un proyecto Email Ready.

Si tienes una campaña de correo esperando en Figma —o en una sola imagen—, puedes empezar gratis y tener HTML listo para la bandeja de entrada en minutos. Los equipos de marketing pueden ver el flujo completo en MarkupGen para equipos de marketing.