Video transcript
8-minute video ·
Today I’m going to be showing you how to sync placeholder merge tags in your Figma text layer content with data from any spreadsheet using the CopyDoc Figma plugin.
To get started, all we need to do is go to our Figma file, click on the little actions icon at the bottom here, and then search for CopyDoc. Under the Figma plugins tab, if you click on the CopyDoc item, you can run the Figma plugin by either clicking on the run button down here, or I’d recommend clicking on the save button next to that, which is going to save it to your Figma plugins list for easy access later.
I’ve already clicked on the save button, so I’m just going to go to my Figma canvas. I’ll right click anywhere, go down to Plugins, and then go down to Saved Plugins and click on the CopyDoc item. That’s going to run the Figma plugin that we saved a second ago.
You’ll notice in our designs, we’ve got these different text layers with these placeholder merge tags. You can see we’ve got placeholders for name, minutes, username, country, and we’ve also got an Excel file over here, which has those same names as the column headings for all of these rows. As you can see, we’re naming these headings in the spreadsheet to match up with these placeholder merge tags in our Figma text layers, and then we’re going to automatically sync each of these rows with each of these layers using the Figma plugin sync feature.
I’ll show you how to do that now. We just have to go to the Figma plugin and click on the sync content button. Then you want to choose where you want to sync the content from. You can do it from a CSV or Excel file, a Google Sheets URL, or an Airtable URL.
Today, I’m going to keep it really simple and use an Excel spreadsheet file, which is an Excel XLSX file. I’m going to take this spreadsheet that I’ve created, drag and drop that into the Figma plugin, and you’ll see we get a little preview of what the spreadsheet content is. It’s matching up exactly with the spreadsheet here.
You’ll notice I’ve also added an extra column called artwork. I’ve named each of these Figma layers with an image fill to match up with that. That’s basically hash artwork, and you can see that’s matching up with this. It’s containing some links to image URLs, and those are going to get synced up as well.
Now that we’ve got all of our layers selected, all you need to do is highlight all of the frames that you want to sync up. In this case, I want to sync up each of these design frames, which contain my text layers. We’re going to click on the sync rows with layers button up the top here. I’m going to click on that now.
You’ll notice it’s gone through and updated all those layers. It’s quite quick. You can see it’s swapped out those placeholder merge tags we had in our designs and updated them with the content from our spreadsheet. For example, it swapped out the username, the country, the name, and the minutes formatted as well. It’s also swapped out the artwork and added each of those images as the image fills for those layers.
To go through what that just did, I’m going to undo those updates with CMD + Z. You can see here before it updated, the format that we’re using is the hash symbol, then open curly bracket, then the name of your column, and then close curly bracket. You can use this format for any values that you want to sync up from a spreadsheet. You just put those into your spreadsheet content.
For example, we could add this multiple times. If we wanted to add name twice for some reason, we could do that. Then if we synced that up just with this one layer this time, you’d see that it swaps out that variable twice. Anywhere you put that variable, it’s going to swap out those merge tags with the content from your spreadsheet.
You can also do this by automatically repeating layers. Let’s say we’ve got this design over here and we don’t want to sync up all six of these. We just want to take this one and automatically repeat it the number of times that we’ve got rows in our spreadsheet. You can click on the frame, make sure you’ve got the auto repeat toggle turned on, and then once you’ve got that single Figma layer selected with the auto repeat toggle enabled, you can click on the sync and repeat selected layer button.
That’s going to go through and automatically take that layer and sync it with all of your rows from the spreadsheet. You can see here, it’s taken our original layer, which we’ve still got, copied all of those into this new frame called CopyDoc row sync, and inside that, it’s updated all of those rows with the contents from our design. It’s taken all that same content, automatically repeated it in each of these copies of that frame, and now you’ve got a completely automated content workflow for these placeholder merge tags.
Those are the main two options that you can use. Finally, I just wanted to quickly touch on the fact that the regular functionality also still applies. If you’ve used the Figma plugin before, you’ll know that you can typically use the naming conventions to swap out entire text layers.
For example, I could put in placeholder content here, and then if I rename the layer itself, in this case, I might want to use the username, I’m going to copy that into my Figma text layer name. That’s the actual layer name rather than the content. What I can do now is click on that layer, turn the auto repeat off, and sync up this one selected layer.
You’ll notice here I’ve got my username, and this is going to get swapped out with the username here. I’ll show you what that looks like. If I click on that layer and then on the sync rows with layers button, you can see it’s gone in, found that matching layer name, matched the layer name with the username heading, and swapped out all of that content with this username. It’s also found the other layer here which isn’t named, and it’s looking for those variables that we set up a moment ago and swapping those out.
That’s basically the alternate way you can update layers. But in this tutorial, I’m assuming you’re already familiar with the layer name version. This is just showing you how to update content inside of a text layer if you need to have multiple bits of dynamic content swapped out while leaving other text alone. That’s a really good option if you need that kind of workflow.
Otherwise, if you know you’re just going to update the entire text layer content, feel free to just use the naming version where you name the Figma layer name to match up with your spreadsheet headings, and that’s going to automatically update that content for you as well.
That’s it for today. I just wanted to run through that new feature in the Figma plugin which now allows you to update inline placeholder text merge tags. That’s going to be really helpful if you’ve got workflows where you need to update content in multiple places in the same text layer, in multiple elements for your frames, that you can now sync from the spreadsheet rows.
Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one in the near future.
Pro Bundle