How to import spreadsheets to tables for HTML emails in Figma using Emailify

Video Transcript

Today I’m going to be showing you how to automatically import a spreadsheet into a table component for your email designs which you can then export out to HTML.

To get started, we can just jump into a new Figma file and go to the “Resources” icon in the top header menu here. I’m just going to click on that, click on the “Plugins” tab and then we’re just going to search for the word “Emailify”, and you’ll see Emailify pop up as a result. Just go ahead and click on that, and then to install the Figma plugin, we just click on this little three dots icon where it says “More options”, click on that, then click on “Install” and that’s just going to install the Emailify Figma plugin that we’re going to use for this Figma tutorial.

To run the Figma plugin, we just right click anywhere on your Figma page, go down to “Plugins”, go to “Installed Figma Plugins”, click on “Emailify” and that will run the Figma plugin that we just installed a minute ago. The first time you run the Figma plugin it’s going to ask you to create a new email frame, so I’m just going to call this one “Table Test” for today just to show you an example of the table component. Once you’ve done that, just click on the “Add new Emailify container” button and that’s just going to add a blank email frame onto the page. This is going to allow us to do different things like add pre-built components from the components menu here, you can click on any of these, you can change the category and pick different ones, but for today we’re actually going to be creating a custom table component from a spreadsheet automatically.

To do that we just need to use this little “Quick add element to selected layer” function at the bottom of the Figma plugin. The way this works is when you select a different type of element or a different type of layer in your email it’s going to give you different options that you can add to that layer. For example, if we click on the email frame, you can see here we’ve got the email layer selected it’s going to allow us to add a few different content types. I’m going to add the “Content row” and click on the “Add” button and that’s just going to add a brand new content row that we can now use in our email to add more components. I’m just going to click on the “Column” element inside of the row and this is where our content layers are going to be added. For today, I’m going to be focusing on importing a spreadsheet to a table into this content component, but you can add a bunch of different elements as well; there’s text layers, image layers, button layers, you can kind of build all of this out.

Today we’re just going to be adding a spreadsheet, so go ahead and click on the “Add spreadsheed” option in the select menu, and again, I’ve just got the “Column” layer selected and that’s why I’ve been able to select this particular option. Once you’ve selected the “Add spreadsheet” option, it’s going to reveal a couple of new fields that we can use; the first one is it’s going to let us import a table from an Excel spreadsheet file or a CSV file, or alternatively we can import a table from a public Google Sheet. I’ll show you what both of those look like.

I’m just going to switch into my browser where I’ve got Google Sheets open, and I’m just going to go through a rough idea of what the table structure or the spreadsheet structure should look like. The first row is always the “header” and the header is basically just containing your labels that you want for each column. For example, this is a movie app, so I’ve got a poster, I’ve got a title, I’ve got reviews. Underneath the poster column I’ve also got a bunch of image links; if we open one of these up you’ll see that this is actually an image, and if you add a link to an image in your spreadsheet columns that’ll get automatically loaded as an image file into Figma as well; I’ll show you what that looks like in a moment. The rest of these fields are just purely text, so we can just leave them as is and that’s totally fine. You can customize the spreadsheet to have as many columns as you like and as many rows as you like and this will get imported in a moment.

The two ways to import this is you can either download the spreadsheet as a Excel spreadsheet or a CSV file. Excel is probably better, and you can also edit this spreadsheet in Microsoft Excel and save it as an Excel (XLSX) file. You don’t have to use Google Sheets, but for today I’m just using Google Sheets, as I said you, can save that out as an Excel file such as the one I’ve got up here and that’ll be usable so we can drag it into the Figma plugin. I’ll show you what that looks like; we’ve got our Excel file, and I’m just going to drag and drop that Excel file into the Figma plugin, into this little drop zone here. It’s loaded up four rows that it’s going to import, so once it’s ready you can go ahead and click on the “Add” button and it’s going to go ahead and download those images that we included in our spreadsheet data, and then once that’s done, it’s going to automatically import all of that data from the spreadsheet into Figma as a table.

You can see here it’s added this table into Figma, we can see it’s got all the layers in there and it’s also gone ahead and created a brand new page with that table component. I’ll show you what that looks like as well; if we switch onto the table component page which is just by clicking on this little left hand side, I’ll just move the Figma plugin over for a second, and you can see here that we’ve got a couple of different components. We’ve got our table header row component, and what this does is it allows us to actually adjust the width of those columns if we wanted some to be narrower or some to be wider, we can quite easily do that. We can also change the image size, if we just unhide this poster layer, the image layer, and if we wanted to change that we can edit what that looks like. We’re just going to change the aspect ratio of that and then hide that; if we go back into our email you’ll basically see that we’ve now got the changes we’ve made to the width and the changes we made to the poster all coming through in the different sizes. I’m going to remove that for now, and I’m going to get rid of that page.

Now I’m going to show you what it looks like to add that table, or add that spreadsheet, from a Google Sheets URL as well; all I’m going to do is click on my “Column” layer again, I’m going to click on the “Choose element to add” option menu, I’m going to click on “Add spreadsheet” again and this time instead of dropping in an Excel spreadsheet file, I’m going to go back to my Google Sheet link and I’m going to click on this little “Share” button in the top right hand corner. Once I click on that, what I want to do is I’m going to change this “General Access” setting from “Restricted” to “Anyone with the link”; when I click on “Anyone with the link” that basically means that anyone I share this link with will have public access to it, including the Figma plugin.

I’ve just clicked on that “Copy link” button to copy the share link for the spreadsheet, I’m going to minimize my browser, jump back into the Emailify plugin and instead of dropping that file in, I’m going to go down here where it says “Import table from public Google Sheet”, paste that in, that’s going to load up the Google Sheet, and it’s saying that it’s ready to go. We can click on the “Add” button again; I’m going to click on that “Add” button up here again, that’s going to download the images that we set for our poster column, and once it finishes doing that, it’s going to import that data into Emailify. Again, you can see we’ve got the exact same data that we had from our Excel file, but this time we’ve loaded it in from the public Google Sheet URL.

If we jump back again to our component, we can make those changes; I can go to my poster, I can change the width and height of that image to match the aspect ratio if I need to. I can also change some of these things up here, so if I wanted to hide certain columns, I can just click on the the header row component and I can just hide certain columns if I want to do that; I can hide the reviews column, and that’s just a really easy way for me to customize the width and customize the display of a lot of these different things. We can really fine tune what that looks like and we can reduce that width as well.

If we switch back into Emailify, you’ll see here that we’ve now got a customized table that we can actually now render out to HTML, and the way we can do that as a preview is just by clicking on this little “Preview” button in the Figma plugin; I’m going to click on “Preview” it’s going to generate an HTML preview. You can see here this is HTML, I can select and move around, I can see what it looks like on mobile; this is the mobile width, I can shrink that down and see what it looks like, and of course, you can customize all of this as well as you’d expect in Figma.

If you want to do things like adjust the vertical alignment, you can just change the auto layout properties either in the instances here or you can do that in the actual component page as well; if I go back to the component page and I go to the header component, I’m going to go there I’m going to change the vertical alignment to the top, and that will automatically update the vertical alignment to the top in my instances as well. Then if I click on the “refresh” icon button in the Figma plugin you can see here that that change has been reflected as well. Same thing with the border stroke; for example, I’ve got this border stroke set on the bottom of the row; if I change that color to black, that’s going to change the color to black here. If I get rid of that entirely, I can just refresh that, and now I’ve got no dividers; it’s just a nice way to customize it really easily. If you just jump back into the component page, go to the data table header row component and if you customize that, that’s going to roll out all the changes to your instances as well. You can basically make the design change in one place and see those changes get rolled out across the board automatically, and that’s just a really fast way of making changes to your table or changes to data; that’s roughly what it looks like.

As I said, you can export this out to HTML as well. If you want to export the email from Figma to HTML, just click on the “Export HTML” button and select your platform; you can either export to an HTML package, or you can export it to a specific platform. If you’re a MailChimp user, you can paste in your key, or if you’re a Klaviyo user, you can paste in your key, or any of these other platforms, but for today I’m just going to be exporting to HTML. I’m going to click on the “HTML” option, click the “Export to HTML” button, and you can add a subject line if you need to; I’m not going to add one for today, I’m just going to export that. Once it’s ready just click on the “Download your zip file” button, and that’ll allow you to save it to wherever you want. I’m just going to save it to my desktop, I’m going to unzip that by double clicking the zip file, and then I’m going to open up the folder. There’s a preview HTML file that we can use, so I’m just going to double click that and that’s basically going to give us a preview of what it looks like on large screens and also on mobile as well. If you need the actual email files, they’re just inside of this folder; you can see inside here we’ve got our HTML file and that’s what it looks like. All the images are in there and this is all the HTML, that’s production ready HTML, that’s ready to go.

I think that’s going to be it for today, I really just wanted to focus on the custom table or create Figma tables from spreadsheets or Google Sheets, or Excel (XLSX) files, or CSV files; whichever spreadsheet format you prefer, and just show you how easy it is to really quickly import those spreadsheets into a Figma table that will then be rendered out as HTML from your Figma email designs. I hope you found that helpful if you’ve been wondering how to automate your Figma table creation process, specifically for HTML emails in Figma; this is going to be the quickest way to do it, and allow you to customize it really quickly by using the component based structure that gets created on this other page over here. I’m going to leave it there for today; thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.