Para navegar pelos componentes disponíveis no plugin Emailify, clique em qualquer uma das abas de categoria abaixo da barra de cabeçalho do plugin. Cada aba mostra os componentes da categoria, e você pode rolar para cima e para baixo para ver as subcategorias da aba selecionada.
Para reordenar uma linha adicionada a partir das predefinições, clique e arraste a linha para cima ou para baixo dentro do frame contêiner do Emailify (que tem Auto Layout ativado) para mudar a posição dela.
Navegar pela biblioteca de componentes externa
Vídeo tutorial: usar mais de 500 componentes de e-mail HTML grátis nos seus designs do Figma
Este vídeo mostra como usar mais de 500 componentes de e-mail HTML grátis nos seus designs do Figma com o plugin Emailify para Figma.
Além dos componentes incluídos no plugin Emailify, você pode navegar por componentes de bibliotecas externas e usá-los pelo app web do Emailify. Assim, você tem acesso a uma variedade maior de componentes de e-mail prontos, que podem ser copiados direto para os seus designs do Figma.
Para usar componentes da biblioteca externa:
- Acesse o app web do Emailify para ver o catálogo completo de componentes de e-mail disponíveis
- Filtre os componentes por categoria ou por uso em templates, ou pesquise elementos específicos
- Clique no botão Copy Figma Component de qualquer componente para copiar o snippet HTML dele para a área de transferência
- No Figma, selecione o frame do Emailify em que você quer colar o componente
- Cole o componente direto no frame do Emailify com Cmd+V (Mac) ou Ctrl+V (Windows)
O componente colado se integra automaticamente ao seu design de e-mail e pode ser personalizado como qualquer outro componente do Emailify.
Os componentes externos usam a estrutura de Auto Layout do Emailify. Arraste um componente para cima ou para baixo dentro do frame contêiner do Emailify para reordená-lo.
Categorias de componentes iniciais
O Emailify organiza os componentes em algumas categorias (e subcategorias) para facilitar a busca pelo que você precisa no seu design de e-mail.
Cabeçalhos (Headers)
Normalmente usados no topo do e-mail; podem ser componentes como um logotipo da marca, links “ver on-line”, um menu de navegação, ícones de redes sociais etc.
Imagens (Images)
São componentes para exibir conteúdo em imagem, como uma imagem de largura total, uma imagem de fundo (para colocar texto por cima), uma grade de logotipos, cards com imagem, grades e legendas.
Conteúdo (Content)
Inclui componentes baseados em texto, como parágrafos, citações, depoimentos, avatares de autores, cards de artigos, ícones de recursos, estatísticas, códigos promocionais e cards de produtos.
Ecomm (e-commerce)
Oferece alguns componentes comuns que podem ser usados para exibir produtos ou elementos relacionados a um e-mail pós-checkout, e também inclui alguns componentes específicos do Klaviyo para exibir grades dinâmicas de produtos nessa plataforma.
CTAs (chamadas para ação)
Esses componentes servem principalmente para pedir que o usuário clique em algo ou realize uma ação; podem ser componentes como botões, links, heroes com imagem de fundo, miniaturas de vídeo, blocos de recursos, botões de lojas de apps, ícones de redes sociais e heroes de produtos.
Rodapé (Footer)
Normalmente usado na parte de baixo do e-mail; podem ser componentes para exibir o logotipo e o endereço da sua marca, links de redes sociais, links de cancelamento de inscrição ou botões para baixar apps.
Todos os componentes que você adiciona em outra categoria são automaticamente “salvos” na categoria Favourites, para que seja fácil encontrá-los de novo depois. Você também pode remover qualquer componente dos favoritos clicando no ícone Trash; isso remove o componente da sua lista de favoritos, mas não o “exclui” das outras categorias.