Añadir capas Data Table manualmente a tu diseño
Para añadir una capa Data Table, haz clic en cualquier capa Column de tu diseño, selecciona la opción Data Table en el menú de añadido rápido de la parte inferior del plugin y haz clic en Add para insertar las capas en tu diseño.
Añadir más filas o columnas a la tabla de datos. Puedes añadir rápidamente más filas o columnas copiando y pegando las capas de Figma de fila de tabla o de celda de datos que se crean al principio.
Por defecto, la Data Table se renderiza igual en escritorio y en móvil, así que ten cuidado con el ancho de la tabla si añades más de un par de columnas.
Para tablas compactas de icono y texto o filas tipo lista de comprobación, selecciona la capa principal Data Table, haz clic en Settings, activa Mobile Alignment y elige Center. Así la propia tabla exportada se centra en móvil y se mantiene el espaciado entre icono y texto, algo más fiable que añadir a mano relleno a izquierda y derecha para aproximar el centrado en los distintos clientes de email móviles.
Ampliar las imágenes de la Data Table en móvil
Selecciona una imagen dentro de la Data Table, abre Settings y activa 100% Width Image on Mobile. Las imágenes de más de 150px de ancho en el diseño de escritorio pueden ampliarse para rellenar su celda de la tabla en móvil, con el mismo ancho mínimo que se usa en las imágenes de Column. Las imágenes de 150px de ancho o menos mantienen su tamaño para no estirar los iconos pequeños.
La comprobación del ancho usa el ancho renderizado de la capa de imagen, no el de un componente principal anidado. Los ajustes explícitos de ancho o alto para móvil tienen prioridad. Para que la imagen rellene una fila apilada, configura también la Data Table Row para que apile sus celdas en móvil.
Importar una Data Table desde la URL de una hoja de Google Sheets o desde un archivo CSV/Excel
Si ya tienes datos en una hoja de Google Sheets o en un archivo CSV/Excel, puedes crear automáticamente una nueva Data Table con los datos de la hoja de cálculo: haz clic en cualquier capa Column de tu diseño y selecciona la opción Spreadsheet en el menú de añadido rápido de la parte inferior del plugin.
Después de seleccionar la opción Spreadsheet, puedes pegar la URL de una hoja de Google Sheets pública o arrastrar y soltar un archivo CSV/Excel en el plugin, y después hacer clic en Add para insertar las capas en tu diseño.
Emailify necesita permiso para leer la hoja de cálculo. En Google Sheets, selecciona Share y cambia Restricted por Anyone with the link antes de copiar la URL.
Repetir una Data Table Row con datos dinámicos
Para recorrer los datos de tu plataforma de email, selecciona una Data Table Row y abre Settings. Añade la sintaxis del bucle en Opening Code Wrapper (por ejemplo, {% for product in collection.products %}) y en Closing Code Wrapper (por ejemplo, {% endfor %}). Emailify inserta las etiquetas alrededor del elemento <tr></tr> de esa fila en el HTML exportado.
Cuando hayas añadido las etiquetas envolventes a la capa Data Table Row, puedes rellenar el contenido dinámico dentro de las capas de la fila según necesites.
Puedes aplicar ajustes en bloque abriendo Settings y seleccionando en Figma varias capas de Emailify del mismo tipo. Cualquier ajuste que cambies se aplicará a todas las capas seleccionadas.