Video transcript
9-minute video ·
Today, I’m going to be showing you how to automatically sync SVG icons or SVG images from a spreadsheet directly into your Figma layers automatically using the CopyDoc plugin.
So, to get started, all we need to do is go to your Figma file, click on the little “Resources” icon up here, and then just search for “CopyDoc”. Under the “Plugins” tab, if you click on the CopyDoc result, you can run the plugin by either clicking on this “Run” button here, or I’d recommend clicking on this little “Save” icon here, and that will save it to your Figma plugins list for easy access later. I’ve already saved it to my Figma plugins list, so I’m just going to right-click on my canvas, go down to “Plugins,” then go down to “Saved plugins,” and click on CopyDoc. That’s just going to run the plugin we saved a second ago.
If you’re new to the plugin, it has a bunch of different features, and I’m not going to be going through all of them today. If you’re interested in some of the other features, there are more YouTube Figma tutorials on the channel. Just find the CopyDoc playlist, and you can check out videos for those. But for today, I’m just going to be focusing on this sync spreadsheet function down here.
So, what this is going to allow us to do is swap out the content of our layers here automatically from a spreadsheet like this Google sheet here or an Excel file, which I’ll show you later as well, and automatically import that content along with these Vector icons into our frames here.
All we need to do to get started is click on this little sync spreadsheet button down here. Then, what we can do is either upload an Excel file or a CSV file or paste in a public Google sheet link. I’ll show you the Google sheet link first, and then I’ll show you how to do the Excel file as well.
First of all, you just need to make sure that your spreadsheet or Google sheet is structured in this way. The first row is going to contain your header, and the thing you need to be mindful of is just the header names have to match up with the layer names in Figma that you want to sync. For example, we’ve got this header called “hash title,” and you can see in my Figma file here, I’ve got these three text layers, and they’re all named the same. It’s got “hash title” as the layer name for all those. Likewise, with my icons, I’ve just got a few frame layers. These are just Figma frames. You could use rectangles or other shapes as well. I’m just using a frame to keep it simple, and I’ve named each of those “hash icon” as well, which you can see matches up with “hash icon” in the header over here too.
So, as long as those are matched up in Figma and your spreadsheet, you should be ready to go. The next thing you need to do is just click on the share button up here in Google Sheets and then just make sure the general access setting is set to “anyone with the link can be a viewer” and then just copy the copy link button. Click on “copy link,” and that’ll copy the link to your clipboard. Then, all you need to do is go back to CopyDoc, paste in the link you just copied to your Google sheet and paste that into this input field here. That will automatically load up your Google sheet tabs. If you’ve only got one tab, as I do in this case, it’ll automatically just load in that first tab. Then, all you need to do is select the layers you want to sync.
I’m just going to select the parent layers, so I’ve got my top-level frame layers here. What this is going to do is it’s going to loop through each of the selected frames, find any layers inside of that frame that match up those names with our header names in the spreadsheet, and automatically sync the content. I’ll show you what that looks like here. You can change the order of the sync, so I’m just going to do sort the order vertically from top to bottom and then just click on the sync rows button. That’s basically going to download our SVG icons and sync them into the content in our Figma file.
You can see here that the contents from the spreadsheet have automatically been synced. The other thing to note is that you might have noticed the second row here has an SVG tag. So you can either link to an SVG file, so you can see I’ve got a link to an SVG path here that’s hosted on a website. And then the second option is just the pure SVG tag. So what that means is you could copy-paste the source code of an SVG file directly into the cell, and that’s automatically going to get rendered as an image as well. So if you don’t want to host the SVGs on an actual URL, you do have the option of just embedding the SVG code there as well. You’ve got the option to either provide a link or the SVG tag.
Our text content under the title heading has automatically been synced to all of our title layers that have been named with that same “hash title” layer naming convention. And then it’s also gone ahead and synced our SVG icons directly into these frame layers here. It’s important to note that those are getting synced as image fills. You can see here in the layer fill; it’s just getting added as a fill in that layer. So it’s not actually importing the vector data as a vector layer; it’s just importing it as an image, but it’s rendering it at obviously a very high resolution converted from that SVG, so they’re going to be very sharp.
So, that’s how you can do it from Google Sheets. And now that we’ve looked at that, if you’re interested in sticking around to see how to do this from a local zip file so that means you don’t have to upload the images if you just want to upload them directly from your computer. So if you don’t want to upload the images anywhere, you don’t want to use an embed tag, you just have a bunch of SVG files on your computer, you can add those directly into Figma through the Figma plugin as well.
The way we can do that is we basically just create a local Excel file or a CSV file, and you want to do the same naming convention. So we’ve got the title and the icon exactly the same as we had in our Google sheet, but you can see this time, instead of linking to the SVG files online or the embed tags, the file names themselves are just being included in these paths here.
So, the way this is going to work is we’re basically going to zip up these three SVG files, so the files that we referenced in our spreadsheet, and then we’re also just going to include the spreadsheet itself. So I’ve got the spreadsheet file, which we’ve got open here, and then the three files that we’re referencing, and we’re just going to select all of those and then right-click and click on compress. If you’re on Windows, it might be a different option to add it to a zip file, but you basically just want to zip up those SVG files along with the Excel file, create a new zip file here, you can rename that if you want to. So, we can call it “import-svg-for-copydoc.zip,” and that’s going to allow us to drag and drop this into our plugin in a second.
I’m just going to close that off. I’m just going to undo those updates from Google Sheets to revert it to what we had before without the content populated. So we’ve got our layers back to what they were initially. Now I’m just going to go back into the sync spreadsheet function again, and this time instead of using a Google URL, I’m going to drag and drop this ZIP file that we just created into this Drop Zone area here. Drag and drop that, and you can see it’s instantly loaded because it doesn’t have to download anything from the internet. You can see here it’s basically finding the spreadsheet data that we just uploaded from the zip.
Again, I’m going to select these three layers. I’m just going to click on “sync rows,” and you can see it’s automatically updated those layers from our spreadsheet, but this time it’s done it from our local zip file here. So that’s pretty cool if you don’t want to upload all of your images online, you can just have a folder full of SVG images and zip those up with your Excel file as I just showed you a second ago, and that’ll be good to go. You just drag and drop the zip file, and you can automatically upload that.
That’s basically it for this Figma tutorial. I just wanted to show you those two different methods of importing the SVG files to your Figma file automatically, either from a Google sheet using hosted SVG links or embedded SVG tags or using your local SVG files and zipping those up into a zip file along with a local Excel file spreadsheet. And of course, if you did want to also save this Google sheet out to a spreadsheet, so you could basically just download that to an Excel file here, you could also just manually drag and drop that Excel file into your Figma plugin Drop Zone area here, and that would be exactly the same as importing the Google sheet as well. So if you want to import a local copy with the hosted links and the embed tag, you can obviously do that as well. All you need to do is create a local copy of that in Excel, and that’ll be good to go as well.
I hope that’s been helpful if you’ve been wondering how to sync up SVG icons or SVG Vector layers from a spreadsheet into Figma. This is a really good way of doing it at scale if you’ve got dozens of frames or dozens of layers that have Vector icons and text copy that you need to update in bulk. This is going to be a really handy way of automating that process and having all the content and SVG assets and SVG icons all kind of stored in the one place in a spreadsheet that you can re-update as needed.
Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle