Ajouter manuellement des calques Data Table à votre design

Pour ajouter un calque Data Table, cliquez sur un calque Column de votre design, choisissez l’option Data Table dans le menu d’ajout rapide en bas du plugin, puis cliquez sur Add pour insérer les calques dans votre design.

Ajouter des rangées ou des colonnes au tableau de données. Pour ajouter rapidement des rangées ou des colonnes, copiez-collez les calques Figma de rangée de tableau et/ou de cellule de données créés au départ.

Par défaut, le Data Table s’affiche de la même façon sur desktop et sur mobile : surveillez donc la largeur de votre tableau si vous ajoutez plus de deux ou trois colonnes.

Pour des tableaux compacts d’icônes et de texte ou des rangées façon liste à cocher, sélectionnez le calque Data Table principal, cliquez sur Settings, activez Mobile Alignment et choisissez Center. Le tableau exporté est alors centré sur mobile, sans toucher à l’espacement entre icônes et texte : c’est plus fiable que d’ajouter à la main des marges intérieures à gauche et à droite pour approcher un centrage d’un client mobile à l’autre.

Agrandir les images d’un Data Table sur mobile

Sélectionnez une image dans votre Data Table, ouvrez Settings et activez 100% Width Image on Mobile. Les images de plus de 150px de large dans le design desktop peuvent alors s’agrandir sur mobile pour remplir leur cellule, comme la largeur minimale utilisée pour les images de Column. Les images de 150px de large ou moins gardent leur taille, pour éviter d’étirer les petites icônes.

La vérification de largeur utilise la largeur affichée du calque d’image, et non celle d’un composant principal imbriqué. Les remplacements explicites de largeur ou de hauteur sur mobile sont prioritaires. Pour que l’image remplisse une rangée empilée, configurez aussi la Data Table Row pour qu’elle empile ses cellules sur mobile.

Importer un Data Table depuis l’URL d’une Google Sheet ou un fichier CSV/Excel

Si vos données se trouvent déjà dans une Google Sheet ou un fichier CSV/Excel, vous pouvez créer automatiquement un nouveau Data Table qui les contient : cliquez sur un calque Column de votre design, puis choisissez l’option Spreadsheet dans le menu d’ajout rapide en bas du plugin.

Une fois l’option Spreadsheet choisie, collez l’URL d’une Google Sheet publique ou faites glisser un fichier CSV/Excel dans le plugin, puis cliquez sur Add pour insérer les calques dans votre design.

Emailify doit être autorisé à lire le tableur. Dans Google Sheets, cliquez sur Share et remplacez Restricted par Anyone with the link avant de copier l’URL.

Répéter une Data Table Row en boucle avec des données dynamiques

Pour parcourir des données de votre plateforme d’emailing, sélectionnez une Data Table Row et ouvrez Settings. Ajoutez la syntaxe de boucle dans Opening Code Wrapper (par exemple, {% for product in collection.products %}) et dans Closing Code Wrapper (par exemple, {% endfor %}). Emailify insère ces balises autour de l’élément <tr></tr> de cette rangée dans le HTML exporté.

Une fois les balises d’encadrement ajoutées au calque Data Table Row, vous pouvez renseigner le contenu dynamique dans les calques de votre rangée selon vos besoins.

Vous pouvez appliquer des réglages en masse : ouvrez Settings, puis sélectionnez dans Figma plusieurs calques Emailify du même type. Chaque réglage que vous modifiez s’applique alors à tous les calques sélectionnés.