Cómo exportar de Figma a Klaviyo: guía completa

Has pasado horas diseñando un hermoso email de comercio electrónico en Figma. La tipografía está en punto, las imágenes del producto se ven crujientes, y todo está perfectamente alineado. Ahora necesitas meterlo en Klaviyo, y ahí es donde las cosas se complican.

Si alguna vez has intentado exportar Figma a Klaviyo, usted sabe la frustración: diseños romper, colores cambiar en modo oscuro, Outlook mangle su CSS, y Gmail clips su contenido cuidadosamente elaborado. Esta guía te guiará por todo el proceso, desde el enfoque manual hasta los flujos de trabajo automatizados, para que puedas encontrar el método que funciona mejor para tu equipo.

Camino Manual: Cómo exportar diseños de Figma a Klaviyo Paso a paso

Empecemos con lo básico. Si nunca has hecho esto antes, aquí está la manera más directa (si algo tedioso) de mover tu diseño de correo electrónico Figma en Klaviyo:

1. Termina tu diseño de correo electrónico en Figma. Asegúrese de que todo está dentro de un solo marco en el ancho de correo electrónico correcto (600px es el estándar).
2. Dividir directamente en Figma. Use Figma incorporado Herramienta de división (shortcut: S) para dibujar secciones horizontales a través de su marco de correo electrónico. Coloque una sección en cada ruptura lógica — entre el encabezado y el cuerpo, entre secciones de contenido, por encima del pie. A continuación, seleccione todas las secciones y exportarlas inmediatamente como PNG o JPG.
3. Comprime cada sección. Utilice una herramienta como TinyPNG o Squoosh para reducir tamaños de archivos. Objetivo para menos de 200KB por sección — esto mantiene los tiempos de carga rápidos sin pérdida de calidad visible.
4. Sube a Klaviyo. En el editor de correo electrónico de Klaviyo, añadir bloques de imagen y subir cada sección con el fin de arriba a abajo. Añadir enlaces clicables a cada imagen donde sea necesario.
5. Prueba y envía. Vista previa a todos los clientes, comprueba que los enlaces funcionan y programa tu campaña.

Este proceso funciona. Millones de emails de comercio electrónico se construyen de esta manera todos los días. Pero se necesita 15 a 30 minutos por campaña, y si usted envía varios correos electrónicos por semana, que suma rápido. Hablaremos de alternativas más rápidas después, pero primero, vamos a entender ¿Por qué? la división de imágenes importa mucho.

¿Por qué debe dividir sus imágenes de correo electrónico (no enviar una imagen grande)

Puede parecer más fácil exportar todo el email como una sola imagen y dejarlo caer en Klaviyo. Una imagen, una carga, hecha, ¿verdad? Desafortunadamente, ese enfoque crea varios problemas que pueden sabotear silenciosamente sus campañas.

Gmail Descargar Icon en Imágenes Grandes

Cuando Gmail detecta una imagen demasiado alta (aproximadamente más de 800 px), supera un icono de descarga encima. Este botón de descarga cubre su contenido, hace que el email se vea roto, y da a sus destinatarios una razón para ignorarlo por completo. Por imagen dividiendo su correo electrónico en secciones más pequeñas, cada sección se queda debajo de ese umbral y Gmail los muestra limpiamente.

Clipping HTML de Gmail 102KB

Aquí hay uno que viaja a muchos email marketers: Gmail corta cualquier correo electrónico cuyo HTML supera 102KB. Cuando eso sucede, Gmail muestra un enlace "Ver mensaje completo" en la parte inferior, y la mayoría de la gente nunca lo hace. ¿Tu pie, tu CTA, tu enlace de suscripción? Se fue.

Las buenas noticias: cuando usted utiliza correos electrónicos basados en imágenes, las imágenes mismas son alojadas externamente y no cuenta hacia el límite 102KB. Su HTML es sólo una serie de <img> etiquetas y enlaces, manteniendo el total bien bajo el umbral.

Modo Oscuro No Ruin Su Diseño

Cada cliente de correo electrónico maneja el modo oscuro de forma diferente. Apple Mail invierte fondos. Gmail cambia los colores de texto. Outlook hace su propia cosa enteramente. Si su correo electrónico está codificado en HTML, el modo oscuro puede hacer que su texto blanco sea invisible en un fondo blanco volcado oscuro, o hacer que sus colores de marca se vean completamente equivocados.

Los correos electrónicos basados en imágenes son inmunes a esto. Dado que el contenido se hornea en la imagen, no hay colores CSS para el modo oscuro para anular. Lo que diseñó es lo que ve su cliente.

Compatibilidad de Microsoft Outlook

Outlook renders HTML usando Motor de Microsoft Word. Eso significa que flexbox no funciona, la rejilla no funciona, y las propiedades CSS más modernas son ignoradas. Si alguna vez has pasado horas depurando un correo electrónico que se ve perfecto en todas partes excepto Outlook, sabes el dolor. Los correos electrónicos basados en imágenes eliminan esto por completo — hacen lo mismo en cada cliente.

Cómo lucen los correos electrónicos reducidos en la práctica

Para hacer este hormigón, aquí es como es el proceso de división de imagen. Usted toma un diseño completo de correo electrónico y dividirlo en secciones horizontales lógicas:

Cada sección se convierte en su propia imagen en Klaviyo. Los apilas verticalmente, añades enlaces clicables a cada uno, y el destinatario ve un correo electrónico sin costuras, sin huecos, sin diseños rotos, sólo tu diseño original renderizado pixel-for-pixel.

Emails en HTML o con imágenes: la perspectiva del ecommerce

Hay un debate en curso en el mundo del email marketing: ¿Deberías codificar correos electrónicos en HTML o enviarlos como imágenes cortadas? La respuesta depende de sus prioridades.

Correos electrónicos codificados por HTML son excelentes para el contenido de texto pesado como boletines, correos electrónicos transaccionales, o cualquier cosa que necesite ser totalmente accesible. Herramientas como plugins Figma-to-HTML (como Emailify) puede convertir su diseño en código HTML. Sin embargo, todavía se enfrentará a presentar inconsistencias a través de los clientes, especialmente Outlook y modo oscuro.

Correos electrónicos basados en imágenes son ideales para campañas de comercio electrónico donde el diseño visual es la prioridad: lanzamientos de productos, anuncios de ventas, campañas de marca, promociones estacionales. Cada gran marca de comercio electrónico —de Nike a Zara a cientos de tiendas Shopify— envía emails basados en imágenes para sus campañas de marketing.

¿El mejor enfoque? Usa ambos. Basado en imágenes para sus campañas de marketing de alto diseño, código HTML para correos electrónicos transaccionales y boletines de texto simple. La mayoría de los equipos de comercio electrónico encuentran que el 70-80% de sus campañas se benefician del enfoque basado en la imagen.

"¿No van los emails de imagen a Spam?" — Debunking the Myth

Esta es probablemente la preocupación más común, y vale la pena abordar directamente.

La idea de que los correos electrónicos inteligentes de imagen duelen automáticamente la entrega es obsoletos. La entrega de correo electrónico moderna depende de:

• Reputación del remitente — su autenticación de dominio (SPF, DKIM, DMARC), tasas de compromiso y lista de higiene
• Compromiso básico — si la gente abre, hace clic e interactúa con sus correos electrónicos
• Calidad de la lista - enviar a gente que realmente quiere saber de ti

El mito de relación imagen-texto viene de principios de los años 2000 cuando los filtros de spam eran primitivos. Los filtros de spam de hoy utilizan el aprendizaje automático y las señales conductuales —se preocupan por si sus destinatarios se comprometen con sus correos electrónicos, no si utiliza imágenes.

Dicho esto, todavía se aplican las mejores prácticas: incluir texto alternativo en cada imagen (para la accesibilidad y como retroceso cuando las imágenes no se cargan), añadir un preheader de texto, y mantener su dominio de envío debidamente autenticado. Si tiene más preguntas sobre la entregabilidad y mejores prácticas de correo electrónico, compruebe nuestra Página de preguntas frecuentes para respuestas rápidas.

Acelerando el Figma a Klaviyo Workflow

El método manual funciona, pero hacerlo por cada campaña se hace viejo rápido. Aquí hay algunas maneras de acelerar las cosas cuando usted exportar Figma a Klaviyo:

Opción 1: Plugins de Figma

Varios plugins de Figma pueden ayudar a automatizar partes de este flujo de trabajo. Algunos convierten diseños en HTML (como Emailify), mientras que otros — como los plugin de EmailSlicer Figma — manejar la división de imagen, compresión y Klaviyo importar directamente desde Figma. La ventaja de permanecer dentro de Figma es que se salta el ciclo de recarga de la exportación completamente.

Opción 2: Herramientas de división de imágenes basadas en web

Si tu diseño no viene de Figma —quizás un freelancer te envía una imagen plana, o utilizas otra herramienta de diseño— los cortadores web te permiten subir cualquier imagen, establecer los puntos de sección, comprimir y descargar las secciones o empujarlas a Klaviyo a través de API. Puedes comparar los planes disponibles para encontrar el adecuado ajuste para el volumen de su equipo.

Opción 3: Construya su propia tubería

Si usted está técnicamente inclinado, puede construir un oleoducto personalizado usando Sharp (node.js biblioteca de imágenes) o Python's Pillow para automatizar la división y compresión de la imagen, a continuación, utilice la API de Klaviyo para subir las imágenes programáticamente. Esto es demasiado para la mayoría de los equipos, pero es una opción si usted tiene requisitos muy específicos.

El flujo de trabajo en un Glance

Independientemente del método que elija, el flujo de trabajo básico a exportar Figma a Klaviyo es el mismo: diseñar su correo electrónico, seccionarlo en secciones, comprimir para el rendimiento web, e importar en Klaviyo. La única diferencia es la cantidad de ese proceso que hace manualmente vs. con herramientas. Cubrimos más estrategias de email marketing y consejos de flujo de trabajo en nuestro blog — vale la pena reservar si usted está optimizando su tubería de producción de correo electrónico.

Preguntas frecuentes

¿Puedo exportar directamente desde Figma a Klaviyo sin herramientas?

No nativamente. Figma no tiene una integración Klaviyo integrada. Tendrás que exportar tu diseño como imagen primero, y luego subirlo a Klaviyo. La pregunta es si haces cada paso manualmente o usas un plugin/herramienta para automatizarlo.

¿Qué formato de imagen debería usar para correos electrónicos?

JPEG es mejor para fotografías y visuales complejas (tamaños de archivo más pequeños). PNG es mejor cuando usted necesita transparencia o tiene grandes áreas de color plano. Para la mayoría de los emails de comercio electrónico con la fotografía de productos, JPEG al 80-85% de calidad da la mejor relación tamaño a calidad.

¿Cuántas secciones debo usar por correo electrónico?

Típico 4 a 8 secciones trabajar bien. El objetivo es mantener cada imagen bajo ~800px alto (para evitar el icono de descarga de Gmail) mientras se cortan en los límites de contenido lógico — entre el encabezado y el cuerpo, entre secciones del producto, por encima de la caldera. Cada sección debe corresponder a un área de clic diferente si es posible.

¿Los correos electrónicos basados en imágenes afectarán la velocidad de carga?

Las secciones correctamente comprimidas cargan más rápido que una sola imagen grande. Los clientes de correo electrónico pueden cargar múltiples imágenes más pequeñas en paralelo, y la compresión puede reducir el tamaño total de archivo en 60-80% sin pérdida de calidad visible. La clave es la compresión, siempre comprime antes de subir a Klaviyo.

¿Y la accesibilidad?

Esto es una compensación legítima. Los correos electrónicos basados en imágenes no son accesibles para los lectores de pantalla de la manera en que el texto HTML es. Para mitigar esto, agrega siempre texto alternativo descriptivo a cada imagen, incluye un enlace "View in browser", y considera agregar una versión de texto claro de su campaña en Klaviyo. Para correos electrónicos promocionales del comercio electrónico, la mayoría de las marcas aceptan este intercambio a cambio de una consistencia visual garantizada.