Tutorial en vídeo: añadir GIF animados de Figma a exportaciones de email HTML
Este vídeo explica cómo añadir GIF animados a tus diseños de email y exportar desde Figma emails HTML responsive y listos para producción con el plugin Emailify.
Para subir imágenes GIF animadas necesitas una licencia de Emailify Pro.
Si usas la versión de prueba gratis del plugin, los GIF se subirán como imágenes estáticas. También puedes usar la opción Export HTML con el interruptor Upload desactivado para exportar y descargar en local los archivos .gif animados junto con tus emails HTML.
Añadir un GIF animado como imagen de contenido dentro de tus capas Column
Puedes arrastrar un archivo .gif desde tu ordenador a cualquier capa Column, y se añadirá como una capa de contenido de imagen de Figma.
Para que tu GIF mantenga una calidad alta, cambia el tamaño de la capa de forma proporcional (manteniendo pulsada la tecla Shift mientras redimensionas la capa de Figma) para conservar la relación de aspecto original. Así, Emailify podrá usar los datos del archivo GIF original en tus exportaciones.
Si cambias la relación de aspecto de tu capa de Figma para que sea distinta de la del GIF original, Emailify tendrá que volver a crear los fotogramas del GIF en un archivo .gif totalmente nuevo para ajustarse al área recortada de la imagen (porque los clientes de email HTML no admiten el recorte con CSS). Esto genera archivos GIF más pesados y exportaciones más lentas.
¿Por qué el GIF exportado pesa más que el GIF original?
Si cambias la relación de aspecto de la capa del GIF en Figma, Emailify tiene que volver a crear los fotogramas del GIF en un archivo .gif nuevo para que el email exportado coincida con el área recortada de la imagen. Los clientes de email HTML no admiten el recorte con CSS de los GIF de la misma forma en que Figma los previsualiza, así que volver a crear los fotogramas puede aumentar el tamaño final del archivo y ralentizar la exportación.
Para que el GIF exportado tenga un tamaño más parecido al del archivo original, cambia el tamaño del GIF de forma proporcional y conserva la relación de aspecto original.
Puedes definir el atributo de texto alternativo o añadir un enlace URL en el que se puede hacer clic a tus imágenes con el botón Settings de la cabecera del plugin.
Emailify intentará detectar automáticamente si tu GIF tiene un fondo transparente. Si tu GIF necesita transparencia y el plugin no lo detecta por sí solo, añade la palabra Transparent en cualquier parte del nombre de tu capa de Figma (por ejemplo, My Layer Name - Transparent) para forzar que se exporte con el fondo transparente activado.
El formato de archivo GIF admite una opacidad del 0 % o del 100 %, pero nada intermedio. Esto significa que puedes tener un GIF animado con un fondo totalmente transparente detrás de elementos totalmente opacos y visibles. Por tanto, las capas tienen que ser totalmente transparentes o no serlo: las capas con una opacidad inferior al 50 % serán transparentes, y las capas con una opacidad superior al 50 % serán opacas.
Añadir un GIF animado como imagen de fondo en una capa Row, Hero o Wrapper
Si necesitas usar un GIF animado como imagen de fondo detrás de contenido de texto enriquecido real, puedes arrastrar un archivo .gif desde tu ordenador al relleno de Figma de cualquier frame Row, Hero o Wrapper, y se aplicará como relleno de imagen en el fondo del frame. Cualquier otro relleno de Figma de este frame (por ejemplo, superposiciones de color o degradado) también se incluirá en la exportación .gif final.
La ventaja es que las capas de contenido que hay dentro del frame se seguirán renderizando como capas de contenido enriquecido individuales en tu exportación de email HTML, encima del fondo GIF animado.
Emailify intentará detectar automáticamente si tu GIF tiene un fondo transparente. Si tu GIF necesita transparencia y el plugin no lo detecta por sí solo, añade la palabra Transparent en cualquier parte del nombre de tu capa de Figma (por ejemplo, My Layer Name - Transparent) para forzar que se exporte con el fondo transparente activado.
El formato de archivo GIF admite una opacidad del 0 % o del 100 %, pero nada intermedio. Esto significa que puedes tener un GIF animado con un fondo totalmente transparente detrás de elementos totalmente opacos y visibles. Por tanto, las capas tienen que ser totalmente transparentes o no serlo: las capas con una opacidad inferior al 50 % serán transparentes, y las capas con una opacidad superior al 50 % serán opacas.
GIF animados en Outlook: aunque la mayoría de los clientes de email admiten GIF animados, Outlook 2019 y versiones anteriores solo muestra el primer fotograma de un GIF en lugar de reproducir la animación. Asegúrate de que ese fotograma incluya las imágenes o el texto clave para que siga funcionando como alternativa estática. En Outlook con Office 365, los GIF se reproducen automáticamente tres veces y después se detienen con un botón de reproducción para volver a verlos.