​
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.
Please note that 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.

​
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 on 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.

In order to import your Google Sheet data to Figma, you’ll first need to ensure that the Google Sheet share URL is made public, otherwise the plugin won’t have permissions to read it. You can do this by opening up the spreadsheet in Google Sheets, clicking the Share button and changing the document’s permissions from Restricted and update it to Anyone with the link.

​
Looping a Data Table Row with dynamic data

If you’re using a Data Table and need to iterate over some data in your email marketing platform, you can apply a for loop by clicking on a Data Table Row inside of your Data Table, then clicking the Settings button in the plugin header and adding your templating syntax for a loop into the Opening Code Wrapper (eg. {{ #each myItems }}) and Closing Code Wrapper (eg. {{ /#each }}), which will autamatically inject these opening and closing tags around the <tr> HTML table row element in your exported code.

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.

Was this page helpful?

Dynamic PersonalizationInject Custom Code