Do Figma para o e-mail: por que exportar não funciona e o que fazer no lugar

Não dá para exportar um design do Figma em um e-mail pronto com um botão: o Figma gera marcação com posicionamento absoluto e CSS moderno, enquanto os clientes de e-mail exigem tabelas e estilos inline. A seguir, por que é assim e três formas de levar o design para uma campanha que funcionam de verdade.

Por que a exportação do Figma não serve para e-mail

O Figma foi criado para interfaces que abrem no navegador. O navegador entende flexbox, grid, posicionamento absoluto e folhas de estilo externas. Os clientes de e-mail não entendem quase nada dessa lista.

• o posicionamento absoluto é ignorado pela maioria dos clientes de e-mail
• flexbox e grid não funcionam no Outlook clássico
• folhas de estilo externas são removidas; os estilos precisam ser inline
• o aninhamento de camadas do Figma não corresponde à estrutura de tabelas do e-mail
• as fontes do design raramente estão disponíveis no e-mail e são substituídas pelas do sistema

O resultado de uma exportação direta é previsível: correto no navegador e desmontado na caixa de entrada. E desmonta pior justamente onde estão os assinantes corporativos.

Método um: montagem manual a partir do design

O caminho clássico. Alguém abre o arquivo, anota medidas, cores e espaçamentos e monta o e-mail em tabelas do zero. Dá o máximo de controle e o melhor resultado, mas exige um especialista e tempo.

Um detalhe que designers costumam esquecer: o design normalmente é desenhado para uma largura de desktop de 600 ou 640 pixels, enquanto a maioria dos e-mails é aberta no celular. Segundo dados da Litmus, o Apple Mail lidera as aberturas e o Gmail vem em seguida, e nos dois casos são majoritariamente telas móveis.

Por isso vale desenhar o design em dois estados desde o início: como fica em tela larga e como os blocos se reorganizam em tela estreita. Caso contrário, quem monta o código decide por você, e nem sempre do jeito que você imaginou.

Método dois: remontagem em um construtor de blocos

Em vez de escrever código, o design é montado com blocos prontos: cabeçalho, banner, texto, botão, produtos, rodapé. Cada bloco já é compatível com os clientes de e-mail, então a tarefa se resume a escolher blocos conforme o design e ajustar cores e espaçamentos.

É mais rápido do que montar à mão e não exige saber HTML. A limitação é evidente: o design precisa ser adaptado ao conjunto de blocos disponível em vez de reproduzido pixel a pixel. Na prática isso raramente é um problema, porque e-mails são construídos com um repertório limitado de padrões e um bom construtor os cobre.

Método três: reconhecimento do design

Uma abordagem mais recente: o construtor recebe uma imagem ou um link para o design e deduz sozinho a estrutura — onde fica o cabeçalho, o banner, o botão, os cartões de produto. Depois monta o e-mail com os próprios blocos, preenchendo textos, cores e imagens reconhecidos.

Não é copiar pixels, e sim interpretar a estrutura. A saída é um e-mail editável sobre blocos compatíveis, não uma imagem. A precisão depende de quanto o design se parece com um e-mail comum: estruturas convencionais são reconhecidas bem, experimentais nem tanto.

• a partir de um link do design: mais preciso, porque a estrutura de camadas está disponível
• a partir de uma captura: funciona com qualquer imagem, inclusive o e-mail de outra marca
• a partir de HTML existente: quando o e-mail já está montado e precisa ser editado

O que conferir depois de qualquer transferência

Seja qual for o método, vale passar o e-mail por uma lista curta antes de enviar. Estes são os pontos que mais quebram na transferência de um design.

• largura do e-mail: 600 pixels é o padrão seguro
• espaçamento aplicado às células de tabela, não aos blocos
• botões clicáveis em toda a área, não apenas no texto
• texto alternativo preenchido em todas as imagens
• peso total abaixo de 102 kilobytes, ou o Gmail vai cortar
• as fontes com alternativas do sistema

Como funciona no Mailvex

O construtor cobre os três cenários: montagem manual com blocos, importação a partir de um link do Figma e reconhecimento de uma captura enviada. O e-mail resultante pode ser recolorido conforme o seu manual de marca, para que cores e fontes sejam aplicadas sozinhas em vez de ajustadas à mão.

A saída é um e-mail editável sobre blocos compatíveis e HTML limpo para qualquer plataforma de envio.

Perguntas frequentes

Dá para conseguir correspondência pixel a pixel com o design?

Na maioria dos casos não, e tudo bem. Os clientes de e-mail renderizam fontes e espaçamentos de formas diferentes, então o mesmo e-mail sempre aparece um pouco diferente em cada caixa. O objetivo da transferência é preservar estrutura, hierarquia e identidade de marca, não cravar pixels.

O que fazer com as fontes do design?

Colocá-las primeiro na lista e adicionar alternativas do sistema em seguida. Alguns clientes carregam a fonte personalizada, outros substituem, e o e-mail precisa ficar digno nos dois casos.

Como lidar com estruturas de várias colunas?

Ficar em duas colunas e garantir que elas se empilhem bem em uma só na tela estreita. Três ou mais colunas se comportam de forma imprevisível no e-mail, especialmente no novo Outlook, onde há relatos de problemas no empilhamento de colunas.