---
url: "/pt/emailify/design/import.md"
description: "Use a aba experimental Import do Emailify para transformar HTML ou MJML existente em camadas de e-mail editáveis no Figma."
---

# Importar e-mails em HTML e MJML

> Use a aba experimental Import do Emailify para transformar HTML ou MJML existente em camadas de e-mail editáveis no Figma.

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.

> **Note:** 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 {#supported-sources}

- **HTML:** cole o HTML do e-mail ou escolha um arquivo `.html` ou `.htm`.
- **MJML XML:** cole um documento `` 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.

> **Tip:** Procurando um e-mail para testar? Acesse o [Really Good Emails](https://reallygoodemails.com/), 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 {#import-an-email}

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](/pt/emailify/design/preview) para conferir o resultado gerado para desktop e celular antes de exportar.

> **Warning:** 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 {#import-mjml}

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

```xml

        Hello from Emailify

```

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

```json
{
  "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 {#check-the-result}

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](/pt/emailify/design/rows), [Columns](/pt/emailify/design/columns) e as [configurações responsivas](/pt/emailify/design/responsive), e depois siga o [guia de testes de e-mail](/pt/emailify/export/testing).