--- url: "/pt/emailify/design/preview.md" description: "A janela de pré-visualização do Emailify permite ver e interagir com o seu e-mail em HTML real antes de exportá-lo." --- # Pré-visualizar seu e-mail HTML no Figma > A janela de pré-visualização do Emailify permite ver e interagir com o seu e-mail em HTML real antes de exportá-lo. [Video](/assets/videos/emailify/design/preview-email.mp4) 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 {#using-the-preview-panel-tabs} 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](https://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](/pt/emailify/export/testing#using-email-previews-in-the-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](/pt/emailify/export/testing) para conhecer as opções de teste em clientes de e-mail. > **Info:** 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. > **Tip:** 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 {#previewing-your-email-at-different-device-widths} 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) > **Note:** **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. > **Tip:** 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 {#live-preview-changes-in-html-preview-window-from-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. [Video](/assets/videos/emailify/design/live-preview-edits-desktop.mp4) ## Pré-visualizar o modo escuro {#previewing-dark-mode} 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. > **Warning:** 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. > **Warning:** O [suporte a estilos de ajuste para o modo escuro](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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) {#checking-the-file-size-of-your-html-email-in-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](https://mailchimp.com/help/gmail-is-clipping-my-email/). > **Warning:** **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. > **Tip:** [Reduzir ou consolidar o número de camadas “Row” no seu e-mail](/pt/emailify/design/optimizing-html-file-size) é a melhor forma de diminuir o tamanho do arquivo HTML. ## Pré-visualizar as fontes alternativas seguras para a web no seu e-mail {#previewing-web-safe-font-fallbacks-in-your-email} [Video](/assets/videos/emailify/design/preview-font-fallbacks.mp4) Se você definiu [fontes alternativas](/pt/emailify/design/fonts) 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 {#auto-layout-linting-and-auto-fixing-for-emailify-layers} [Video](/assets/videos/emailify/design/linter-auto-fix.mp4) 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 {#manually-moving-and-resolving-emailify-layers-that-are-in-the-wrong-place} [Video](/assets/videos/emailify/design/manual-move-layers.mp4) 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. > **Tip:** Você pode [aplicar configurações em massa](/pt/emailify/design/settings#apply-settings-in-bulk) 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.