Sync CSV spreadsheet content to Figma using CopyDoc

Video Transcript

Today I’m going to be showing you how to populate your Figma designs from content in a CSV spreadsheet file using the CopyDoc Figma plugin.

The first thing we need to do is just jump into the Figma Community and search for “CopyDoc”, and when the first result pops up under the “Plugins” tab you can just go ahead and click on the “Install” button on the right hand side and that will install the Figma plugin and you’ll be ready to go.

I’m just going to jump back into my Figma design and today I’m going to be using a movie application just to demonstrate how we can dynamically populate this movie poster block using content that we’ve populated in a CSV spreadsheet file. Before we open up the Figma plugin that we just installed, I’m going to jump into my Microsoft Excel spreadsheet; you can use other applications for this, if you want to use Google Sheets and save that as a CSV you could totally do that, or using the Mac “Numbers” app as another spreadsheet app and save it as a CSV, that’s fine as well; for today I’m just going to be showing you how to do it in Excel, but the format will be the same regardless.

The format we do need to use is fairly simple and it’s going to be the same for your own content as well; the main thing to know is that the first row of your spreadsheet is effectively your header, and the header is going to be used to name your columns, and that’s going to be used to map that content back into your Figma file; what I mean by that is you can see here for example this column header is named “#Title” and in my Figma design if I switch back into that, you can see here in my little movie poster component I also have a text layer with the same name. I’ve got “#Title” in my Figma layout, so that’s the Figma text layer and I’ve also got my column name the same, so it’s “#Title”.

The same thing is true for the reviews; in here I can see I’ve got a text layer with “#Reviews” and also in this image layer. I’ve got a poster, this movie poster layer which is an image in Figma and I’ve named that image layer also “#Poster” which matches up with the “#Poster” column in my CSV spreadsheet. What that means is we’re going to actually automatically swap out that image dynamically in a minute when we run the Figma plugin, and it’s going to automatically swap in this image content into our Figma design.

To show you what that looks like if you do want to add your own images, it’s fairly straightforward, you can either upload the images somewhere online on your own website and get your own link for your own images, or if you just want to grab something like a movie poster for example, you can just go to Google images, search for the image you want, open it up, and then in the image preview, just go ahead and right click on that, and then click on “Copy image address” and then back in your spreadsheet under your image column, whatever that happens to be, you can just paste that in there and that will paste in a URL to the JPEG image. The Figma plugin will automatically pick up on the link and if it’s an image layer, it’ll automatically swap that into Figma later. You can go ahead and just populate the rest of these; for example, I’m going to use the “Suicide Squad” movie for this latest row and I can just populate that the same way and now we’re ready to go; our spreadsheet is all done now, this is the format that you can use for your own content.

I’ve got four different movies that I want to add into my app, so now that we’ve got our CSV spreadsheet structured correctly, just make sure that you are saving it as a CSV, if you go to “File”, “Save as”, and then under the “File Format”, you just want to make sure in whatever app you’re using that “.csv” is selected; and you can just go ahead and save that to your desktop or wherever else is easiest. If it gives you this little warning, that’s fine, it’s just trying to get you to save it as a Microsoft Excel file; I do have another YouTube tutorial using that file format, but for now we’re just going to ignore that and use the CSV file.

I’m going to jump back into Figma now and I’m going to run the Figma plugin that we just installed a minute ago by right clicking anywhere on the page, going down to “Plugins” and then clicking on “CopyDoc”, and that’s going to fire up the Figma plugin that we just installed. I’m not going to be going through any of the other features in this Figma plugin today, you can check out our other YouTube tutorials for those; today I’m just going to be focusing on this brand new feature called “Sync Spreadsheet Content”.

You can open that up by clicking on the “Sync Content” button in the Figma plugin, so I’m going to click on that now, and you can see here it’s got an option to sync a CSV file. What we’re going to do is we’re going to grab the CSV file that we just saved to our desktop over here, and I’m just going to drag and drop that file directly into this little drop zone in the CopyDoc Figma plugin. I’m going to let go of the mouse now, drop that in, and you can see it’s instantly loaded up my spreadsheet columns from the CSV file, and it’s giving me a preview of the headers; the headers of these little bold tags that it’s pulling in the first row from our spreadsheet, and then it’s also pulling in the second row from the spreadsheet content to give you a little preview of what each content might look like just to sort of show you what each of these relates to.

Okay, now that we’ve done that, the last thing we need to do is just duplicate our original Figma layer. I’m using a component but you can use other groups as well; you could use a frame or a Figma group today I’m just going to be copy pasting this component into three new instances of the component; I’m just copy pasting those normally and moving them around and because these are copied instances, just to confirm you can see here the naming of those text layers and image layers are importantly still named the same as our spreadsheet headers over here.

Now that we’ve copied those, that was kind of the last step, and all you need to do is now select those Figma layers; you can see in my left hand side here I’ve got all four of those layers selected and now in our Figma plugin you can see it’s telling us we’ve got the four selected layers. What I’m going to do now is just click on the “Sync Spreadsheet Rows with Figma Layers” button; I’m going to click that, and what that’s going to do is it’s going to go through and download all of those high resolution movie posters, it’s going to swap that in to all of our Figma layers and also update all the text. That’s done now, you can see it’s told us that it’s updated the content for 24 different layers in Figma, and it’s looking really good. We’ve got our dynamic posters, so instead of just having it all the same, it swapped it out without content from the CSV spreadsheet.

We can verify that just by having a quick look, and basically the way it works is it loops through each of those selected Figma layers and then also loops through at the same time each of these rows; for each selected layer, it will use the data from one row and it will automatically swap out any matching layers it finds with these header labels, and that’s exactly what it’s done. You can see we’ve got the “No Time To Die”, “Dune”, “Black Widow” and “Suicide Squad” all swapped out, all the minutes are swapped out, all the reviews are swapped out, the tags are all swapped out, and of course the images have all been replaced.

That’s basically it; it’s fairly simple once you figure out the structure, once you get an idea of how the spreadsheet’s meant to be set up just like this. You can use this format in your own CSV spreadsheets to sync with Figma as well, but once you’ve once you’ve mastered that, it’s a really simple process. You can use this feature as much as you want to update any kind of grids, lists or any sort of repeatable content; it’s very, very useful for that.

If you’ve been wondering how to sync repeatable content from a CSV spreadsheet into your Figma design designs this is a really, really simple way of going about it; and unlike another tutorial with the Google Sheets, this is all local to your computer as well. If you work at a company that doesn’t let you use Google Sheets or something like that, which is this other feature down here, then maybe the CSV option is going to be more to your liking.

That’s it for today; I just wanted to keep it simple as possible and as short as possible. Feel free to use this CSV spreadsheet sync feature in your own Figma workflow, or with your own team, if you’ve got a bunch of copywriters on your team and and need to do some efficient content updates, then this might be an option for you to try out. Thank you as always for watching, and we’ll be back back soon with more Figma tutorials just like this one very soon.