Adding custom data tables to your emails

The custom Data Table element layer lets you render simple text/image content into an HTML table with multiple rows and columns.

Manually adding Data Table layers to your design ​

To add a Data Table layer, click on any Column layer in your design, then select the Data Table option from the quick add menu at the bottom of the plugin, then click Add to insert the layers to your design.

Adding additional data table rows or data table columns. You can quickly add additional rows or columns by copy/pasting the table row and/or table data cell Figma layers that are initially created.

By default, the Data Table will render the same way on desktop and mobile, so please be mindful about the width of your table if you’re adding more than a couple of table columns.

For compact icon/text tables or checklist-style rows, select the main Data Table layer, click Settings, enable Mobile Alignment, and choose Center. This centers the exported table itself on mobile while keeping the icon/text spacing intact, which is more reliable than manually adding left/right padding to approximate centering across different mobile clients.

Expanding Data Table images on mobile ​

Select an image inside your Data Table, open Settings, and enable 100% Width Image on Mobile. Images wider than 150px in the desktop design can expand to fill their table cell on mobile, matching the minimum width used for Column images. Images 150px wide or smaller keep their size to avoid stretching small icons.

The width check uses the image layer's rendered width, not the width of a nested master component. Explicit mobile width or height overrides take precedence. To make the image fill a stacked row, configure the Data Table Row to stack its cells on mobile as well.

Importing a Data Table from Google Sheet URL or CSV/Excel file data ​

If you already have some data in a Google Sheet or a CSV/Excel file, you can automatically create a new Data Table with the spreadsheet data included by clicking any Column layer in your design, then selecting the Spreadsheet option from the quick add menu at the bottom of the plugin.

Once you've selected the Spreadsheet option, you can either paste in a public Google Sheet URL or drag and drop a CSV/Excel file into the plugin, then clicking the Add to insert the layers to your design.

Emailify needs permission to read the spreadsheet. In Google Sheets, select Share and change Restricted to Anyone with the link before copying the URL.

Looping a Data Table Row with dynamic data ​

To iterate over data from your email platform, select a Data Table Row and open Settings. Add the loop syntax to Opening Code Wrapper (for example, {% for product in collection.products %}) and Closing Code Wrapper (for example, {% endfor %}). Emailify inserts the tags around that row's <tr></tr> element in the exported HTML.

Once you've added your wrapper tags to the Data Table Row layer, you can populate the dynamic content inside the layers of your row as needed.

You can apply settings in bulk by opening Settings, then selecting multiple Emailify layers of the same type in Figma. Any setting you change will be applied to all selected layers.