Sync component variants in Figma from a spreadsheet using CopyDoc

Video Transcript

Today I’m going to be showing you a quick tutorial on how to sync component variants in Figma from a spreadsheet using the CopyDoc Figma plugin.

To get started, all we need to do is go to our little actions icon down at the bottom here and click on that. If you search for CopyDoc under the plugins tab, click on the CopyDoc item. You can either run the Figma plugin by clicking on this little “Run” button here, or I’d recommend clicking on the “Save” icon that’s usually here. That will save it to your Figma plugins list.

I’ve already clicked on the save icon, so I’m just going to close this off and go to my canvas. Right-click anywhere, go down to “Plugins”, then go down to “Saved Plugins”, and click on the “CopyDoc” item. That’s going to run the Figma plugin that we saved a moment ago.

Shortly, we’re going to be using this Sync Content feature over here to import this spreadsheet file that I’ve just set up in Microsoft Excel. We’re going to be syncing a few different music artists and covers, along with swapping out a genre tag that we’re going to create as a Figma variant-based component right now.

Before we do this syncing step, I’m going to help you set up this frame here, turn that into a component with variants in it, and then show you how we can automatically sync that up with different values from our spreadsheet into our Figma designs.

First things first, we just want to convert this frame into a component. I’m just going to right-click on that and click on Create Component. What I’m going to do is name this as “Tag” because it’s going to be this little genre tag. We’re going to populate that into our spreadsheet up here. We’re just going to add the word “Tag” into our header to match up with this original layer. That’s going to be our first step.

Next, take this existing component here, right-click on it again, go down to “Main Component” in the options menu, and this time click on “Add Variant”. You want to click on this little Add Variant option. What that does is convert that component into what Figma calls a component set. A component set is just a collection of nested components.

You can see here the name of the component is still “Tag,” but now we have these variants. We’ve got a Default variant and this other one called Variant 2. You can keep adding more variants to this component by clicking on this little Add Variant icon down here. That allows you to create variants of the same component with slight differences.

In this example, I’m going to populate it with a few more genres. We’ve got a few music genres here, these are all electronic genres. I’m just going to show you how to customize this, and then we’re going to use these variants to populate our design and automatically set the variant via the spreadsheet to swap those.

Don’t worry if this doesn’t make sense right now. Everything’s going to be clear in just a moment.

What we’re going to do is quickly style up these variants. I’m going to make them different colors just to make it easier to see what they look like when we swap them out. I’m just going to give them a few different colors, totally random, just to add those in.

Now that we’ve got our component set ready to go, we just need to make a few more tweaks. You’ll notice over here in the Properties panel we’ve got these default properties: Property 1, then Default, Variant 2, Variant 3. This kind of matches up with these tags over here.

What we want to do is take the name. Click on any of the variants inside of your Component Variant Set, for example, click on the Default variant, and you can see over here we’ve got this thing called Property 1. We’re going to rename that to “Genre” because in this use case we’re creating variants for different genres. You can call that whatever your variant is based on, it might be a title, an image, whatever you like, but I’m going to rename that to Genre.

Then we go through each of these variants and change the property names. You can see here we’ve got Default, Variant 2, Variant 3, Variant 4. We’re going to change these to match up with our genres. I’m going to call this one Synthwave, this one Vaporwave, and I’m just going to copy-paste that text into the variant name over here. Go through those one by one and rename them.

You could technically leave them as Variant 3, Variant 4, as Figma names them, but that might be a little bit confusing if you’re going to be populating your spreadsheet with these variants. You probably want to have a better idea of which one is which.

Now that we’ve populated those variant names, that’s all ready to go. We can now use this component. The way to do that is just to go to your Assets panel over here. You can see it’s showing the components we have available on this page. I’m just going to drag and drop this Tag component that we created, and that’s going to create a new component of that component set.

Now if we click on this component, we’ve got access to the Genre and those variants. We can swap them out manually using this little dropdown list, but what we want to do is sync this up automatically.

I’m going to create four different screens. I’ve got this little frame design here in Figma, it’s nothing complicated, just a frame with a few different layers in it. I’m going to create a few copies of that and drag and drop this little Tag into these components. I’m just going to copy it, paste it in, and put it wherever I like. You can have them all the same or put them in different spots, whatever you like.

Once I’ve finished doing that, we can go back to our spreadsheet and import these into Figma.

In my spreadsheet, I’ve got a few other fields. I’ve got my Tag field, which is the layer we just created here. That’s going to match up with these layers we just added. I’ve also got a field called Cover, which matches up with this image layer here. These are all named the same, #Cover. Underneath that, I’ve got links to JPEG files. When we sync this up, it’s going to swap out these images as well.

Also the Album and Artist, if I zoom in, we’ve got #Album and #Artist on the text layers. That’s what that looks like. That’s the Figma structure.

Now we’re going to sync up these variants. The way we do that is by double-clicking on the original variants over here. Go back to your component set and click on each of these layers, double-click on the layer name. You’ll see it changes to this format: Genre=Synthwave (which means “Property=Variant”).

That only happens when I double-click on the layer, it’s sort of this hidden naming that Figma has. You want to double-click the layer, copy that layer name, and paste it into the spreadsheet. I’m going to do that for all four of them and put them in different places.

You can see I’m just copying each of those names when I double-click on the Figma layer. For example, “Genre=Outrun”, that’s the Figma variant property and the value of that property. The equal sign is added by the Figma app, that’s just the way Figma does it.

Now that we’ve added those, you can see under my Tag column in the spreadsheet that these are all named #Tag, just make sure the layer name matches what you’ve named it in your design.

Now that we’ve got all of those synced up, we’re going to click on the Sync Content button in the CopyDoc Figma plugin. Make sure the Content tab is selected. Then drag and drop the Excel file we saved into the drop zone area here. You’ll notice it picks up all of those columns: artist, album, tag, and cover. It gives a little preview.

Now highlight the frames you want to sync up. I’m going to highlight all four frames. It’s probably easier to just drag your mouse over them. With those four selected, you’ll see it says four layers selected. We’re going to sync them in order from left to right.

Click the “Sync Rows with Layers” button and let that finish. I had to double-click the button twice because I think the images weren’t quite loaded the first time. But when I clicked that, it automatically went through and set each of those component variants to a different value based on what we set in our spreadsheet.

You can see we’ve got different labels based on each of the rows we set, and it went through one by one. It added those in the same order they appear in our spreadsheet. You could have many more of these if you want to do a big sync and update all different component variants, but in this case I just wanted to keep things simple and show exactly what it looks like.

That’s basically it. I wanted to walk through each of those steps. If you weren’t familiar with how Figma component sets work and how variants work, this is hopefully a bit of an intro to that concept, while also showing you how to populate your spreadsheet file and get it ready to sync up those rows when you re-import it into Figma and automatically swap out the component variants based on those little labels we looked at in the double-clicked layer names.

That’s going to be it for today. I’ll leave it there and hopefully keep things fairly simple. Feel free to play around with this in your own designs.

If you’ve been using Figma component variants and wondering if there’s an easier way to sync up a large number of them using a spreadsheet, you can now do that using the CopyDoc Figma plugin and the “Sync Content from Spreadsheet” feature.

Lastly, you can use different options. In this case I used a local Excel file, but you can also use a CSV file or a Google Sheets URL. If you wanted to paste in a public Google Sheet URL, you can do that and have it in the exact same format we just went through. Or you can use Airtable if you’re using that platform as well.

Again, thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.