Figma to Pro Email

About this plugin

O Figma to Pro Email é seu parceiro definitivo para criar campanhas de email. Este plugin premium converte seus Frames do Figma em código HTML completo e profissional, garantindo exibição perfeita em todos os clientes de email (Gmail, Outlook, Apple Mail, etc.). Vá além da simples conversão com otimização avançada, personalização para Dark Mode e análise de compatibilidade. Requer licença paga para uso.

Funcionalidades Detalhadas

1. Conversão de Design para HTML Impecável

Layout Baseado em Tabelas: Nosso motor converte seus Frames em uma estrutura <table> aninhada, o padrão da indústria para máxima compatibilidade em todos os clientes de email.

Reconhecimento de Estrutura: Agrupa elementos verticalmente em "linhas" e horizontalmente em "colunas", recriando seu layout fielmente com espaçamento preciso.

Processamento de Texto Avançado: Converte caixas de texto do Figma em HTML com estilos CSS inline, preservando cor, família/tamanho da fonte, alinhamento, altura da linha e hiperlinks aplicados.

Renderização Inteligente de Imagens: Transforma automaticamente formas complexas (vetores), grupos e textos de fontes personalizadas (quando configurado) em imagens PNG de alta resolução (@2x), garantindo fidelidade visual absoluta.

2. Customização e Otimização Profissional

Configurações Essenciais de Email: Defina o Assunto (Subject) e o Texto de Preview do seu email através de um modal intuitivo.

Gerenciamento Total de Fontes: Use o modal "Aa Fontes" para analisar todas as fontes usadas e escolher quais devem ser convertidas em imagem (essencial para fontes não-websafe) ou importadas via Google Fonts, otimizando a exibição em diferentes clientes.

Personalização de Dark Mode: No modal "🌙 Dark Mode", defina cores substitutas para cada cor do seu design, assegurando uma experiência visual impecável em ambientes com modo escuro.

3. Interface Intuitiva e Experiência do Usuário Superior

Preview Interativo: Veja uma pré-visualização em tempo real do seu email gerado em um <iframe>.

Seleção de Largura de Preview: Teste a responsividade do seu email alternando entre larguras comuns como 600px (Desktop), 430px (iPhone 15 Pro) e 393px (iPhone 15).

Painel de Código e Análise: Acesse o HTML gerado, um relatório de compatibilidade com avisos importantes e uma análise de elementos do design em um painel redimensionável.

Download Completo do Projeto: Exporte um arquivo .zip contendo seu index.html e uma pasta images/ com todas as imagens otimizadas, prontas para upload.

4. Análise e Compatibilidade Avançada

Análise de Design Detalhada: O plugin varre seu Frame para listar todas as cores e fontes utilizadas, auxiliando nas configurações de Dark Mode e Fontes.

Relatório de Compatibilidade: Receba alertas sobre largura excessiva (acima de 600-620px) e o uso de fontes personalizadas, ajudando a garantir a conformidade com as melhores práticas de email.

🤔 Como Usar (Guia Rápido)

Adquira e Ative sua Licença: Obtenha sua chave em https://alexandreviola.com.br/emailpro/ e insira-a ao abrir o plugin pela primeira vez.

Prepare seu Design no Figma: Certifique-se de que todo o conteúdo do seu email esteja dentro de um único Frame e que elementos clicáveis tenham links definidos (Ctrl/Cmd+K).

Converta: Selecione seu Frame principal no Figma e clique em "🔄 Converter" no plugin.

Otimize: Utilize as opções "Aa Fontes", "⚙️ Opções" e "🌙 Dark Mode" para refinar o email.

Exporte: Clique em "Download" para baixar o arquivo .zip com o HTML e as imagens otimizadas.