A aba Import da janela New Email permite começar com o código de um e-mail existente em vez de montar cada Row e Column do zero. Cole o HTML ou MJML, ou escolha um arquivo, e revise o código-fonte antes de criar um frame editável do Emailify.

A importação é experimental e, no momento, está disponível em builds de desenvolvimento ativadas localmente. Ela fica oculta na build padrão do plugin. As etapas abaixo se aplicam quando a sua janela New Email inclui Import.

Fontes compatíveis

• HTML: cole o HTML do e-mail ou escolha um arquivo .html ou .htm.
• MJML XML: cole um documento <mjml> completo ou escolha um arquivo .mjml ou .xml.
• MJML JSON: cole uma árvore de componentes MJML padrão ou escolha um arquivo .json.
• Pacotes de e-mail copiados: cole um pacote da extensão experimental Copy to Emailify.

Mantenha o conteúdo importado abaixo de 2 MB. O MJML também precisa compilar para HTML dentro desse limite. Mensagens .eml, arquivos ZIP e JSON arbitrário não são compatíveis. No caso de uma mensagem .eml, extraia o corpo HTML e deixe as imagens acessíveis antes de importar.

Use URLs de imagem acessíveis. Imagens que exigem login, arquivos locais e referências a anexos, como cid:, podem precisar ser substituídas por imagens hospedadas.

Procurando um e-mail para testar? Acesse o Really Good Emails, abra um e-mail e selecione Code para ver o código-fonte HTML. Copie o HTML, cole no campo Email code da aba Import do Emailify e clique em Preview Import para revisá-lo antes de criar o e-mail.

Importar um e-mail

1. Abra o Emailify no Figma.
2. Clique no ícone + ao lado do seletor de e-mails para abrir a janela New Email.
3. Selecione Import, no final da fileira de abas.
4. Cole o código do e-mail em Email code e clique em Preview Import. Se preferir, clique em Choose file para carregar e analisar um arquivo compatível.
5. Revise a Preview e as Notes, se houver. Confira se o código-fonte tem os textos, as imagens e os fundos que você espera.
6. Digite um Email name e clique em Create Email.
7. Examine o frame do Emailify criado e as camadas editáveis dele.
8. Use a pré-visualização HTML do Emailify para conferir o resultado gerado para desktop e celular antes de exportar.

O painel Import pré-visualiza o e-mail de origem. Ele não mostra o HTML final exportado a partir das camadas reconstruídas do Emailify. Sempre confira separadamente o frame criado e a pré-visualização gerada pelo Emailify.

Editar o código-fonte apaga a preparação da importação anterior. Clique em Preview Import de novo antes de criar o e-mail atualizado.

Importar MJML

Forneça um documento MJML completo com um único mj-body. Por exemplo:

<mjml>
  <mj-body width="600px">
    <mj-section>
      <mj-column>
        <mj-text>Hello from Emailify</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

O JSON equivalente usa tagName, attributes, children e content:

{
  "tagName": "mjml",
  "children": [{
    "tagName": "mj-body",
    "attributes": { "width": "600px" },
    "children": [{
      "tagName": "mj-section",
      "children": [{
        "tagName": "mj-column",
        "children": [{ "tagName": "mj-text", "content": "Hello from Emailify" }]
      }]
    }]
  }]
}

O Emailify valida o MJML com o MJML4, converte-o em HTML e depois reconstrói camadas editáveis a partir desse HTML. Não se trata de uma restauração direta da árvore de componentes MJML original. Revise o CSS personalizado, as fontes, o espaçamento e o comportamento responsivo depois da importação.

• Insira diretamente o conteúdo de mj-include antes de importar; arquivos incluídos não são carregados.
• Substitua mj-raw por componentes MJML editáveis ou importe o HTML gerado por ele para revisão.
• Use uma versão estática dos acordeões e carrosséis do MJML; componentes interativos não são compatíveis com a importação editável.
• Remova as declarações XML de DOCTYPE e de entidades. Corrija estruturas ou atributos de componentes inválidos antes de tentar de novo.

Conferir o resultado

Compare o e-mail criado com o de origem no desktop e em uma largura estreita de celular, como 375px. Confira todos os textos, imagens, imagens de fundo, botões e destinos dos links, e depois examine o empilhamento das colunas, as quebras e o padding.

A importação tenta mapear o código-fonte para a estrutura de layout compatível com o Emailify. Aninhamentos complexos, CSS personalizado e imagens indisponíveis podem exigir ajustes manuais. Uma preparação bem-sucedida do código-fonte não garante uma correspondência visual exata nem o comportamento na entrega em todos os clientes de e-mail.

Se a preparação falhar, abra Notes para ver o problema relatado. Corrija o código-fonte ou substitua as imagens inacessíveis e pré-visualize de novo. Se o layout criado precisar de ajustes, use Rows, Columns e as configurações responsivas, e depois siga o guia de testes de e-mail.