Sync XLSX Excel spreadsheet content to Figma using CopyDoc

Video Transcript

Today I’m going to be showing you how to sync content from an Excel spreadsheet dynamically into your Figma designs to populate multiple blocks of content.

The first thing we need to do is just install a Figma plugin called CopyDoc; if you go to the Figma Community and search for the word “CopyDoc”, and with the first result that pops up just go ahead and click on the “Install” button on the right-hand side, and once you’ve done that you’ll be ready to go.

Today I’m just going to be using a really simple example of a movie app, and what I’m going to be doing is syncing up our content from an Excel spreadsheet and dynamically populating these movie posters inside the app. The first thing we need to do is open up Microsoft Excel, or you could use a different spreadsheet software like Google sheets or something like that, but today I’m just going to be using Excel.

It’s important to understand how the spreadsheet needs to be formatted in order for this feature to work; it’s pretty straightforward, the first row of the spreadsheet is basically the headers that are going to be used to label the different bits of content in your design. For example, in my case with the movie app, we’ve got things like a “tag”, we’ve got “reviews”, we’ve got a “title”, we’ve got “minutes”, we’ve got a “poster”. Basically what I’m doing here is I’m labeling these headers with the name that I’m going to be naming my Figma layers.

If we jump back into Figma and jump into our design over here, you can see that I’ve already named these layers to match the headers from the spreadsheet. For example, with the “comedy” tag I’ve named that “#Tag” and you can see in my spreadsheet I’ve also got that named as “#Tag” as well; I know that’s a bit confusing hashtag and #Tag, but for example, we’ve got title as well. We can go down to here and you can see under the title; the title text layer has been named “#Title” with a hash in front of it and it’s exactly the same in my spreadsheet; that’s kind of cool because it means we can map these bits of content from our spreadsheet directly into our layers in Figma just by naming them the same, and then anything underneath that first row in your spreadsheet is going to be used as a content row that’s going to be populated into Figma.

If that doesn’t make sense, I’ll show you exactly what that means in just a moment. What I’m going to do is I’m actually going to duplicate this block or this component now that the layers have actually been named to match the spreadsheet, and I’ve also done that for the image; because I want this image to also be be dynamic I’ve named the image layer “#Poster”, and I’ve done the same thing in my spreadsheet as well; that’s going to allow us to not only do text layers but also do images.

I’m going to duplicate this component; I’m just going to copy that normally, paste it, and I’m just going to do a little grid layout here. I’m just going to do four blocks for now; all I’ve done is just copy that original component, and it doesn’t have to be a component, but in this case it’s just a component, and I’ve created three more instances and they also have those same named layers. You can see here they’re all named. Okay, that’s all set up now, and we have our content in here and I just want to really quickly show you how to get these images in there as well.

If we do another example I’m just going to do another movie; let’s do let’s do “Suicide Squad”. I’m going to put “Suicide Squad” in there and I’m just going to grab the image online and then I’m going to show you how to paste it in there. If we want a poster for our “Suicide Squad” movie, all you need to do is go to something like Google images, or you can go to another website, click on any of the image results and when you right click on the image after you’ve expanded it, just right click on that image and “click on the “copy image address” item in the in the right click menu. I’m going to click on that and then in your spreadsheet just hit paste, and that’s going to paste in the actual image URL. You basically want to add a direct link to the image and that’s going to get downloaded into Figma in a moment.

I’m just going to save that Excel file now, close off the browser, close off Excel, and now what we want to do now that we’ve got our spreadsheet set up and our Figma file set up is we want to right click anywhere on the page, go down to “Plugins” and click on “CopyDoc”, and that’s going to open the Figma plugin that we just installed at the start of the Figma tutorial. I’m not going to be going through any of these other features, I’m just going to be focusing on the “Sync Spreadsheet Content” feature for today; you can open that up by clicking on the “Sync Content Button”; it’s been opened up now and you can see here we’ve got an option to click or drag and drop an Excel file. I’m going to do that now, I’ve got my Excel file just sitting on my desktop that we just saved; what I’m going to do is I’m going to drag and drop that straight from my desktop directly into the Figma plugin in this little drop zone area, and I’m going to click on that or let go of the mouse and that’s just dropped the file in there.

You can see it’s giving us a little preview of what spreadsheet columns it’s detected in the spreadsheet; you can see all of our headers have popped up, and then it’s also showing the first row of content as a bit of a preview of what each of those looks like. That’s working perfectly, that’s exactly what we want to see, and then all we need to do is just click on the component and the instances of the component that we copied and pasted earlier. We’ve got all four layers selected here, and again, those don’t have to be components, they can just be groups or frames, but in this case we’re going to do components and instances.

I’ve got those four layers selected, and you can see in the plugin it actually doesn’t let you click the button unless you have at least one selected. I’m just going to click on all those four, and all I’m going to do is click on the “Sync Spreadsheet Rows with Figma Layers” button; I’m going to click on that now, and what this is going to do is it’s going to load in those images, it’s downloading those images that we specified in the spreadsheet, it’s going to render those into the file, and it’s going to update all the text. There we go, it’s just updated 24 Figma layers because we had four different blocks selected there. We had a few different things updating, and you can see here it’s swapped out all of our static “Avengers” blocks of content and it’s populated it exactly with what we’d expect to see from our spreadsheet.

You can see here row by row, it’s looping through the selected layers and it’s saying: “okay, for each layer that you’ve selected, I’m going to use one row from the spreadsheet, and I’m going to swap out anything you’ve named with the same layer name in Figma with these tags in the spreadsheet”. We can see that exactly happened here; we’ve got “No Time To Die”, “Dune”, “Black Widow”, “Suicide Squad”; it’s just going through each of those and swapping out those layers. For example, in our minutes layer you can see here it’s swapped out the minutes because our layout was named “#Min”, and same thing for the reviews and the posters.

It’s as simple as that; you can use this for populating lists, grids or any repeatable content it’s perfect for. It just saves you having to manually go through each layer time after time to copy and paste content over and over again. If you can get away with filling out a spreadsheet first, this tends to be much easier to maintain for large sets of content or repeatable content. That’s basically what it looks like to swap out the dynamic content from an Excel spreadsheet into Figma.

If you’ve been wondering how to do this, or been struggling with handling large sets of repeatable content, this might be one option for you. If you’ve been interested in something like this, I hope the Figma plugin can help. Thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.