O Emailify não é compatível com designs de e-mail do Figma criados fora do plugin.

Visão geral do Emailify

O Emailify ajuda você a criar e-mails no Figma com um conjunto de componentes iniciais comuns, cujo conteúdo, estilos e identidade visual você personaliza com as ferramentas de design normais do Figma. Depois, você aplica estilos responsivos e exporta os e-mails em HTML pronto para produção.

O Emailify faz...

• Oferece componentes iniciais e ferramentas de design para criar layouts de e-mail.
• Permite personalizar no Figma qualquer conteúdo de texto ou imagem, os estilos visuais e os links.
• Exporta seus e-mails (criados com o plugin Emailify) em HTML pronto para produção.
• Integra-se a plataformas de e-mail marketing para fazer upload de templates HTML via API.

O Emailify não...

• Converte automaticamente designs de e-mail feitos manualmente no Figma sem o plugin Emailify (se você tiver um design assim, vai precisar recriá-lo com as ferramentas de design do plugin Emailify para exportá-lo em HTML).
• Oferece soluções alternativas especiais para contornar a falta de compatibilidade dos clientes de e-mail com propriedades de HTML/CSS que só funcionam em alguns clientes (por exemplo, ajustar os estilos de modo escuro no Gmail ou no Outlook, ou exibir fontes personalizadas em clientes que não sejam o Apple Mail)

Em que o Emailify é diferente de outros plugins de e-mail para Figma?

Ao contrário de outros plugins para Figma que tentam ajudar a exportar e-mails do Figma em HTML, o Emailify não tenta pegar automaticamente qualquer arquivo criado manualmente no Figma e transformá-lo, como mágica, em código HTML que você pode enviar por e-mail.

O problema de outros plugins para Figma que convertem “design de e-mail em HTML”

O problema fundamental de tentar converter em HTML qualquer mockup de e-mail criado manualmente no Figma é que não existe o conceito de intenção.

O exemplo mais simples disso é imaginar o que um designer quer dizer com uma camada “Frame” no Figma que contém uma camada “Rectangle” e uma camada “Text”:

• um botão clicável?
• uma única imagem estática (com algum texto dentro dela)?
• um bloco hero com uma imagem de fundo e um texto em rich text por cima?
• um link com ícone de rede social?

Mesmo que um plugin para Figma conseguisse identificar corretamente a intenção dessas 3 camadas, isso ainda não diria nada sobre como esse elemento deve aparecer no celular, se ele deve levar a algum lugar quando clicado ou se tem outros atributos (como texto alt) etc.

Embora o exemplo acima já seja complicado o bastante, ele é generoso: trata-se do caso mais simples, entender a intenção de 3 camadas do Figma. A complexidade só aumenta a partir daí.

Um mockup de e-mail real no Figma pode ter milhares de camadas, possivelmente aninhadas em dezenas (ou centenas) de outras camadas “frame” ou “group”, que também não dão nenhuma informação sobre como devem ser exibidas em HTML. Com isso, fica quase impossível obter o HTML de que você precisa a partir do design que você criou no Figma (centenas de retângulos, frames, grupos e camadas de texto sem estrutura).

Como os e-mails HTML já são muito difíceis de exibir de forma visualmente consistente em todos os clientes de e-mail, acreditamos que é arriscado demais tentar deduzir a intenção do designer a partir de um número infinito de estruturas de camadas possíveis no Figma, com cada designer trabalhando de um jeito.

Como o Emailify resolve o problema da “intenção”

Para resolver o problema da intenção, o Emailify adota uma abordagem mais opinativa e “guiada” para criar e-mails: ele ajuda você a criar camadas especiais no Figma que correspondem diretamente a elementos HTML reais quando você exporta o código. Assim, o plugin entende exatamente o que cada elemento do e-mail deve ser (por exemplo, um “Button” é um botão, uma “Column” é uma coluna etc.).

Por exemplo, ao adicionar uma camada Button ao seu design de e-mail no Figma com o plugin Emailify, você cria uma camada nova com alguns dados especiais que dizem ao Emailify que ela é um botão, e não apenas uma camada de retângulo que pode (ou não) ter a intenção de ser um “botão”.

Com essas ferramentas de design, você cria rapidamente layouts e elementos de conteúdo que o Emailify entende e que ele consegue exportar automaticamente em HTML de forma confiável.

Que tipo de design você pode criar com o Emailify e o Figma?

O Emailify oferece várias ferramentas para criar layouts, cujo conteúdo e estilos você personaliza no Figma, e para os quais você também pode definir um design responsivo.

Combinando as ferramentas do plugin com o Figma para os estilos e o conteúdo, você pode criar um design de e-mail totalmente personalizado e alinhado à sua marca.

Para se inspirar, fique à vontade para conferir estes templates do Figma grátis e compatíveis com o Emailify (criados inteiramente com o Emailify no Figma) e ter ideias de como personalizar e-mails com a sua marca.

Cada template do Figma também tem, na descrição da página do Figma, um link para um vídeo tutorial completo com o passo a passo, para mais contexto e referência sobre como ele foi criado. Você também pode ver a playlist completa no YouTube com os vídeos de cada template do Figma.

Entender a estrutura de camadas do Figma nos designs do Emailify

Quando você cria layouts para seus e-mails no Emailify com os componentes iniciais e a ferramenta de design Quick Add Element (o menu suspenso na parte de baixo do plugin), o plugin cria automaticamente as estruturas de camadas necessárias.

É muito importante manter essa estrutura básica de camadas e não fazer coisas como aninhar essas camadas geradas dentro de outros frames ou grupos que você adicionou manualmente no Figma. Caso contrário, o plugin se confunde e trata esses blocos como camadas externas (que são exibidas como imagens estáticas, e não como conteúdo em rich text/HTML).

Exemplo de estrutura de camadas do Emailify

Para mostrar rapidamente como isso fica, a captura de tela abaixo mostra um conjunto de camadas do Figma criadas automaticamente pelo plugin Emailify.

Repare que a estrutura de camadas é bem consistente: o frame pai do e-mail adicionado pelo Emailify pode conter uma ou mais camadas “Row” diretamente dentro dele; cada uma delas pode ter uma ou mais camadas “Column”; e cada camada “Column” pode conter uma ou mais camadas de “conteúdo” (por exemplo, textos, imagens, botões etc.).

Exemplo básico da estrutura de camadas do Emailify

• ✉️ Email
  • 🦸 Hero
    • ✍️ Text
    • ✍️ Text
    • 🔗 Button
      • ✍️ Button Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
    • 🏛️ Column
      • ✍️ Text
      • ✍️ Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
    • 🏛️ Column
      • 🪑 Data Table
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • 📷 Vector Icon
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • 📷 Vector Icon
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
      • ✍️ Text
      • 🐦 Social
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
      • 🍔 Navigation
        • 🔗 Nav Link
          • ✍️ Nav Link Text
        • 🔗 Nav Link
          • ✍️ Nav Link Text
  • 🚣 Row
    • 🏛️ Column
      • 🪑 Data Table
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
  • 🎁 Wrapper (para várias Rows)
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text

Tipos de camada do Emailify que você pode usar

Para saber mais sobre cada tipo de camada, leia sobre cada um dos elementos de layout e elementos de design na documentação do Emailify.

Repetindo: é muito importante manter essa estrutura, porque mover essas camadas para fora de ordem faz com que o HTML não seja exibido como esperado (por exemplo, você não pode colocar uma “Row” dentro de outra “Row”, colocar uma camada “Text” diretamente dentro de um frame “Email” nem colocar uma “Row” dentro de uma “Column” etc.).

O jeito mais simples de garantir que você está adicionando a estrutura correta é adicionar componentes iniciais pelo plugin Emailify e personalizar o conteúdo e os estilos conforme precisar, sem mudar a estrutura básica das suas camadas de layout.

Personalizar suas camadas no Figma

Vídeo tutorial: criar e exportar e-mails do Figma em HTML

Este vídeo mostra como criar e exportar do Figma e-mails HTML responsivos e prontos para produção com o plugin Emailify.

Quando você adiciona qualquer componente do Emailify ao seu e-mail, ele aparece no canvas do Figma, onde você pode trabalhar com as camadas como faria normalmente (como se tivesse adicionado as camadas manualmente).

Por exemplo, em uma camada de texto, você pode atualizar o conteúdo e mudar o tamanho da fonte, a altura da linha, o espaçamento entre letras, o espaçamento entre parágrafos e o alinhamento horizontal no painel de configurações normal do Figma.

O Emailify cria de propósito elementos bem básicos, para que você personalize as imagens, os textos e os valores de layout de acordo com a sua marca e o seu guia de estilo.

Reutilizar componentes como instâncias do Figma Depois de personalizar um componente, você pode reutilizá-lo várias vezes como instância do Figma, inclusive em outros designs de e-mail no futuro.

Os componentes de conteúdo do Emailify usam o Auto Layout do Figma. Os componentes incluídos no Emailify usam Auto Layout, o que facilita muito ajustar valores de layout, como o padding e o espaço entre colunas ou elementos.

Próximos passos

• Siga o guia de primeiros passos do Emailify para criar seu primeiro e-mail.
• Aprenda a alinhar o conteúdo nos layouts do Emailify e depois adicione estilos de e-mail responsivos.
• Conheça o plugin Emailify para Figma, com exportações HTML prontas para produção e integrações com plataformas.