Nesta história, mostrarei um plug-in para o Figma que desenvolvemos para converter designs do Figma em e-mails HTML que enviamos internamente.

Mas antes de começarmos, deixe-me compartilhar as estatísticas de uso até agora. Desde que o plug-in foi publicado e disponibilizado para uso, a Acronis gerou e enviou mais de 700 e-mails. 20 funcionários usam o plug-in em seu trabalho diário para enviar e-mails de comunicação interna. Isso inclui atualizações mensais de nosso CEO, anúncios de eventos, iniciativas da Acronis Foundation, atualizações do sistema de design e muito mais. Então, vamos mergulhar nos detalhes.

declaração do problema

Um dos principais problemas que tentamos resolver é reduzir a complexidade da criação de e-mails para as pessoas da empresa que preparam esses e-mails regularmente. Anteriormente, tínhamos duas maneiras de criar emails:

• ContactMonkey —Ferramenta de terceiros que oferece muitas possibilidades para criar e-mails responsivos com o construtor de modelo de e-mail de arrastar e soltar fácil de usar. Mas, na verdade, é uma ferramenta muito caprichosa e não tão prática em termos de renderização HTML/CSS que requer muito tempo para correções de bugs (de vez em quando sem nenhum resultado) após a criação do modelo. Além disso, você não pode obter o modelo no formato .html e precisa instalar o complemento para Outlook antes de começar a criar e-mails ou usar um serviço web especial.
• Edição de modelo HTML —É fácil copiar/colar o modelo no Outlook para posterior edição. Mas caso você precise combinar vários modelos em um novo com distribuição de blocos personalizados, seja bem-vindo à marcação HTML. Como todos entendemos, esta é a maneira mais fácil de fazer algo errado em termos de edição de marcação não planejada, remoção de tags ou caracteres específicos que o HTML requer, etc.

Mas e se pegarmos o melhor desses métodos e os combinarmos em uma única ferramenta, com um construtor de templates fácil de usar, arrastar e soltar, a possibilidade de gerar arquivos .html, estilizar o conteúdo (negrito, itálico , link, lista, etc.) e renderização estável sem bugs em 100% dos casos?

Solução

Biblioteca de componentes Figma

Designers, desenvolvedores, gerentes de produtos, programas e eventos e profissionais de marketing usam o Figma todos os dias. Portanto, usar os recursos do Figma para uma nova ferramenta em termos de desenvolvimento e suporte foi a solução mais óbvia e barata.

Em primeiro lugar, verificamos toneladas de modelos existentes para encontrar todos os blocos (doravante no texto nos referiremos a eles como fatias) que foram usados ​​antes e depois os transferimos para o Figma como uma biblioteca de componentes. Como resultado, preparamos seis grupos, 41 componentes exclusivos e a capacidade de combinar esses componentes em qualquer ordem que você desejar, usando ações simples de copiar/colar por meio de atalhos.

Lógica do plug-in

Com a biblioteca Figma pronta, começamos a pensar em como gerar templates HTML. No início, tínhamos duas ideias. A primeira foi gerar um novo código diretamente do mockup, e a segunda ideia foi usar a mesma abordagem que usamos para criar templates no Figma. Divida os modelos de e-mail existentes em arquivos .html menores que contenham apenas uma parte do código relevante para uma fatia específica. Em seguida, mapeie esses arquivos para fatias no Figma e crie o e-mail final combinando os nomes das fatias no Figma com os nomes dos arquivos .html.

Abandonamos rapidamente a primeira ideia porque o custo de desenvolvimento era potencialmente muito alto e nos concentramos na segunda. Já tínhamos todas as peças e só precisávamos combiná-las adequadamente em uma solução de trabalho sem ter que inventar nada de novo. Então, a lógica do plugin é a seguinte:

1. O usuário seleciona um modelo criado no Figma
2. Executa o plug-in
3. O plug-in coleta nomes de fatias e seus conteúdos do Figma
4. Compara os nomes coletados no Figma com os nomes dos arquivos .html
5. Gera um novo e-mail a partir de arquivos .html mapeados para fatias Figma por nome
6. Faz o download de um novo e-mail como um arquivo .html

Para tornar o uso do plug-in o mais conveniente possível e fornecer uma experiência nativa para trabalhar com o conteúdo, adicionamos suporte para recursos básicos de edição de texto usando teclas de teclado e atalhos:

• texto em negrito — ctrl/cmd + b
• texto sublinhado — ctrl/cmd + u
• texto em itálico — cmd/ctrl + i
• colando links — cmd/ctrl + v
• listas ordenadas/desordenadas — menos ou 1, depois espaço
• quebra de linha — digite

A parte mais complicada de todo o desenvolvimento foi a funcionalidade de adicionar imagens. Para isso, tivemos que desenvolver outro plug-in de satélite que pudesse enviar imagens para armazenamento em nuvem e retornar links diretos. Como funciona:

1. O usuário cria um novo quadro
2. Adiciona uma ou várias imagens
3. Executa o plug-in
4. O plug-in carrega imagens para armazenamento em nuvem e gera links diretos
5. O usuário copia os links para a área de transferência e os cola em um local específico para vincular à imagem

Por um lado, parece uma solução alternativa, mas, por outro lado, na minha opinião, é uma boa solução para não permitir que usuários não familiarizados com o Figma editem fatias em profundidade, para evitar problemas com o layout estrutura após substituição de imagens, redimensionamento, etc. Nem pedimos aos usuários que preparem as dimensões corretas para as imagens. O plug-in ajusta a imagem ao tamanho do contêiner sob o capô.

Para concluir

O plug-in funciona e atende às reais necessidades dos funcionários da Acronis responsáveis ​​pela comunicação interna. E a principal razão pela qual mais e mais usuários escolhem o construtor de e-mails como sua principal ferramenta para criar modelos de e-mail são os resultados bons e previsíveis em 100% dos casos de uso.

Agradecimentos especiais a Vladimir Dovydenko e Stepan Malkhasyan por sua paciência e ajuda.

Mais histórias sobre ferramentas

• ffmpeg + ImageMagick. Converta vídeo para GIF usando o Terminal.app no ​​macOS
• Como construir um plug-in do Sketch que conectará símbolos de sua biblioteca com qualquer documentação externa
• Como otimizar imagens usando macOS Terminal + TinyPNG CLI

• Facebook
• Médio