Mudar o espaçamento padrão entre itens do Auto Layout nas suas camadas
Ajustando a propriedade Item Spacing das suas camadas Row, Column ou de outras camadas de layout do Emailify (como um Wrapper, um Hero ou um contêiner de ícones de redes sociais), você define o espaçamento padrão entre os elementos filhos dentro dessa camada.
Por exemplo, definir um espaçamento entre itens de 16 em uma camada Column distribui um espaçamento uniforme (16 pixels) entre todos os elementos (por exemplo, textos, imagens, botões etc.) dentro dessa camada Column.
Adicionar espaçadores verticais personalizados às suas colunas
Se você já definiu o espaçamento padrão entre itens, mas ainda precisa de um pouco mais de espaço vertical entre determinadas camadas da sua Column, pode adicionar um espaçador especial do Emailify: clique na camada “Column”, selecione o item “Spacer” no menu suspenso Quick Add, na parte de baixo do plugin, e clique no botão Add + para inserir a camada de espaçador na Column.
Depois de adicionar a camada de espaçador à Column, você pode arrastá-la no painel de camadas para mudar entre quais camadas ela fica e ajustar o tamanho dela mudando a Height da camada no painel de propriedades de camada do Figma.
Os espaçadores personalizados também ficam cercados pelo Item Spacing padrão do elemento pai, então leve isso em conta ao definir o valor de Height do espaçador.
Adicionar espaçamento vertical automático entre as camadas da coluna
Para manter uma camada no topo de uma Column e outra na parte de baixo, defina o dimensionamento vertical de Auto Layout da Column como Fill container. Depois, defina o Item spacing como Auto. O Figma distribui o espaço disponível entre as camadas conforme o tamanho do conteúdo muda.
Defina um valor de espaçamento entre itens diferente para o celular. Se você usar esse método para criar um layout vertical dividido no design de desktop, também deve adicionar um ajuste de Item Spacing para o celular: clique na mesma camada “Column” em que aplicou as etapas acima, clique no botão Settings, ative a opção Mobile Item Spacing e digite o valor que quiser (em pixels) para que o espaçamento entre itens tenha um tamanho fixo e consistente no celular (independentemente do tamanho do espaçamento “auto” no desktop).
Adicionar margem vertical personalizada entre os parágrafos das camadas de texto
Você pode personalizar o espaçamento vertical entre os parágrafos das camadas de texto do Figma abrindo o painel de propriedades de texto do Figma e ajustando o valor de Paragraph spacing na aba Basics. Esse valor define quanto margin-bottom adicionar às tags <p> dentro do conteúdo dessa camada de texto quando o e-mail HTML é gerado.
Se você adicionou linhas de parágrafo extras (por exemplo, apertando Enter ou Return duas vezes para criar um espaço duplo), o parágrafo extra vazio continua sendo incluído, e o espaçamento entre parágrafos personalizado também é adicionado como margin-bottom abaixo dele. Se quiser ter um controle mais preciso do espaçamento entre parágrafos no seu texto, você pode remover esses parágrafos extras ou em branco (como no vídeo acima).
Você pode aplicar configurações em massa abrindo Settings e selecionando no Figma várias camadas do Emailify do mesmo tipo. Qualquer configuração que você alterar será aplicada a todas as camadas selecionadas.