--- url: "/pt/emailify/design/fundamentals.md" description: "Antes de usar o Emailify para criar e exportar e-mails HTML, é muito importante entender alguns fundamentos sobre como o plugin funciona." --- # Entender como o plugin Emailify funciona > Antes de usar o Emailify para criar e exportar e-mails HTML, é muito importante entender alguns fundamentos sobre como o plugin funciona. > **Warning:** O Emailify **não é compatível** com designs de e-mail do Figma criados fora do plugin. ## Visão geral do Emailify {#emailify-overview} 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_... {#emailify-does} - 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_... {#emailify-does-not} - 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](https://www.caniemail.com/search/?s=dark%20mode) no Gmail ou no Outlook, ou [exibir fontes personalizadas](https://www.caniemail.com/features/css-at-font-face/) em clientes que não sejam o Apple Mail) ## Em que o Emailify é diferente de outros plugins de e-mail para Figma? {#how-is-emailify-different-from-other-email-figma-plugins} 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” {#the-problem-with-other-email-design-to-html-figma-plugins} 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” {#how-emailify-solves-the-intent-problem} **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? {#what-kind-of-designs-can-you-create-with-emailify-and-figma} [Video](/assets/videos/emailify/design/template-examples.mp4) 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](https://www.figma.com/@adambrock) (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](https://www.youtube.com/watch?v=_84LY0fL0Ag&list=PLUGeoZ1yrQAr2_hHBW7WXmXkExRQB1nXZ&index=2) com os vídeos de cada template do Figma. ## Entender a estrutura de camadas do Figma nos designs do Emailify {#understanding-the-figma-layer-structure-in-emailify-designs} Quando você cria layouts para seus e-mails no Emailify com os [componentes iniciais](/pt/emailify/design/presets) 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 {#example-emailify-layer-structure} 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](/assets/images/emailify/example-layer-structure.jpg) #### Exemplo básico da estrutura de camadas do Emailify {#basic-example-of-emailify-layer-structure} - ✉️ 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 {#emailify-layer-types-you-can-use} Para saber mais sobre cada tipo de camada, leia sobre cada um dos [elementos de layout](/pt/emailify/elements/email) e [elementos de design](/pt/emailify/elements/text) 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 {#customizing-your-layers-in-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. [Embedded media](https://www.youtube-nocookie.com/embed/OWv4WX3eqvU) 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. > **Tip:** **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. > **Note:** **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 {#next-steps} - Siga o [guia de primeiros passos do Emailify](/pt/emailify/overview/quickstart) para criar seu primeiro e-mail. - Aprenda a [alinhar o conteúdo nos layouts do Emailify](/pt/emailify/design/alignment) e depois adicione [estilos de e-mail responsivos](/pt/emailify/design/responsive). - Conheça o [plugin Emailify para Figma](https://www.hypermatic.com/emailify/), com exportações HTML prontas para produção e integrações com plataformas.