Ao clicar no botão Preview no cabeçalho do plugin Emailify, uma pré-visualização em HTML real do seu e-mail é gerada automaticamente, direto dentro do plugin no Figma.
Enquanto a janela de pré-visualização estiver aberta, as alterações que você fizer nas camadas do Emailify no Figma aparecem em tempo real na pré-visualização HTML.
Usar as abas do painel de pré-visualização
O painel de pré-visualização tem quatro abas:
- HTML Preview mostra o HTML responsivo atual, é atualizada conforme você edita as camadas do Figma e inclui uma opção simples para pré-visualizar o modo escuro.
- Preflight verifica no HTML de produção problemas práticos de assunto, preheader, acessibilidade, links, imagens, entrega e corte do Gmail.
- Test Send prepara o HTML de produção para você copiá-lo no htmltest.email e fazer um teste manual na caixa de entrada.
- Email Previews solicita capturas de tela de clientes de e-mail de dentro do Emailify. Veja Usar o Email Previews no plugin.
O Preflight e o Test Send usam o acesso do Emailify ao HTML de produção, por isso ficam disponíveis com uma licença Pro ativa ou enquanto ainda houver testes Pro grátis. Veja Testar seus e-mails HTML antes de enviar para conhecer as opções de teste em clientes de e-mail.
Os GIFs aparecem como imagens estáticas no modo de pré-visualização para acelerar o carregamento (porque os GIFs demoram mais para renderizar), mas ficam animados nas exportações HTML finais do plugin.
Você pode editar qualquer ajuste para celular com a janela de pré-visualização aberta, clicando no botão Settings no cabeçalho do painel de pré-visualização.
Pré-visualizar seu e-mail em diferentes larguras de dispositivo
Para ver como ele fica em diferentes larguras de dispositivo, clique na caixa de seleção no cabeçalho do painel de pré-visualização e escolha uma das opções abaixo:
- Desktop & Mobile (visualização híbrida)
- Desktop (726px de largura)
- iPhone 17 Pro Max (440px de largura)
- iPhone 16 Pro Max (430px de largura)
- iPhone Air (420px de largura)
- Google Pixel (412px de largura)
- iPhone 17 (402px de largura)
- iPhone 16 (393px de largura)
- iPhone 13 Mini (375px de largura)
- iPhone 12 Mini (360px de largura)
- iPhone SE (320px de largura)
Breakpoint de celular dos e-mails. Os e-mails HTML exportados pelo Emailify têm um único “breakpoint”, definido automaticamente pela largura do frame de desktop no Figma. Por exemplo, se o seu frame do Emailify tem 600px, os estilos e ajustes para celular passam a aparecer a partir de 599px para baixo.
Em geral, recomenda-se manter a largura do e-mail entre 600px e 640px, porque os painéis de leitura de alguns clientes ou apps de e-mail podem ter menos de 700px de largura e acabar renderizando os estilos de celular em vez do layout de desktop.
Ver na janela de pré-visualização HTML as alterações feitas no Figma
Com a pré-visualização HTML aberta, você pode continuar editando suas camadas do Figma e ver essas alterações na mesma hora na janela de pré-visualização, sem precisar clicar em Refresh toda vez.
Pré-visualizar o modo escuro
Ative Dark Mode na barra de ferramentas do HTML Preview para comparar o e-mail atual com a pré-visualização local aproximada do modo escuro do Emailify. A pré-visualização usa um tratamento automático de cores genérico, e não as cores de um cliente de e-mail específico. Você pode continuar usando o seletor de largura para conferir o mesmo design no modo escuro em larguras de desktop ou de celular. O Dark Mode não fica disponível enquanto a visualização híbrida Desktop & Mobile estiver selecionada.
Se o e-mail tiver ajustes de modo escuro do Emailify, use a opção Overrides ao lado para mostrar ou ocultar os estilos explícitos de fundo, texto, borda e troca de imagens.
Essa opção é uma ajuda para o design, não um emulador de cliente ou de dispositivo. Os clientes de e-mail aplicam as próprias transformações de modo escuro, e a pré-visualização local não reproduz os sanitizadores autenticados, os mecanismos de renderização e as fontes nativas, a interface dos apps, o processamento na entrega nem todas as diferenças entre clientes e versões.
O suporte a estilos de ajuste para o modo escuro nos clientes de e-mail é limitado. Os ajustes explícitos do Emailify foram pensados para as versões compatíveis do Apple Mail; o Gmail, o Outlook, o Windows Mail, o Yahoo e outros clientes podem aplicar um comportamento automático de cores diferente.
Verificar o tamanho do arquivo do seu e-mail HTML em kilobytes (kb)
No cabeçalho do painel de pré-visualização, você verá um número que representa o tamanho total do arquivo HTML do seu e-mail (apenas o próprio .html, sem contar as imagens). Isso ajuda a saber se você passou do limite de corte de 102kb do Gmail.
Se o seu HTML passar de 102kb, o tamanho do arquivo na janela de pré-visualização fica destacado em amarelo, como um sinal visual de que o seu e-mail ultrapassou esse limite.
Reduzir ou consolidar o número de camadas “Row” no seu e-mail é a melhor forma de diminuir o tamanho do arquivo HTML.
Pré-visualizar as fontes alternativas seguras para a web no seu e-mail
Se você definiu fontes alternativas seguras para a web para as fontes web personalizadas do seu e-mail, pode pré-visualizar como elas vão ficar ativando a opção Show Fallback Fonts na parte de baixo da janela de pré-visualização do Emailify.
Verificação (e correção automática) do Auto Layout nas camadas do Emailify
Ao pré-visualizar o HTML com o recurso Preview do plugin, ele detecta automaticamente se as camadas adicionadas pelo plugin Emailify ainda têm as propriedades de Auto Layout corretas do Figma, para garantir uma exportação HTML visualmente consistente.
Ele mostra uma lista das camadas cujas propriedades de Auto Layout precisam de ajustes (por exemplo, mudar a altura de “Fixed” para “Hug”). Se quiser, você pode aplicar essas alterações automaticamente clicando no botão Apply Fixes, que atualiza as camadas do Figma sinalizadas com os ajustes necessários nas propriedades de Auto Layout.
Mover e corrigir manualmente camadas do Emailify que estão no lugar errado
Ao pré-visualizar o HTML com o recurso Preview do plugin, ele detecta automaticamente se as camadas adicionadas pelo plugin Emailify ainda estão na estrutura em que foram criadas (por exemplo, camada Row -> camadas Column -> camadas de conteúdo), para garantir uma exportação HTML visualmente consistente.
Ele mostra uma lista das camadas que precisam ser movidas manualmente, com instruções para cada item (por exemplo, “Mova esta camada Row de volta para o frame principal do Email”), e um botão para ir direto até a camada na sua página e na lista de camadas do Figma, o que facilita encontrá-la e movê-la como necessário.
Você pode aplicar configurações em massa abrindo Settings e selecionando no Figma várias camadas do Emailify do mesmo tipo. Qualquer configuração que você alterar será aplicada a todas as camadas selecionadas.