Plantillas de email en Figma para ecommerce

Si estás diseñando campañas de correo electrónico para una tienda de comercio electrónico en 2026, casi seguro que estás usando Figma. Se ha convertido en la herramienta de diseño predeterminada para equipos de marketing, agencias y diseñadores freelance, y por buena razón.

Pero el diseño de correo electrónico tiene limitaciones únicas que el diseño de web y aplicaciones no. No puedes usar flexbox, rejilla CSS o hojas de estilo externas. Muchos clientes de correo electrónico todavía confían en diseños basados en tablas. Y lo que parece perfecto en Figma puede romper espectacularmente cuando golpea Outlook.

Esta guía cubre cómo configurar plantillas de correo electrónico de Figma correctamente desde el principio, por lo que sus diseños se traducen limpiamente en correos electrónicos reales — ya sea exportando como HTML o como imágenes.

Por qué Figma es la mejor herramienta para el diseño de correo electrónico

Comparado con Photoshop, Canva o cualquier otra herramienta de diseño, Figma ofrece tres ventajas críticas para el email:

• Componentes y variantes: Diseña un botón una vez, reutilizarlo a través de 20 plantillas. Cambia el componente maestro y cada instancia actualiza automáticamente. Esto solo ahorra horas al gestionar un calendario de campaña.
• Diseño automático: El diseño automático de Figma funciona como CSS flexbox — dirección de configuración, relleno, espaciamiento y alineación. Estos mapas directamente a cómo los diseños de correo electrónico están estructurados, haciendo la traducción de diseño a código mucho más suave.
• Colaboración en tiempo real: Su copywriter puede actualizar texto mientras ajusta el diseño. Su gestor de marketing puede dejar comentarios directamente en el diseño. No más mensajes de correo electrónico PSD de ida y vuelta.

Canva es más rápido para principiantes, pero carece del sistema de componentes y control de precisión que el diseño de correo electrónico requiere. Photoshop sigue siendo útil para la edición de imágenes, pero no está construido para sistemas de diseño y colaboración.

Configuración de su marco de plantilla de email

Obtener la derecha de la fundación evita dolores de cabeza más tarde. Aquí está la configuración exacta:

Dimensiones del marco

• Ancho: 600px — Este es el estándar de correo electrónico universal. Cada cliente de correo electrónico principal espera 600px o más estrecho. Algunas marcas usan 640px, pero 600px es el más seguro.
• Contenedor de contenido: 540-560px - Dejar el relleno de 20-30 px en cada lado. Esto evita que el contenido toque los bordes en clientes móviles que agregan su propio relleno.
• Altura: variable - No pongas una altura fija. Deje que el contenido determine la longitud del correo electrónico. Usar el diseño automático fijado en vertical con "Contenido de abrazo".

Grid System

• 8px rejilla de espaciamiento: Use múltiples de 8 para todos los espaciamientos (8, 16, 24, 32, 40, 48px). Esto crea un ritmo visual constante y hace que el escalado sensible sea predecible.
• Rejilla de diseño: Aplique una cuadrícula de 6 columnas en su marco de 600px. Esto le da flexibilidad para diseños de 1-column, 2-column y 3-column dentro de la misma plantilla.

Construcción de su biblioteca de componentes

El poder real de Figma para el correo electrónico es construir componentes reutilizables. Esto es lo que cada biblioteca de componentes de e-commerce debe incluir:

Componentes esenciales

• Header: Logo + enlaces de navegación (opcional). Manténgalo simple — la mayoría de los clientes de correo electrónico raya navegación compleja. Un logotipo centrado con uno o dos enlaces de texto es el estándar.
• Estandarte Hero: Imagen de ancho completo o gradiente con titular y CTA. Crear variantes para diferentes tipos de campaña (venta, nueva llegada, editorial).
• Tarjeta de producto: Imagen + nombre del producto + precio + botón CTA. Este es el componente de caballo de trabajo para emails de comercio electrónico. Cree variantes para diseños de 1 columna (anchura completa) y 2 columnas.
• CTA botón: Tu componente más importante. Crear variantes para primaria (llenada), secundaria (sin conexión), y diferentes tamaños. Objetivo mínimo del grifo: 44x44px para móvil.
• Bloque de texto: Dirección + texto corporal con diseño automático. Configure con la escala de tipografía de su marca.
• Footer: Enlaces sociales + darse de baja + dirección física (requerido por CAN-SPAM). Mantenlo consistente en todos los correos electrónicos.

Utilizando Figma Variables

Las variables de Figma le permiten definir sus fichas de diseño — colores, espaciamiento, tipografía— en un solo lugar. Cuando tu marca actualiza su naranja de #FF4F00 a una sombra ligeramente diferente, cambia la variable una vez y cada componente usando actualizaciones instantáneas.

Para plantillas de correo electrónico, definir variables para:

• Colores de marca (primario, secundario, acento)
• Colores de texto (cabeza, cuerpo, mudo)
• Colores de fondo (primario, secundario, tarjeta)
• Valores de espaciamiento (paquete de sección, lagunas de elementos)
• Radius fronterizo (botones, tarjetas, imágenes)

El flujo de trabajo de Figma a Email

Una vez que su diseño esté completo, necesita introducirlo en su plataforma de correo electrónico. Hay dos enfoques principales:

Enfoque 1: Exportar como HTML

Plugins como Emailify puede convertir su diseño de Figma en código HTML que pega directamente en el editor de códigos personalizado de Klaviyo. La ventaja es el texto en vivo que se puede buscar, traducir y accesible. La desventaja es renderizar inconsistencias — lo que parece perfecto en Figma puede romper en el modo oscuro de Outlook o renderizar con fuentes de retroceso.

Este enfoque funciona mejor para correos electrónicos de alta calidad (newsletters, contenidos educativos, correos electrónicos transaccionales) donde el contenido de texto es más importante que el diseño de píxel-perfect.

Enfoque 2: Exportar como Imágenes (Split y Upload)

Exporte su diseño como imagen completa, seccione en secciones horizontales, comprime cada sección y suba a Klaviyo como bloques de imagen. La ventaja es pixel-perfect rendering en cada cliente de correo electrónico - incluyendo el modo oscuro. La desventaja es que el texto dentro de las imágenes no se puede buscar ni traducir.

Este enfoque es lo que la mayoría de las marcas de comercio electrónico utilizan para campañas de marketing — lanzamientos de productos, ventas de temporada, narración de marca— donde el diseño visual impulsa el compromiso. Para una profunda inmersión en la compresión de la imagen, ver nuestra guía de compresión de imagen.

Enfoque 3: híbrido

Use secciones basadas en imágenes para áreas visualmente importantes (hero, escaparate de productos) y secciones codificadas por HTML para contenido dinámico (recomendaciones de productos personalizados, texto con etiquetas de fusión). El editor de Klaviyo admite mezclar ambos en un solo correo electrónico.

Errores comunes de diseño de correo electrónico de Figma

Incluso los diseñadores experimentados cometen estos errores al diseñar correos electrónicos en Figma:

• Diseñando más de 600px: Parece limitarse, pero 600 px es el ancho máximo seguro. Cualquier cosa más ancha se rompe o activa desplazamiento horizontal en muchos clientes de correo electrónico.
• Utilizando funciones CSS sin soporte: Flexbox, cuadrícula CSS, posición absoluta, imágenes de fondo — ninguno de estos trabajos fiablemente en el correo electrónico. Si usted está exportando a HTML, diseño con diseños basados en tablas en mente.
• Olvidar el móvil: Más del 60% de los correos electrónicos se abren en el móvil. Si su red de productos de 2 columnas no se apila en pantallas estrechas, usted está perdiendo la mayoría de su audiencia.
• Imágenes de gran tamaño: Exportar una imagen de héroe a 3000px de ancho cuando sólo necesita ser 1200px (600px a 2x para retina). Exportaciones más grandes = tamaños de archivos más grandes = carga más lenta. Vea nuestra guía de tamaño de imagen Klaviyo para dimensiones exactas.
• No utilizar componentes: Reconstruir botones, encabezados y tarjetas de producto desde cero para cada campaña es una pérdida de tiempo masiva. Invierte una hora en la construcción de una biblioteca de componentes y pagará por sí mismo inmediatamente.
• Saltar la prueba del modo oscuro: Su diseño de Figma siempre muestra el modo de luz. Pero el 80% más de los usuarios móviles tienen el modo oscuro habilitado. Pruebe cómo su correo electrónico se rinde antes de enviar. Lea nuestra guía de correo electrónico de modo oscuro para estrategias detalladas.

Plantillas de correo electrónico gratuitas para empezar

Si estás empezando desde cero, el Figma Community tiene excelentes colecciones de plantillas de email gratis. Busque "email template e-commerce" y busque colecciones que incluyen:

• Múltiples tipos de campaña (bienvenidos, promocionales, transaccionales)
• Bibliotecas de componentes (no sólo diseños planos)
• Ambas variantes de escritorio y móvil
• Diseños específicos para el comercio electrónico (rejillas de productos, resúmenes de carrito)

Duplicar un archivo comunitario, personalizar los colores y la tipografía para que coincida con su marca, y tendrá un sistema de plantillas listo para la producción en menos de una hora.

Preguntas frecuentes

¿Qué ancho debo usar para plantillas de correo electrónico en Figma?

Usar un Marco ancho 600px. Este es el estándar de la industria que rinde correctamente a todos los clientes de correo electrónico. Para el área de contenido, utilice 540-560px para dejar cómodo relleno lateral.

¿Puedo usar fuentes personalizadas en plantillas de correo electrónico?

Si exportas como HTML, las fuentes personalizadas solo funcionan en Apple Mail y algunos otros clientes. Gmail y Outlook vuelven a las fuentes del sistema como Arial. Si usas el enfoque basado en la imagen (exportando como imágenes), cualquier fuente se hace perfectamente ya que se hornea en los píxeles de imagen.

¿Hay plantillas gratuitas de correo electrónico Figma?

Sí, la Comunidad Figma tiene docenas de colecciones gratuitas. Busque "email template e-commerce" y busque archivos con bibliotecas de componentes, no sólo mockups planos.

¿Cómo consigo mi diseño de Figma en Klaviyo?

Dos enfoques: (1) Exportar como HTML usando un plugin y pegar al editor de códigos de Klaviyo, o (2) exportar como imágenes, sección en secciones, y subir como bloques de imagen. El enfoque basado en la imagen es más rápido y hace que sea más consistente entre los clientes.

¿Debo diseñar versiones móviles y de escritorio por separado?

Para correos electrónicos HTML, diseña ambos. Para correos electrónicos basados en imágenes, diseño a 600px y escala proporcionalmente en móvil. La mayoría de las marcas de comercio electrónico diseñan una versión de 600px que funciona tanto en escritorio como en móvil.