Al hacer clic en el botón Preview de la cabecera del plugin Emailify, se genera automáticamente una vista previa en HTML real de tu email directamente dentro del plugin de Figma.
Mientras la ventana de vista previa está abierta, los cambios que hagas en tus capas de Emailify en Figma se reflejan en tiempo real en la vista previa HTML.
Usar las pestañas del panel de vista previa
El panel de vista previa tiene cuatro pestañas:
- HTML Preview muestra el HTML responsive actual, se actualiza a medida que editas las capas de Figma e incluye un interruptor sencillo para previsualizar el modo oscuro.
- Preflight revisa el HTML de producción en busca de problemas prácticos con el asunto, el preencabezado, la accesibilidad, los enlaces, las imágenes, la entrega y el recorte de Gmail.
- Test Send prepara el HTML de producción para que puedas copiarlo en htmltest.email y hacer una prueba manual en la bandeja de entrada.
- Email Previews solicita capturas de clientes de email desde dentro de Emailify. Consulta Usar Email Previews en el plugin.
Preflight y Test Send usan el acceso al HTML de producción de Emailify, así que están disponibles con una licencia Pro activa o mientras te queden usos de prueba Pro gratis. Consulta Probar tus emails HTML antes de enviarlos para ver las opciones de prueba en clientes de email.
Los GIF se muestran como imágenes estáticas en el modo de vista previa para que la vista previa cargue más rápido (los GIF tardan más en renderizarse), pero estarán animados en las exportaciones HTML finales del plugin.
Puedes editar cualquier ajuste para móvil mientras la ventana de vista previa está abierta haciendo clic en el botón Settings de la cabecera del panel de vista previa.
Previsualizar tu email en distintos anchos de dispositivo
Para ver cómo queda en distintos anchos de dispositivo, haz clic en el selector de la cabecera del panel de vista previa y elige una de estas opciones:
- Desktop & Mobile (vista híbrida)
- Desktop (726px de ancho)
- iPhone 17 Pro Max (440px de ancho)
- iPhone 16 Pro Max (430px de ancho)
- iPhone Air (420px de ancho)
- Google Pixel (412px de ancho)
- iPhone 17 (402px de ancho)
- iPhone 16 (393px de ancho)
- iPhone 13 Mini (375px de ancho)
- iPhone 12 Mini (360px de ancho)
- iPhone SE (320px de ancho)
Punto de ruptura móvil de los emails. Los emails HTML exportados desde Emailify tienen un único "punto de ruptura" (breakpoint), que se define automáticamente según el ancho del frame de escritorio en Figma. Por ejemplo, si tu frame de Emailify mide 600px, los estilos y ajustes para móvil empezarán a mostrarse a partir de 599px o menos.
Normalmente se recomienda mantener el ancho del email entre 600px y 640px, porque los paneles de lectura de algunos clientes o apps de email pueden medir menos de 700px de ancho y mostrar los estilos de móvil en lugar del diseño de escritorio.
Ver en directo en la ventana de vista previa HTML los cambios hechos en Figma
Con la vista previa HTML abierta, puedes seguir editando tus capas de Figma y ver al instante cómo se actualizan esos cambios en la ventana de vista previa, sin tener que hacer clic en Refresh cada vez.
Previsualizar el modo oscuro
Activa Dark Mode en la barra de herramientas de HTML Preview para comparar el email actual con la vista previa local aproximada del modo oscuro de Emailify. La vista previa usa un tratamiento de color automático genérico, no los colores de un cliente de email concreto. Puedes seguir usando el selector de ancho de la vista previa para revisar el mismo diseño en modo oscuro en anchos de escritorio o de móvil. Dark Mode no está disponible mientras esté seleccionada la vista híbrida combinada Desktop & Mobile.
Si el email contiene ajustes del modo oscuro de Emailify, usa el interruptor Overrides que hay al lado para mostrar u ocultar sus estilos explícitos de fondo, texto, borde y sustitución de imágenes.
El interruptor es una ayuda para el diseño, no un emulador de clientes ni de dispositivos. Los clientes de email aplican sus propias transformaciones del modo oscuro, y la vista previa local no reproduce los filtros de saneamiento de las cuentas con sesión iniciada, los motores de renderizado y las fuentes nativos, la interfaz de las apps, el procesamiento en la entrega ni todas las diferencias entre clientes y versiones.
La compatibilidad con los estilos de ajustes del modo oscuro en los clientes de email es limitada. Los ajustes explícitos de Emailify están pensados para las versiones compatibles de Apple Mail; Gmail, Outlook, Windows Mail, Yahoo y otros clientes pueden aplicar un comportamiento de color automático distinto.
Comprobar el peso de tu email HTML en kilobytes (kb)
En la cabecera del panel de vista previa verás un número que representa el peso total del HTML de tu email (solo el .html, sin incluir las imágenes). Te puede servir para saber si has superado el límite de recorte de 102kb de Gmail.
Si tu HTML pesa más de 102kb, el peso que aparece en la ventana de vista previa se resaltará en amarillo como aviso visual de que tu email ha superado ese límite.
Reducir o agrupar el número de capas "Row" de tu email es la mejor forma de reducir el peso de tu HTML.
Previsualizar las fuentes alternativas seguras para web de tu email
Si has definido fuentes alternativas seguras para web para las fuentes web personalizadas de tu email, puedes previsualizar cómo se verán activando el interruptor Show Fallback Fonts en la parte inferior de la ventana de vista previa de Emailify.
Revisión (y corrección automática) de Auto Layout en las capas de Emailify
Cuando previsualizas tu HTML con la función Preview del plugin, este detecta automáticamente si las capas que añadiste con el plugin Emailify siguen teniendo las propiedades de Auto Layout de Figma correctas para garantizar una exportación a HTML visualmente coherente.
Te mostrará una lista de las capas cuyas propiedades de Auto Layout hay que retocar (por ejemplo, cambiar la altura "Fixed" a "Hug"). Si quieres, puedes aplicar estos cambios automáticamente haciendo clic en el botón Apply Fixes, que actualizará las capas de Figma marcadas con los retoques de Auto Layout necesarios.
Mover a mano y resolver las capas de Emailify que están en un sitio incorrecto
Cuando previsualizas tu HTML con la función Preview del plugin, este detecta automáticamente si las capas que añadiste con el plugin Emailify siguen teniendo la estructura con la que se crearon (por ejemplo, capa Row -> capa(s) Column -> capas de contenido) para garantizar una exportación a HTML visualmente coherente.
Te mostrará una lista de las capas que hay que mover a mano, con instrucciones para cada una (por ejemplo, "Move this Row layer back into the main Email frame"), y un botón para saltar al instante a la capa en tu página y en la lista de capas de Figma, para que sea más fácil encontrarla y moverla.
Puedes aplicar ajustes en bloque abriendo Settings y seleccionando en Figma varias capas de Emailify del mismo tipo. Cualquier ajuste que cambies se aplicará a todas las capas seleccionadas.