How to sync a folder of images to Figma layers with a spreadsheet using CopyDoc

Video Transcript

Today I'm going to be showing you how to easily import a bunch of image files from your computer directly into your repeatable Figma layers in your design in Figma, along with any text content that you also want to add.

We're going to be able to do this without having to first upload those images to a server somewhere, and you'll be able to import those image files directly from your computer using the CopyDoc Figma plugin. To get started we just need to install the Figma plugin by going to the "Resources" icon at the top of your Figma file, if you click on that and then search for "CopyDoc", under the "Plugins" tab you'll see CopyDoc pop-up, and all you need to do to run it is either click on this "Run" button here or you can click on this little "More options" icon and just hit "Save plugin" and that will save it to your Figma plugins list for easy access later. I've already gone ahead and done that; I'm going to right click on my canvas, I'm just going to go down to "Plugins", then I'm going to go down to "Saved "Plugins", click on the "CopyDoc" option and that should just open up the Figma plugin we just saved a second ago.

To get started, all we need to do is first make sure that we've got our component or our rows in our Figma file that we want to sync content to. In this case, I've got this little movie card and this is going to correspond to a spreadsheet that I've got set up in Excel. You can see here I've got three columns, I've got an "#Image" column, I've got a "#Title" column and a "#Genre" column; and you can see on the first row of the file these are my headings or my row label for those different content pieces, and these correspond with my Figma file. If we go to our Figma file we've got this little simple component and you can see here that we've got three layers: we've got an "#Image", layer, a "#Title" layer and a "#Genre" layer; these two are text layers and this one is just a rectangle layer. You'll notice that the layer names are identical to the names of our header in the spreadsheet file, and this is important, because it's going to tell the Figma plugin which bits of content we want to sync to what layer. In this case you can see that the image layer is matching up with this column, our title layer is matching up with this text layer, and the genre column is matching up with this text layer here.

In this case, I'm going to be syncing up these bits of content with these designs here, and let's just add one more so I can show you how I got that image Link in there as well. I'm just going to copy this layer here, and it's kept our name, so we've got the same layer names in our instance here, and what I'm going to do is add one more movie to sync up in this file. What I'm going to do is I'm going to go to Google, I'm going to go to Google Images, and I'm going to search for another movie; let's do "The Menu" movie and we'll just search for the poster. You can click on any of these results, and what you want to do is basically find the image that you want to use, and in this case we're going to save it to our computer; we're going to right click on the image, we're going to click on "Save image as" and then we're just going to save it to a folder that we've got our images in. You can name the image if that's easier, so we can do "the-menu-poster.jpg", and I've just saved that to my images folder that I've got set up on my desktop, and you can see here that we've just saved it as this image here. If we open that up, you can see that's now on our computer.

What we want to do is we want to take that image name and we want to copy it into our spreadsheet. I'm going to copy it under my "#Image" row and just paste it into the fifth row there, and then I'm going to give the title a name; I'm going to give it a name of "The Menu" and then I'm just going to categorize it as a "Comedy". That's basically now pointing to this image file that we've saved in our "images" folder here. You'll notice that the spreadsheet file is saved here, so we've got our "movies.xlsx" spreadsheet file and then I've created a second folder next to it called "images", and I've put all of the images that I'm referencing in my spreadsheet into that folder now. You don't have to put them into a subfolder, you can just have them sitting alongside the spreadsheet, but just to keep things easier and neater if you just organize them into a folder, that's going to be easier to manage.

Now that we've got our "images" folder and we've got our spreadsheet completed, what we're going to do is we're now going to create a zip file containing all of these files. What we need to do is select our "images" folder and our "movies.xlsx" spreadsheet file, and then you just want to right click on both of those files and click on "Compress"; that's going to create a new zip file, and inside of that zip file contains the spreadsheet and this folder full of images. You can call that zip file whatever you want, it's just called "Archive.zip" in this case, but it doesn't really matter what you call the zip file.

Now what we can do is we can go back into Figma, and we're going to click on this little button here called "Sync Content"; next to the sync spreadsheet content option, just click on "Sync Content" and that's going to bring up this little pop-up window in the Figma plugin here. It's going to tell you to either drag and drop an Excel (.xlsx) file or a CSV (.csv) file, or a zip file containing either a CSV (.csv) file or an Excel (.xlsx) file along with any images that you might reference in that spreadsheet. In this case we can drop in the zip file that we just created, so I'm going to drag and drop that "Archive.zip" file from our folder and I'm going to drag and drop that directly into this little drop zone in the CopyDoc Figma plugin. You can see here it's automatically opened up the zip file in our Figma plugin and it's got a preview of the spreadsheet columns that we've used. You can see that we've got our image, title, and genre; and you can see down here that if we select the Figma layers we want to sync, I'm just selecting the top level Figma layers here that we want to sync, and what that's going to do is it's going to repeat through those four different Figma layers.

You can see here it's got four layers selected, and it's going to sync the content once we click this button. You can choose the order that you sync it, and this will change the order based on different properties in your Figma layer names or position; in this case, I'm just going to keep it really simple and go "Top to bottom" as far as the rows go, and then all you need to do is click on the "Sync Rows" button; I'm going to click on that now and you can see it's updated content for 12 different Figma layers.

Just to go over what that's done, is has basically gone through each of these spreadsheet rows, it's gone through two, three, four and five, using the first row as the label. It's basically looking for any Figma layer names that match this spreadsheet heading label, and as we had a look at before this "#Title" layer has been replaced with the content from this cell here, and then we've got "Comedy" which is being swapped into the "#Genre" layer, and importantly we've got our image which we've labeled as "#Image" and that's now using the image name, and that image name matches the image file that we included in our zip file, and that's how it was able to read those images and automatically paste them or create them in these different Figma layers that we had.

That's what that looks like there; the other cool thing you can do if you don't want to sync a bunch of existing Figma layers is, the alternate thing you can do is also generate a table with the data that you've already uploaded. If you instead wanted to create a brand new table for example, you can do that by clicking on this "Generate Table" button and that will also just generate a Figma table for you as well. That's just a new separate Figma layer you can modify that however you want, and it basically just takes whatever layout you've got in your spreadsheet here and it automatically pops it into here in Figma. For example, you can see here we've got our image row, and if you need to change the dimensions of that you can just change the component level one up here; we've got our "Header" component, and then these are just rows which are instances as well. You can actually just go ahead and hide that row if you want as well.

That's basically it, I just wanted to give you a really stripped down simple example of how to sync image layers directly from your computer into Figma layers, and this is really handy if you don't want to go through the trouble of uploading your images somewhere first; if you've watched a previous Figma tutorial, you know that you can also include URL image links. If you wanted to paste in an image URL of an image that's already online somewhere, you can definitely do that; you can actually paste in that whole URL, so instead of saving the image, you could just copy the URL of that image, paste that in here and that would automatically download the image through the Figma plugin. In this case, we're just using local images that we've already got, so this is going to be much faster, as it doesn't have to download all the image content each time; you've already got it in your zip file, and it also just makes it easier taking out that middle middle step of uploading your images somewhere else first.

I think we'll leave it there for today; I hope that's been helpful if you've been wondering how to sync local images really easily with your content in Figma, then using this CopyDoc Figma plugin is going to be a really easy way to do it. Feel free to have a go yourself and I hope it works out for you or your team if you are automating your content process using local images like this. As always, thank you for watching and we'll be back soon with more Figma tutorials like this one very soon.