Añadir contenido dinámico y personalizado con Emailify

Añade contenido dinámico a tus emails con etiquetas de combinación y bloques de código personalizado en la sintaxis de tu plataforma de email marketing.

Tutorial en vídeo: añadir contenido dinámico a emails HTML en Figma

Este vídeo explica cómo añadir contenido dinámico a emails HTML en Figma con el plugin Emailify.

Tutorial en vídeo: añadir un feed de productos dinámico a tus emails de Klaviyo en Figma

Este vídeo explica cómo añadir feeds de productos personalizados de Klaviyo a plantillas HTML personalizadas con el plugin Emailify para Figma.

Tutorial en vídeo: crear en Figma una plantilla de email para el flujo de carrito abandonado de Klaviyo

Este vídeo explica cómo añadir flujos personalizados de carrito abandonado de Klaviyo a plantillas HTML personalizadas con el plugin Emailify para Figma.

Añadir contenido de personalización específico de cada plataforma ​

Puedes añadir texto personalizado, como el nombre de cada persona, con las etiquetas de combinación (merge tags) de tu proveedor de servicios de email (por ejemplo, MailChimp, Klaviyo, etc.). Para hacerlo, añade la etiqueta de combinación en tus capas de contenido de texto de Emailify.

Por ejemplo, si añades Hello, %FIRSTNAME% o Hello, *|FNAME|* (según la sintaxis y los valores de tu plataforma) al contenido de tu capa de texto de Figma, la etiqueta de combinación se sustituirá automáticamente por los datos reales cuando se envíe el email.

Como estas etiquetas cambian según la plataforma que uses para enviar tus emails, consulta la documentación de plantillas de tu proveedor de servicios de email para saber qué etiquetas puedes usar.

Documentación de variables de plantilla de algunas plataformas ​

Estos son los enlaces de algunas (no todas) de las plataformas más populares:

Añadir lógica if/else entre tus capas Row, Wrapper o Hero ​

Puedes usar el tipo de capa 🧑‍💻 Custom Code para insertar lógica de plantilla personalizada entre las filas de tus diseños. Asegúrate de que la sintaxis sea la correcta para la plataforma de email marketing que usas; quedaría más o menos así:

{% if customer_type == 'premium' %}

Aquí va una fila de Emailify

{% else %}

Aquí va otra fila de Emailify

{% endif %}

Añadir imágenes personalizadas o dinámicas ​

Puedes sustituir la URL de la imagen de una capa de imagen concreta de tus diseños de email añadiendo un valor en el campo Override Image Src. Puedes usar la URL de una imagen que ya esté subida en algún sitio (por ejemplo, https://mycdn/img.jpg) o una variable dinámica del lenguaje de plantillas de tu plataforma de email (por ejemplo, { variable.my_image }), que se añadirá automáticamente al atributo src de la etiqueta <img /> al exportar el HTML.

Definir opcionalmente la altura (con un ancho "auto") de una imagen dinámica ​

En las imágenes dinámicas en las que quieras controlar la altura y dejar que el ancho se ajuste de forma natural (porque puede que no se conozcan de antemano las dimensiones del archivo de la URL de la imagen dinámica), tienes que hacer lo siguiente en Figma:

  1. Activa Lock aspect ratio en la capa de imagen en la interfaz de Figma.
  2. Define un valor de Max height para la capa de imagen en la interfaz de Figma.

Con estos ajustes, la imagen se renderiza con una altura fija (igual a la altura máxima que hayas definido en Figma) y un ancho que se ajusta automáticamente, en lugar del comportamiento por defecto (ancho fijo y altura automática). Así tus imágenes dinámicas ocupan el espacio vertical correcto sin perder su proporción natural.

Este comportamiento solo se aplica a las imágenes con URL dinámicas; no afecta a las imágenes estáticas exportadas por Emailify ni a las imágenes en plataformas MJML.

Recortar el contenido de texto personalizado largo ​

Añadir etiquetas de contenido dinámico de texto largas a tus diseños de email puede afectar a veces al diseño, porque aumenta artificialmente la altura de ciertos elementos, imágenes de fondo, etc., cuando el contenido final (que acaba sustituyendo a las etiquetas de contenido dinámico de marcador de posición) del email enviado puede ser más corto que la propia etiqueta de contenido dinámico.

Para evitarlo, puedes hacer que tu capa de texto de Figma se recorte en el número máximo de líneas que indiques, siguiendo estos pasos:

  1. Haz clic en tu capa de texto en el diseño del frame de Emailify en Figma
  2. Define el valor del ajuste de tamaño del texto de la capa de texto como Auto width
  3. Abre el panel Type settings (haciendo clic en el icono ...)
  4. Define la opción Truncate text como Truncate enabled
  5. Define la propiedad Max lines (debajo) con el número máximo de líneas que puede ocupar el texto
  6. Define el valor de la propiedad Horizontal resizing de Auto layout de la capa de texto como Fill container

Esto solo aplica el recorte en tu lienzo de Figma, para que el valor completo del texto dinámico no ocupe más altura de la cuenta; la exportación HTML final no incluye ningún tipo de recorte, ya que el texto dinámico se sustituye automáticamente por el contenido real cuando el email final se envía a tu audiencia desde la plataforma de email marketing para la que usas las etiquetas de contenido dinámico.

Mantener los botones estrechos con textos de marcador de posición largos ​

Si un botón contiene una variable o un marcador de posición largo que después se sustituirá por una fecha o una etiqueta más corta, ajusta el tamaño de su capa de texto a la etiqueta final. Si no, el marcador de posición puede hacer que el botón exportado sea demasiado ancho, y Outlook puede mantener ese ancho incluso después de que tu plataforma de email sustituya el marcador de posición.

  1. Selecciona la capa de texto dentro del botón en Figma.
  2. Define el Horizontal resizing de esa capa de texto como Fixed width y elige un ancho en el que quepa la fecha o etiqueta final que esperas.
  3. Abre Type settings, activa Truncate text y define Max lines como 1.
  4. Mantén la variable o el marcador de posición completo en la capa de texto y vuelve a exportar el email.
  5. Envía una prueba desde tu plataforma de email para comprobar el botón con el texto final sustituido, también en Outlook si te afecta.

El recorte solo cambia cómo se ve el marcador de posición en el lienzo de Figma. El marcador de posición completo se mantiene en el HTML exportado para que tu plataforma de email lo sustituya. Deja ancho suficiente para la etiqueta final más larga que vayas a enviar.

Añadir variables dinámicas de color y de familia tipográfica ​

Variables dinámicas de color ​

Si quieres que cualquier color de fondo, de texto o de trazo de tus diseños de email se renderice como un fragmento de código dinámico (por ejemplo, {{ primary_color }}) en lugar de su valor hexadecimal normal del color de Figma (por ejemplo, #000000), crea un estilo de color de Figma y asegúrate de que el Name del estilo de color contenga dobles llaves (por ejemplo, {{ my_color_var_name }}). Ese valor de Name del estilo de color se usará automáticamente como valor CSS de color, background-color o border-color cuando el plugin Emailify genere el HTML.

Variables dinámicas de familia tipográfica ​

Del mismo modo, si quieres que cualquier valor CSS de font-family se renderice como un fragmento de código dinámico (por ejemplo, {{ customer.font_family }}) en lugar de su valor de fuente normal de Figma (por ejemplo, Arial, sans-serif), crea un estilo de texto de Figma y asegúrate de que el Name del estilo de texto contenga dobles llaves (por ejemplo, {{ my_font_var_name }}). Ese valor de Name del estilo se usará automáticamente como valor CSS de font-family cuando el plugin Emailify genere el HTML.

Repetir una Data Table Row con datos dinámicos ​

Para recorrer los datos de tu plataforma de email, selecciona una Data Table Row y abre Settings. Añade la sintaxis del bucle en Opening Code Wrapper (por ejemplo, {% for product in collection.products %}) y en Closing Code Wrapper (por ejemplo, {% endfor %}). Emailify inserta las etiquetas alrededor del elemento <tr></tr> de esa fila en el HTML exportado.

Cuando hayas añadido las etiquetas envolventes a la capa Data Table Row, puedes rellenar el contenido dinámico dentro de las capas de la fila según necesites.

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.