Adicionar camadas Data Table manualmente ao design
Para adicionar uma camada Data Table, clique em qualquer camada Column do seu design, selecione a opção Data Table no menu de adição rápida na parte de baixo do plugin e clique em Add para inserir as camadas no design.
Adicionar mais linhas ou colunas à tabela de dados. Para adicionar linhas ou colunas rapidamente, copie e cole as camadas do Figma de linha da tabela e/ou de célula de dados criadas inicialmente.
Por padrão, a Data Table é renderizada da mesma forma no desktop e no celular, então preste atenção à largura da tabela se você adicionar mais do que algumas colunas.
Para tabelas compactas de ícone e texto ou linhas no estilo de checklist, selecione a camada principal Data Table, clique em Settings, ative Mobile Alignment e escolha Center. Isso centraliza a própria tabela exportada no celular e mantém o espaçamento entre ícone e texto, o que é mais confiável do que adicionar padding manualmente à esquerda e à direita para tentar centralizar nos diferentes clientes de e-mail para celular.
Expandir as imagens da Data Table no celular
Selecione uma imagem dentro da Data Table, abra Settings e ative 100% Width Image on Mobile. As imagens com mais de 150px de largura no design para desktop podem se expandir para preencher a célula da tabela no celular, seguindo a mesma largura mínima usada para imagens em Column. Imagens com 150px de largura ou menos mantêm o tamanho, para que ícones pequenos não fiquem esticados.
A verificação de largura usa a largura renderizada da camada de imagem, e não a largura de um componente principal aninhado. Substituições explícitas de largura ou altura no celular têm prioridade. Para que a imagem preencha uma linha empilhada, configure também a Data Table Row para empilhar as células no celular.
Importar uma Data Table de uma URL do Google Sheets ou de um arquivo CSV/Excel
Se você já tem dados em uma planilha do Google Sheets ou em um arquivo CSV/Excel, pode criar automaticamente uma nova Data Table com os dados da planilha: clique em qualquer camada Column do design e selecione a opção Spreadsheet no menu de adição rápida na parte de baixo do plugin.
Depois de selecionar a opção Spreadsheet, cole a URL de uma planilha pública do Google Sheets ou arraste e solte um arquivo CSV/Excel no plugin e clique em Add para inserir as camadas no design.
O Emailify precisa de permissão para ler a planilha. No Google Sheets, selecione Share e mude Restricted para Anyone with the link antes de copiar a URL.
Repetir uma Data Table Row com dados dinâmicos
Para percorrer dados da sua plataforma de e-mail, selecione uma Data Table Row e abra Settings. Adicione a sintaxe do loop em Opening Code Wrapper (por exemplo, {% for product in collection.products %}) e em Closing Code Wrapper (por exemplo, {% endfor %}). O Emailify insere essas tags ao redor do elemento <tr></tr> dessa linha no HTML exportado.
Depois de adicionar as tags de wrapper à camada Data Table Row, você pode preencher o conteúdo dinâmico nas camadas da linha como precisar.
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.