Usa Emailify, un plugin de Figma de Hypermatic, para diseñar correos electrónicos responsivos y añadirlos a tus correos electrónicos de Omnisend.
🔋 ¿Buscas la integración nativa de Figma de Omnisend? Aprende cómo integrar Figma con Omnisend
Cómo funciona
Emailify es un plugin de Figma que convierte tu diseño de Figma en código de correo electrónico HTML responsivo listo para producción.Incluye una preconfiguración de exportación de Omnisend que genera HTML formateado para las campañas de HTML personalizadas de Omnisend.
El flujo tiene dos etapas:
Diseña y exporta en Figma. Construye el correo electrónico usando los componentes de Emailify, seleccionaOmnisend en el panel de exportación y exporta el HTML.
Importa en Omnisend. Pega el HTML exportado en una campaña usando la función de HTML personalizado de Omnisend.
Esta es una integración manual de exportar y pegar.Emailify no sube plantillas a Omnisend automáticamente, por lo que no hay conexión API, ni paso de autenticación, ni datos enviados entre las dos plataformas.
Antes de empezar
Asegúrate de que:
Tienes una cuenta de Figma con permiso para ejecutar plugins.
El plugin de Emailify está instalado en Figma.
Tienes una cuenta de Omnisend con acceso a campañas de correo electrónico.
Tus imágenes de correo electrónico están alojadas en URLs públicas, o estás listo para alojarlas.
Esta integración involucra tres plataformas.Esto es lo que cada uno requiere:
Plataforma | Requisito |
Figma | Cualquier plan, incluyendo el gratuito.Necesitas un asiento con acceso completo a Diseño, porque los asientos de solo vista no pueden ejecutar plugins. |
Emailify | La versión gratuita funciona para exportaciones básicas.El plugin incluye 10 usos gratuitos de Pro, después de los cuales algunas opciones de exportación requieren una licencia Pro. |
Omnisend | Cualquier plan, incluyendo el gratuito.Las campañas de HTML personalizadas están disponibles en todos los planes. |
⚠️ Emailify solo funciona con correos electrónicos construidos dentro del plugin.No puedes convertir un diseño existente de Figma que no fue creado con componentes de Emailify.
Proceso de Configuración
Paso 1. En Omnisend, ve a Aplicaciones → buscar el Aplicación Emailify y haz clic enConectar ahora.
Paso 2. Instala Emailify en Figma:
Abre un archivo de diseño de Figma.
Ve a Herramientas → Plugins → Emailify.
El panel del plugin se abre sobre tu lienzo.
Paso 3. Construye tu correo electrónico. En el panel del plugin, abre elNuevo Correo Electrónico sección.
Elige Plantilla en Blanco, o selecciona un punto de partida de Diseños o Plantillas de Figma.
Paso 4. Exporta el HTML para Omnisend:
Selecciona Exportar HTML en el encabezado del plugin.
En el panel de exportación, abre el menú desplegable del tipo de exportación.
Bajo la lista de integraciones de plataformas, selecciona Omnisend.
Selecciona Exportar para Omnisend.
Emailify genera el HTML, y puedes descargarlo a tu computadora.
Paso 5. Aloja tus imágenes
La exportación incluye tus imágenes como archivos locales.Los clientes de correo electrónico no pueden mostrar imágenes locales, por lo que cada imagen necesita una URL pública antes de que importes el HTML.
Tienes dos opciones:
Usa el alojamiento de imágenes de Emailify. Habilita la opción de imagen alojada en la configuración de exportación para que el HTML exportado apunte a URLs públicas.
Aloja las imágenes tú mismo. Súbelas a tu propio CDN o almacenamiento de archivos, luego reemplaza cada
valor src en el HTML con la URL alojada.
🔁 Verifica las URL de las imágenes en el HTML exportado antes de importar.Si algún src aún apunta a una ruta de archivo local, la imagen no se cargará en el correo electrónico entregado.
Paso 6. Importa el HTML en Omnisend.
Consulta Agregar y configurar elemento HTML personalizado para detalles sobre los requisitos de HTML personalizado de Omnisend.
Paso 6. Agrega personalización y enlaces requeridos.
Emailify genera HTML estático.Cualquier cosa específica de Omnisend se agrega después de la importación:
Etiquetas de personalización. Inserta etiquetas de Omnisend como
[[ contact.firstName ]] directamente en el HTML donde quieras valores dinámicos.Enlace de cancelación de suscripción. Cada campaña requiere un enlace de cancelación de suscripción. Agrega la URL de cancelación de suscripción de Omnisend a tu pie de página si el diseño no incluye uno.
Enlace para ver en el navegador. Los componentes de preencabezado de Emailify incluyen un marcador de posición de "ver en el navegador". Reemplaza el marcador de posición con el enlace de Omnisend.
Verifica la Integración
Envía un correo electrónico de prueba antes de programar la campaña.
Abre la campaña importada en Omnisend.
Envía un correo electrónico de prueba a tu propia dirección.
Confirma que todas las imágenes se carguen.
Confirma que el diseño se renderice correctamente tanto en escritorio como en móvil.
Verifica el correo electrónico en más de un cliente, como Gmail y Outlook.
Confirma que el enlace de cancelación de suscripción funcione.
Confirma que cualquier etiqueta de personalización se resuelva.
🔁 La vista previa de Omnisend y un correo electrónico de prueba entregado pueden producir resultados diferentes.Utiliza un correo electrónico de prueba entregado como tu verificación final.
Resolución de problemas
El HTML es rechazado en la importación
La importación de HTML personalizada de Omnisend tiene requisitos de formato.Verifica que el código los cumpla y elimina cualquier elemento no soportado antes de pegar.
Las imágenes no se cargan
Verifica lo siguiente:
Cada
srcapunta a una URL pública en lugar de una ruta de archivo local.Las URL de las imágenes alojadas se abren correctamente en un navegador.
Los archivos de imagen se subieron antes de que se enviara la campaña.
El diseño se rompe en Outlook
Outlook utiliza un motor de renderizado diferente al de la mayoría de los clientes.En Emailify:
Re-exporta con fuentes seguras para la web configuradas.
Verifica la configuración de anulación móvil para los componentes afectados.
Vuelve a probar después de cada cambio, porque el renderizado de Outlook no se puede verificar desde la vista previa de Figma.
El complemento no se abrirá en Figma
Si Figma muestra un mensaje de "Solicitar diseño de Figma para ejecutar complementos", tu asiento no tiene acceso completo al diseño.Los complementos no se pueden ejecutar en asientos de solo vista.Solicita acceso al diseño a tu administrador de Figma.
Los cambios en Figma no aparecen en Omnisend
No hay conexión en vivo entre las dos plataformas.Después de editar el diseño, exporta el HTML nuevamente y reimportalo en una nueva campaña.
Preguntas frecuentes
¿Emailify sube automáticamente las plantillas a Omnisend?
No. La exportación de Omnisend produce un archivo HTML que pegas manualmente en Omnisend.
¿Necesito una clave API de Omnisend?
No. Esta integración no utiliza la API de Omnisend.
¿Necesito una licencia de Emailify de pago?
No necesariamente. El complemento incluye 10 usos Pro gratuitos, y la versión gratuita sigue disponible después.Verifica el panel del complemento Emailify para ver qué opciones de exportación incluye tu versión actual.
¿Necesito un plan de Omnisend de pago?
No. Las campañas HTML personalizadas están disponibles en todos los planes, incluido el gratuito.
¿Puedo editar el diseño dentro de Omnisend después de importar?
El HTML importado se edita como código en lugar de en el editor de arrastrar y soltar de Omnisend.Realiza cambios de diseño en Figma y vuelve a exportar.
¿Puedo reutilizar el mismo diseño para múltiples campañas?
Sí. Guarda el archivo HTML exportado y pégalo en cada nueva campaña.
¿Puedo importar un diseño de correo electrónico existente de Figma en Emailify?
No. Emailify solo exporta correos electrónicos construidos con sus propios componentes dentro del plugin.
¿Esto funciona para correos electrónicos de flujo de automatización?
El HTML exportado se puede usar en cualquier lugar donde Omnisend acepte HTML personalizado.Revisa las opciones de HTML personalizado disponibles en tu correo electrónico de flujo.
¿No encontraste la respuesta a tu pregunta? Contacta a nuestro equipo de soporte a través del chat en la aplicación o en [email protected] – estamos disponibles 24/7.