Emailify no es compatible con diseños de email de Figma creados fuera del plugin.

Información general de Emailify

Emailify te ayuda a diseñar emails en Figma con un conjunto de componentes iniciales habituales cuyo contenido, estilos y marca puedes personalizar con las herramientas de diseño normales de Figma. Después, aplicas estilos responsive y exportas los emails a HTML listo para producción.

Lo que sí hace Emailify...

• Te ofrece componentes iniciales y herramientas de diseño para crear diseños de email.
• Te permite personalizar con Figma cualquier contenido de texto o imagen, los estilos visuales y los enlaces.
• Exporta a HTML listo para producción tus emails (diseñados con el plugin Emailify).
• Se integra con plataformas de email marketing para subir plantillas HTML mediante API.

Lo que no hace Emailify...

• Convertir automáticamente diseños de email que se han diseñado a mano en Figma sin usar el plugin Emailify (si tienes un diseño así, tendrás que volver a crearlo con las herramientas de diseño del plugin Emailify para exportarlo a HTML).
• Ofrecer soluciones especiales para suplir la falta de compatibilidad de los clientes de email con ciertas propiedades HTML/CSS que solo admiten algunos clientes (por ejemplo, sobrescribir los estilos del modo oscuro en Gmail u Outlook, o mostrar fuentes personalizadas en clientes que no sean Apple Mail).

¿En qué se diferencia Emailify de otros plugins de Figma para email?

A diferencia de otros plugins de Figma que intentan ayudarte a exportar emails de Figma a HTML, Emailify no intenta coger automáticamente cualquier archivo diseñado a mano en Figma y convertirlo por arte de magia en código HTML que puedas enviar por email.

El problema de otros plugins de Figma que convierten diseños de email a HTML

El problema de fondo de intentar convertir a HTML cualquier maqueta de email diseñada a mano en Figma es que no existe el concepto de intención.

El ejemplo más sencillo sería imaginar qué pretende ser (para quien lo diseñó) una capa "Frame" de Figma que contiene dentro una capa "Rectangle" y una capa "Text":

• ¿un botón en el que se puede hacer clic?
• ¿una sola imagen estática (con algo de texto incrustado)?
• ¿un bloque hero con una imagen de fondo y texto enriquecido encima?
• ¿un enlace con un icono social?

Aunque un plugin de Figma pudiera determinar correctamente la intención de esas 3 capas, eso aún no incluye ninguna intención sobre cómo debe verse ese elemento en móvil, si debe enlazar a algún sitio al hacer clic o si tiene otros atributos (como el texto alt), etc.

El ejemplo anterior ya es bastante complicado, y eso siendo generosos y planteando el caso más sencillo: entender la intención de 3 capas de Figma. A partir de ahí, la complejidad solo aumenta.

Teniendo en cuenta que una maqueta de email real en Figma puede contener miles de capas, posiblemente anidadas dentro de decenas (o cientos) de otras capas "frame" o "group" que tampoco dan ninguna información sobre cómo deberían renderizarse en HTML, se vuelve casi imposible obtener el HTML que necesitas a partir del diseño que has creado en Figma (cientos de rectángulos, frames, grupos y capas de texto sin estructura).

Como los emails HTML ya son muy difíciles de renderizar de forma coherente en todos los clientes de email, creemos que es demasiado arriesgado intentar deducir la intención del diseñador a partir de un número infinito de posibles estructuras de capas de Figma, con cada diseñador haciendo las cosas a su manera.

Cómo resuelve Emailify el problema de la "intención"

Para resolver el problema de la intención, Emailify adopta un enfoque más guiado, "sobre raíles", para diseñar emails: te ayuda a crear capas especiales en Figma que se corresponden directamente con elementos HTML reales al exportar el código. Así, el plugin entiende exactamente qué pretende ser cada elemento de tu email (por ejemplo, un "Button" es un botón, una "Column" es una columna, etc.).

Por ejemplo, al añadir una capa Button a tu diseño de email de Figma con el plugin Emailify, se crea una capa nueva con unos datos especiales que le indican a Emailify que es un botón, y no solo una capa rectangular que puede (o no) pretender ser un "botón".

Con estas herramientas de diseño, puedes crear rápidamente diseños y elementos de contenido que Emailify entiende y que después puede exportar automáticamente a HTML de forma fiable.

¿Qué tipo de diseños puedes crear con Emailify y Figma?

Emailify ofrece un montón de herramientas para ayudarte a crear diseños cuyo contenido y estilos puedes personalizar con Figma, y para los que también puedes definir un diseño responsive.

Combinando las herramientas que ofrece el plugin con Figma para los estilos y el contenido, puedes crear un diseño de email totalmente personalizado y fiel a tu marca.

Si buscas inspiración, echa un vistazo a estas plantillas de Figma gratis compatibles con Emailify (diseñadas íntegramente con Emailify en Figma) para ver cómo personalizar emails con tu propia marca.

Cada plantilla de Figma incluye además, en la descripción de su página de Figma, un enlace a un tutorial en vídeo completo, paso a paso, que sirve de contexto y referencia sobre cómo se creó. También puedes ver la lista de reproducción completa de YouTube con todas las plantillas de Figma.

La estructura de capas de Figma en los diseños de Emailify

Cuando creas diseños para tus emails con las herramientas de diseño de Emailify, es decir, los componentes iniciales y Quick Add Element (el desplegable de la parte inferior del plugin), el plugin crea automáticamente las estructuras de capas necesarias.

Es muy importante que mantengas esta estructura básica de capas y que no hagas cosas como anidar estas capas generadas dentro de otros frames o grupos de Figma que hayas añadido a mano. Si lo haces, el plugin se confundirá y tratará esos bloques como capas ajenas (que se renderizan como imágenes estáticas en lugar de como texto enriquecido o contenido HTML).

Ejemplo de estructura de capas de Emailify

Para que veas rápidamente cómo es, en la captura de abajo hay un conjunto de capas de Figma que el plugin Emailify ha creado automáticamente.

Verás que la estructura de capas es muy coherente: el frame principal del email que añade Emailify puede contener directamente una o varias capas "Row"; cada una de ellas puede tener dentro una o varias capas "Column", y cada capa "Column" puede contener una o varias capas de "contenido" (por ejemplo, texto, imágenes, botones, etc.).

Ejemplo básico de la estructura de capas de Emailify

• ✉️ Email
  • 🦸 Hero
    • ✍️ Text
    • ✍️ Text
    • 🔗 Button
      • ✍️ Button Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
    • 🏛️ Column
      • ✍️ Text
      • ✍️ Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
    • 🏛️ Column
      • 🪑 Data Table
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • 📷 Vector Icon
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • 📷 Vector Icon
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
      • ✍️ Text
      • 🐦 Social
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
      • 🍔 Navigation
        • 🔗 Nav Link
          • ✍️ Nav Link Text
        • 🔗 Nav Link
          • ✍️ Nav Link Text
  • 🚣 Row
    • 🏛️ Column
      • 🪑 Data Table
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
  • 🎁 Wrapper (For Multiple Rows)
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text

Tipos de capas de Emailify que puedes usar

Para saber más sobre cada tipo de capa, puedes leer sobre cada uno de los elementos de estructura y elementos de diseño en la documentación de Emailify.

Insistimos: es muy importante mantener esta estructura, porque si mueves estas capas y alteras su orden, el HTML no se renderizará como esperas (por ejemplo, no puedes poner una "Row" dentro de otra "Row", ni una capa "Text" directamente dentro de un frame "Email", ni una "Row" dentro de una "Column", etc.).

La forma más sencilla de asegurarte de que añades la estructura correcta es añadir componentes iniciales desde el plugin Emailify y personalizar el contenido y los estilos según necesites, sin cambiar a fondo la estructura de tus capas de diseño.

Personalizar tus capas en Figma

Tutorial en vídeo: diseñar y exportar emails de Figma a HTML

En este vídeo verás cómo diseñar y exportar desde Figma emails HTML responsive y listos para producción con el plugin Emailify.

Cuando añades cualquier componente de Emailify a tu email, se renderiza en el lienzo de Figma, donde puedes trabajar con las capas como lo harías normalmente (como si las hubieras añadido tú a mano).

Por ejemplo, en una capa de texto puedes cambiar el contenido, el tamaño de fuente, el interlineado, el espaciado entre letras, el espaciado entre párrafos y la alineación horizontal desde el panel de ajustes normal de Figma.

Emailify renderiza a propósito elementos muy básicos para que puedas personalizar las imágenes, el texto y los valores de diseño según tu marca y tu guía de estilo.

Reutilizar componentes como instancias de Figma. Cuando hayas personalizado un componente, puedes reutilizarlo varias veces como instancia de Figma, o incluso en otros diseños de email en el futuro.

Los componentes de contenido de Emailify usan el Auto Layout de Figma. Los componentes que incluye Emailify usan Auto Layout, así que es muy fácil ajustar valores de diseño como el padding y el espacio entre columnas o elementos.

Próximos pasos

• Sigue la guía de primeros pasos con Emailify para crear tu primer email.
• Aprende a alinear el contenido en los diseños de Emailify y, después, añade estilos de email responsive.
• Descubre el plugin Emailify para Figma, con exportaciones HTML listas para producción e integraciones con plataformas.