Mais de 15 modelos de e-mail Figma gratuitos para turbinar suas taxas de conversão
Cristina Lauren
18 de outubro de 2022
A maioria dos profissionais de marketing entende que o e-mail desempenha um papel fundamental na execução de uma estratégia de marketing de ciclo de vida bem-sucedida. Para manter seus clientes engajados e nutridos, você precisa se comunicar regularmente com eles, e o e-mail marketing oferece uma das maneiras mais eficazes de fazer isso.
Mas não basta apenas enviar e-mails: os elementos básicos de campanhas de marketing por e-mail fortes são modelos bem elaborados que interagem com seus clientes e os incentivam a interagir.
Se você esgotou todos os seus designs de e-mail atuais ou está apenas procurando por novos estilos inspiradores para apimentar suas campanhas, você veio ao lugar certo.
Nós criamos um biblioteca com mais de 15 modelos de e-mail gratuitos que você pode começar a usar hoje com a ajuda do Figma e uma ferramenta útil de codificação de e-mail chamada Cannoli .
Se você nunca usou o Figma antes, não se preocupe - não apenas mostraremos como é simples personalizar esses modelos de e-mail no Figma, mas também o orientaremos sobre como convertê-los em código usando Cannoli .
Vamos começar!
Modelos de e-mail de boas-vindas
Quando as pessoas se inscrevem na sua lista de e-mails, elas basicamente lhe dão permissão para contatá-las. E isso é muito importante, porque significa que elas estão interessadas no que você tem a dizer ou oferecer.
Como esses geralmente são os primeiros e-mails que seus assinantes receberão (além de um e-mail de confirmação de inscrição) e eles tendem a ter altas taxas de abertura, você quer causar uma boa primeira impressão com um modelo de e-mail excelente.
Felizmente, temos três designs exclusivos que você pode escolher para combinar com a sensação que deseja.
Se você procura algo que pareça moderno e minimalista, experimente o modelo Moderno.
Quer algo um pouco mais sofisticado? Opte pelo modelo Elegante.
E se você prefere um visual mais padrão, com um toque limpo e profissional, o modelo Clássico é a escolha perfeita.
Escolha um modelo:
Modelos de e-mail de recuperação
Se um cliente não interage com seus e-mails há algum tempo, pode ser um sinal de que ele precisa de um engajamento extra além da típica campanha de nutrição. Você pode fazer isso com o poder de um e-mail de reconquista bem elaborado e lembrar seus clientes do motivo pelo qual eles amaram sua marca em primeiro lugar. Se possível, ofereça algum tipo de desconto e mencione-o no assunto para tornar seu e-mail ainda mais atraente.
Não há garantia de que todos os clientes serão conquistados, mas definitivamente vale a pena tentar e os modelos abaixo podem ajudar você a aumentar suas chances.
Escolha um modelo:
Modelos de e-mail de carrinho abandonado
Quando um cliente deixa itens no carrinho de compras, geralmente é porque ainda não está pronto para comprar. Talvez ele ainda esteja comparando preços ou talvez precise economizar para uma compra maior.
Seja qual for o motivo, é uma oportunidade perdida se você não fizer o acompanhamento. E é aí que entram os e-mails de carrinho abandonado. Assim como os e-mails de reconquista, um e-mail de lembrete de carrinho abandonado é uma maneira útil de lembrar os clientes exatamente do que eles deixaram para trás.
Escolha um modelo abaixo para ajudar seus clientes a terminar de onde pararam.
Escolha um modelo:
Modelos de e-mail em texto simples
E-mails em texto simples são uma ótima maneira de transmitir sua mensagem de forma clara e concisa. Com um design minimalista, eles são pensados para serem fáceis de ler, permitindo que os assinantes se concentrem na mensagem do seu texto.
Por exemplo, um e-mail de texto simples seria ideal se você quisesse entregar notícias importantes aos seus clientes, como atualizações sobre o estoque ou uma mensagem pessoal do seu CEO sobre o futuro do negócio. Mas esse tipo de modelo também é ideal para qualquer outro e-mail que você queira manter simples e direto.
Com essas ideias em mente, criamos os três modelos a seguir.
Escolha um modelo:
Modelos de e-mail de lançamento de produto
Ao lançar um novo produto, o marketing por e-mail é uma das melhores maneiras de deixar seus clientes animados e informados.
Mas o que torna um modelo de e-mail de lançamento de produto eficaz? Para começar, você provavelmente vai querer destacar a aparência do seu produto, então um modelo com elementos visuais é importante. Em segundo lugar, CTAs claros e vibrantes facilitam ao máximo o clique e a conversão dos assinantes no seu site.
Combinamos esses elementos e muito mais em cada um dos modelos abaixo para ajudar você a realizar um lançamento de produto de e-mail bem-sucedido.
Escolha um modelo:
Como usar e editar modelos de e-mail no Figma
Agora que você já conhece os modelos, é hora de aprender a personalizá-los no Figma. Siga os passos abaixo!
1. Escolha o modelo que deseja neste post do blog ou acesse nosso biblioteca de modelos para ver todas as opções.
2. Após encontrar o modelo desejado, clique nele e escolha "Abrir no Figma" na próxima página. Observação: se preferir obter apenas o código do e-mail e personalizar o design no seu próprio editor de código, sinta-se à vontade para clicar em "Baixar HTML".
3. Após clicar em “Abrir no Figma”, você será levado para uma página do Figma onde verá o design de e-mail escolhido, além de outros na mesma categoria.
4. Agora você pode acessar sua conta do Figma. Se ainda não tiver uma, crie uma usando sua conta do Google ou registre-se com seu e-mail.
5. Once you’re logged in, highlight and copy the entire design of the template you want, create a new design file, and paste the layers into the new file. To create a new design file, click on the home icon in the upper lefthand corner, then File >New design file.
6. A partir daqui, você pode editar os modelos de e-mail como quiser, incluindo alterar o texto, as imagens e as cores. Você também notará que esses e-mails foram codificados usando MJML. Embora você não precise saber MJML para usar o Figma, se quiser saber mais, confira este guia detalhado .
7. If you only want picture files or PDFs of the email templates, you can simply click on the home icon >File >Export or Export frames to PDF. However, if you want to send your template out to an email list on a platform like Mailchimp, for example, check out the next section.
Como converter seu modelo de e-mail Figma em código HTML
Nesta parte, usaremos uma ferramenta gratuita chamada Cannoli, que torna rápido e fácil converter seus modelos de e-mail em código editável e pronto para uso. Veja como funciona:
1. Comece indo para Cannoli.app , em seguida, clique no botão “Login” no canto superior direito da página.
2. Você será solicitado a efetuar login com sua conta Figma e, depois disso, será direcionado ao seu painel do Cannoli.
3. Clique em “Novo arquivo” e digite um nome para o arquivo.
4. Volte para a página da web com seu arquivo de design de e-mail do Figma e copie o URL.
5. Cole a URL em “Figma Link” e selecione a página e os quadros que deseja converter.
6. Uma prévia do seu modelo de e-mail aparecerá e se tudo estiver certo, clique em “Criar arquivo”
7. Após alguns segundos de carregamento, você será levado a uma página que mostra o código do modelo de e-mail no lado esquerdo da tela e o design real no lado direito. Observe que você também pode alternar entre os códigos MJML e HTML.
8. Se precisar fazer alguma alteração de última hora, você pode editar o texto e o código diretamente no editor.
9. Para testar seu e-mail diretamente do Cannoli, clique em “Enviar e-mail de teste” na barra de tarefas e digite o endereço de e-mail para o qual deseja enviar.
10. Para exportar o código, clique no botão verde "Exportar" no canto superior direito. Aqui, você terá a opção de baixar um arquivo MJML ou HTML para enviar ao seu provedor de serviços de e-mail (ESP). Mas você também pode copiar o código e colá-lo no editor de código do seu ESP.
11. Se você usa o Klaviyo, também pode conectar sua conta ao Cannoli para facilitar ainda mais a exportação e a importação do design de e-mail.
12. Outra observação importante: o Cannoli não funciona apenas com nossos modelos de e-mail — você pode pegar qualquer design de e-mail que tenha criado no Figma e convertê-lo em código.
Além deste blog, também compilamos todos esses modelos em um único e elegante biblioteca de modelos . Cada modelo é gratuito, responde perfeitamente em dispositivos desktop e móveis e pode ser convertido automaticamente em código usando Cannoli.app .
Plus, if you’re looking for your next Figma plugin and you enjoyed using Cannoli with these free email templates, you can also take advantage of the Cannoli plugin for Figma. Check it out here .
