Video transcript
12-minute video ·
Today I’m going to be showing you a Figma tutorial on how to create advanced merge tags in our spreadsheet content, which is going to allow us to reference dynamic content between different rows in our spreadsheet. And then we’re going to be able to import that content into our Figma designs automatically and also do things like rename layers and update text and things like that. Bear with me if you’re a little bit confused about what that means. I’ll show you how to do this in just a moment.
The first thing we’re going to do is go into our Figma file and go down to our actions item down here. Click on that actions button, and then if you search for the word “CopyDoc” and click on the CopyDoc item under the Figma plugins tab, you can run the Figma plugin by either clicking on the save icon down here or clicking on the run button down here. But because I’ve already clicked on the save icon, I’m just going to go back to my Figma canvas, right-click anywhere, go down to Plugins, then go all the way down to Saved Plugins, and click on the CopyDoc item. That’s going to run the Figma plugin we saved a second ago.
The plugin has a bunch of different features that I’m not going to be covering in today’s Figma tutorial. Today we’re just going to be focusing on this Sync Content From Spreadsheet feature down the bottom here. This is going to allow us to take a spreadsheet, either from an Excel file or a Google Sheet, and take all of this content and automatically repeat it into our Figma file without having to manually update all of our text layers or manually rename the layers.
To get started, we’re first going to set up our Figma file to match our spreadsheet. I’m going to run through this in detail, just so you can see exactly what we’re going to be doing.
The first thing we want to do is name our frame based on what this content is here. What I want to do is, instead of having this frame called “login page,” I want to change this to automatically get renamed by our spreadsheet data. I’m going to make sure the name of my heading column up here matches the name I want to rename in Figma. In this case, I’m going to rename this login page frame, and I’m going to call it #Frame. I’ve got a little hash symbol there and “frame,” matching up with the header over here.
Then what I want to do is also rename or update some of this text content as well. For example, I can jump in here, and if I rename this text layer to match this heading over here, which is #firstName, if I rename that layer, this is automatically going to swap out that content when we sync it up in a moment.
Finally, we can also do something new, which I’ll be covering in this Figma tutorial. We can use this item over here. In this case, I’ve called this column “#Headline” and I’m going to copy that layer name and go down to this text layer over here and rename that one “#Headline.” We’ve got this one called “#Headline”.
And then we’ve also got a text layer down here, which I’m going to show you one last use case for. You’ll notice I’m covering a few use cases that we’re going to run through in more detail in a moment. In this one, I’m going to do a special little tag here, and I’m going to call this one #{firstName}. You’ll notice I’ve used the syntax that we’ve also used in our spreadsheet over here.
To explain what that does, it’s basically a placeholder or merge tag. When we use this special syntax of a hash, then a curly bracket, then the name, then another closing curly bracket, that’s going to always reference a column name. You can see we’ve got “Frame,” “#firstName,” “#lastName,” and #Headline.”
I’ll show you what this looks like now, but it’s going to automatically swap out the first name and last name with the values from the same row. If I go to my Figma file and click on the Sync Content button down here, I’m going to click on that now.
Now that we’ve set up our file the way that we want, I’m going to save that. I’ll just remove this for now so we can run through that in a moment. Once you’ve saved your Excel file, or if you’ve got a Google Sheet you can paste that in as well, I’m going to drag and drop my Excel file from my desktop over into this little drop zone area down here. You can see that’s loading a little preview. It’s showing us exactly what the content of our Excel file is in the Figma plugin.
What we can do is a quick example first with just one layer. I’m going to click on this frame layer. You’ll notice that all the layers have been updated in the various layers to what we want. If you pay attention to what’s going to change over here once I click on the Sync Rows With Layers button, you’ll notice that the content is updated.
A few things have happened here. I’ll walk through what actually happened when we clicked that button.
You’ll notice that the frame, which we previously had named #Frame, has been replaced with the first row of content. Because we used these special variable merge tags, it’s automatically grabbing the first name and last name values from the same row and inserting those dynamically into those little merge tag placeholders. In this case, you can see that the frame has been updated with “Frame - Adam Alias.” Instead of “Frame - #{firstName} ${lastName}” with the brackets, those brackets are being swapped out with the real content from the same layer.
Likewise with the headline. You’ll remember that we named this layer over here #Headline, which has still got the name there. You can see it has swapped out the content dynamically. Again, it’s used those variables from the same row and swapped those into the content here. That’s automatically getting swapped out too.
You’ll also remember that we used a special bit of placeholder content here as well, exactly like we did in our spreadsheet. Along with using these in your spreadsheet, you can also use them in your Figma content, so that when you update the content, so you’ll remember that we had it set to this: #{firstName}. What that’s done is it has checked for any layers in your frame with that little variable and then swapped out that content with the content here.
If I undo my manual update there, you’ll see that when I undo that, it has automatically gone ahead and swapped in that value again, taken from the first name there.
The other cool thing that we can do, if we just undo those changes to go back to what we had a second ago, you’ll notice I’ve reverted it back to the placeholder content, if we wanted to automatically take this frame and loop it based on the number of rows in the spreadsheet, we can optionally do that as well.
If you click on the Auto Repeat toggle here, you’ll notice the button has changed to say “Sync and Repeat Selected Layer.” I’m going to click on that button now that we’ve enabled the toggle. If I click on that, you’ll notice that it has gone ahead and looped that original frame. It has kept the original frame over here and created a new frame with a bunch of different copies of the frame. You’ll notice that all of the rows have been repeated and their content swapped out dynamically.
In this case, we’ve just got four rows, so it has duplicated that frame four different times and swapped out the content for each of those rows automatically. That’s pretty cool.
The other thing we can do, to show you a more advanced use case, is delete this layer here and go back to my spreadsheet. The other thing we can do is enhance this even further by specifying exactly what number row we want the content to be pulled in from dynamically.
As a quick example, in this case, if I want the Elbert row, so I’ve got the first name of Elbert, and if I don’t want it to automatically use the last name from the same row, I can add a special syntax, which is the dot symbol and then the row number of the spreadsheet. In this case, it’s going to reference row number two, which is going to use the last name “Alias.”
If I add that to my field over here as well, I’m going to do .2, and then I’ll do the same thing for my first name. Let’s say I want to swap out Adam for Michael. I can add .3 to my first name up here and do the same here. If I save that, we should now see what that looks like when we re-import the spreadsheet.
I’m going to drag and drop the Excel file that we just updated back into the Figma plugin. You can see here in our preview we’ve got the first name with the .3 and the last name with .2 for rows one and three. I’m going to click on that frame again, and with Auto Repeat still selected, I’m going to click on the Sync and Repeat Selected Layer button.
You’ll notice when I check out the updates, if we zoom in here, we can see that the changes have worked as expected. Just to run through what we did: we changed the first name placeholder merge tag in the first row here, which was previously set to Adam. We wanted to override that dynamic content to instead point to row three, which is Michael. As you can see, it has gone ahead and done that correctly. It has swapped out Adam for Michael. It’s done that in the layer name as well because we used that for the layer naming syntax. You can see it’s called “Michael Alias.” It has swapped out the first name and left the last name as the current row.
Similarly with this frame down here, we specified that the last name should change. Instead of “Woo,” it should be changed to “Alias” because we used row two. Row two has a last name of Alias. It has swapped out that content as expected. It has done the same thing for the frame name as well.
This is a really handy way of specifying overrides. If you want to pull in content from a certain other layer, you can do that by adding this little dot syntax, and it will work as expected.
That’s basically the rough formula. I wanted to show you how you can leverage these interpolated or mix-ins to your layers or your rows and your Figma layers to make these a little bit more dynamic. If you need to reuse data from some of your columns, you can now mix and match those into your content and have that dynamically update from the column data in the same row or, as we looked at, in the rows you’re overriding.
I hope that’s useful if you’re looking for more advanced usage of the CopyDoc sync feature when you’re syncing content from a spreadsheet into your Figma layers. Hopefully this adds another layer of flexibility with importing dynamic content in a repeatable way. This is going to make it a lot easier to structure dynamic content in your spreadsheets, and I think you’ll be able to put together a few really interesting concepts using this kind of mix-in or merge tag placeholder structure.
That’s basically it. I’ll leave it there for today. Please feel free to try this out in your own workflows, and hopefully it helps you out. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle