Vídeo tutorial: adicione GIFs animados do Figma às exportações de e-mail HTML
Este vídeo mostra como adicionar GIFs animados aos seus designs de e-mail e exportar do Figma e-mails HTML responsivos e prontos para produção com o plugin Emailify.
Fazer upload de imagens GIF animadas exige uma licença Emailify Pro.
Se você estiver usando a versão de teste grátis do plugin, os GIFs serão enviados como imagens estáticas. Outra opção é usar Export HTML com o botão Upload em off para exportar e baixar localmente os arquivos .gif animados junto com os seus e-mails HTML.
Adicionar um GIF animado como imagem de conteúdo dentro das camadas Column
Você pode arrastar e soltar um arquivo .gif do seu computador em qualquer camada Column, e ele será adicionado como uma camada de conteúdo de imagem do Figma.
Para manter a qualidade do GIF, redimensione a camada proporcionalmente (segurando a tecla Shift enquanto redimensiona a camada no Figma) para preservar a proporção original. Assim, o Emailify consegue usar os dados do arquivo GIF original nas exportações.
Se você mudar a proporção da camada no Figma para algo diferente do GIF original, o Emailify precisará recriar os frames do GIF em um arquivo .gif totalmente novo para refletir a área cortada da imagem (já que os clientes de e-mail HTML não são compatíveis com corte via CSS). Isso gera arquivos GIF maiores e exportações mais lentas.
Por que o GIF exportado é maior que o GIF original?
Se você mudar a proporção da camada do GIF no Figma, o Emailify precisa recriar os frames do GIF em um novo arquivo .gif para que o e-mail exportado corresponda à área cortada da imagem. Os clientes de e-mail HTML não são compatíveis com corte via CSS em GIFs da mesma forma que as pré-visualizações do Figma, então recriar os frames pode aumentar o tamanho final do arquivo e deixar a exportação mais lenta.
Para manter o GIF exportado mais próximo do tamanho do arquivo original, redimensione o GIF proporcionalmente e mantenha a proporção original.
Você pode definir o atributo de texto alternativo ou adicionar um link de URL clicável às suas imagens usando o botão Settings no cabeçalho do plugin.
O Emailify tenta detectar automaticamente se o seu GIF tem fundo transparente. Se o seu GIF precisar de transparência e o plugin não detectar isso sozinho, adicione a palavra Transparent em qualquer parte do nome da camada no Figma (por exemplo, My Layer Name - Transparent) para forçar a exportação com fundo transparente.
O formato GIF só aceita 0% ou 100% de opacidade, sem nada entre os dois. Isso significa que você pode ter um GIF animado com fundo totalmente transparente atrás de elementos totalmente opacos e visíveis. Ou seja, as camadas precisam ser totalmente transparentes ou não: qualquer camada com opacidade abaixo de 50% fica transparente, e qualquer camada com opacidade acima de 50% fica opaca.
Adicionar um GIF animado como imagem de fundo em uma camada Row, Hero ou Wrapper
Se você precisar usar um GIF animado como imagem de fundo atrás de conteúdo em rich text real, arraste um arquivo .gif do seu computador para o preenchimento do Figma de qualquer frame Row, Hero ou Wrapper. Ele será definido como preenchimento de imagem no fundo do frame. Os outros preenchimentos do Figma desse frame (por exemplo, sobreposições de cor ou gradiente) também serão incluídos na exportação final do .gif.
A vantagem é que as camadas de conteúdo dentro do frame continuam sendo renderizadas como camadas de rich content individuais na exportação do seu e-mail HTML, por cima do fundo com GIF animado.
O Emailify tenta detectar automaticamente se o seu GIF tem fundo transparente. Se o seu GIF precisar de transparência e o plugin não detectar isso sozinho, adicione a palavra Transparent em qualquer parte do nome da camada no Figma (por exemplo, My Layer Name - Transparent) para forçar a exportação com fundo transparente.
O formato GIF só aceita 0% ou 100% de opacidade, sem nada entre os dois. Isso significa que você pode ter um GIF animado com fundo totalmente transparente atrás de elementos totalmente opacos e visíveis. Ou seja, as camadas precisam ser totalmente transparentes ou não: qualquer camada com opacidade abaixo de 50% fica transparente, e qualquer camada com opacidade acima de 50% fica opaca.
GIFs animados no Outlook: embora a maioria dos clientes de e-mail seja compatível com GIFs animados, o Outlook 2019 e versões anteriores só exibe o primeiro frame do GIF, em vez de reproduzir a animação. Garanta que esse frame tenha as imagens ou o texto principais para que ele funcione como alternativa estática. No Outlook com Office 365, os GIFs são reproduzidos automaticamente três vezes e depois pausam, com um botão de play para repetir.