Fatiamento de imagem no Figma para Cannoli
30 de janeiro de 2023
Se você está tentando criar um design de e-mail Figma com muitas imagens, temos um método que facilita isso com a ajuda do Cannoli.app.
Neste Cannoli Bite, você aprenderá como usar uma técnica chamada fatiamento de imagem para criar um design de e-mail personalizado do Figma no Cannoli.
Assista a este curta tutorial em vídeo ou siga o guia escrito abaixo para começar!
1. Cannoli
Se você ainda não se inscreveu no Cannoli, você pode fazer isso acessando cannoli.app . Você também pode usar o Plugin Figma para HTML para Cannoli . Para um guia passo a passo sobre como configurar o plugin, confira esta página .
2. Fatiando as imagens
Digamos que você se depare com imagens sobrepostas ou talvez queira um texto em uma posição bem específica, mas o layout automático não está funcionando como você deseja. Aqui está uma solução que você pode tentar.
Primeiro, as convenções de nomenclatura são importantes no Cannoli, então, para que seu design seja convertido corretamente, certifique-se de fazer o seguinte:
-
Nomeie sua linha como 'mj-section'
-
Nomeie sua coluna como 'mj-column'
A partir daqui, comece selecionando sua composição.
Em seguida, adicione a composição a um grupo. Renomeie a composição para mj-image e adicione-a a uma mj-column e a uma mj-section.
Isso é chamado de fatiamento de imagem e permite que você use designs mais complexos em seus e-mails.
3. Converta seu e-mail em código com Cannoli
Agora seu e-mail está pronto para ser enviado.
Vá para cannoli.app e cole seu arquivo Figma no Cannoli.
Se você estiver usando o plugin Cannoli no Figma, basta executá-lo e copiar o link para o seu design. Uma janela deverá aparecer. Clique em "Obter código" e cole o link em "Colar o link do Figma para sincronizar um quadro deste arquivo" . Em seguida, clique em "Sincronizar".
E pronto!
O Cannoli converterá automaticamente o e-mail em código. Você ainda pode editar o código do e-mail neste ponto, no lado esquerdo da tela, então não se esqueça de adicionar texto de pré-cabeçalho e links para suas imagens, se necessário.
Quando seu e-mail estiver bom, você pode copiar o código para seu ESP.
Se precisar de mais ajuda ou tiver dúvidas, entre em contato conosco em olá@cannoli.app .
Quer alguns modelos de e-mail gratuitos do Figma?
Confira esta página para alguns modelos pré-desenhados e dicas úteis sobre como usar Figma e Cannoli juntos.
