How to use Google Sheets as a Figma text content library using CopyDoc

Video Transcript

Today, I’m going to be showing you how to link a Google sheet to Figma to use it as a Content Library using the CopyDoc Figma plugin.

To get started, all we need to do is go to your Figma file, click on the little “Resources” icon up here. If you just search for “CopyDoc” and under the “Plugins” tab, if you click on CopyDoc, you can run the Figma plugin by either clicking on this “Run” button here. Alternatively, I’d recommend clicking on this more options icon here and clicking save. That’s just going to save it to your Figma plugins list for easy access.

I’ve already done that, so I’m going to go to my Figma canvas, just right-click anywhere, go down to “Plugins,” then go down to “Saved plugins,” and click on CopyDoc. That’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, it has a bunch of different features to help you manipulate and export and import text. Today, we’re just going to be focusing on this Content Library feature. So if you click on the “Content Library” button here, that’s basically going to open up this Content Library panel. I’ve done another Figma tutorial showing you what this Collection tab does, but for today, we’re going to be focusing on the Integrations tab.

If you go ahead and click on the Integrations tab, you’ll basically see that it defaults to the Google Sheets option. If you’ve got Google Sheets selected, you’re basically ready to go. What we can do now is we can actually link up a Google sheet.

I’ve got a Google sheet set up over here with a couple of bits of content, and I’m going to copy this URL into the CopyDoc Figma plugin by going to the share button over here in the top right, clicking on that, and just making sure that the general access setting is set to “Anyone with the link can be a viewer.” You want that to be “Anyone with the link” is set to a viewer. Once you’ve set that, go ahead and click on the “Copy link” button to copy that to your clipboard. Then, if you go back to Figma, you can now paste that into this input field where it says “Add new Google sheet.” I’m just going to paste that in there, and that’s basically going to fetch the Google sheet URL.

Once it’s found the tabs, it’s going to load up the content and populate the Content Library here with your text. That should finish loading, and you’ll see that we’ve got our Snippets in here that we imported from Google Sheets. This is getting imported directly from this URL, so this is basically live data that’s getting pulled in from Google Sheets into your Figma Content Library panel.

What this allows us to do is use that content in our designs. So I’ll show you what that means. We’ve got this headings snippet here with a bunch of different variants. If we go ahead and select a Figma text layer, we can apply any of these variants to that text layer. For example, I can apply a random one just by clicking on the apply button here, and if I keep clicking it, it’ll just keep doing random text replacement. Alternatively, we can select one directly, so we can select one of these Snippets, and that will automatically replace the text here.

Likewise with these projects down here, so if we wanted to replace some of these projects with updated project names, all we can do is select all of those text layers, and then in our projects snippet over here, again, we can hit apply, and that’s automatically going to apply those to our text layers. We can also have more control over the way those are ordered. If you’re doing multiple applications of text, you can do it in order. So that’ll basically follow the original order. Nike website added at Spanish ads Apple ad campaign, so those are in order.

Or you can do it randomly. That’ll randomize the way that the text gets rolled out if you wanted to do a more random version. Or you can do alphabetical reverse or otherwise, so you can go A to Z or Z to A. That’s just a really quick way of having a bit more control over applying those text layers. Likewise, we can apply these to single layers as well. Of course, we can click on this project name here and populate it with one of our campaigns or one of our titles. That’s a really quick way of doing that.

And then, of course, if we wanted to update these in Google and reload them in the Figma plugin, we can definitely do that as well. Maybe we want to add a new item over here, so we could do you know Disney campaign and add that in there as another one. We could maybe delete some of this content. I’m just going to delete this cell here. We can add another variant, so we can call this one taglines. We can basically add more text in here, so I’m just going to do test content here and another tagline here. You can obviously populate these with much better content than that.

Now if we go back to our Figma plugin and click on the little refresh icon down here, that’s just going to fetch the Google sheet again, reload the content, and you can see we’ve now got our new taglines item. So if we drop that into here, we can apply that as test content or this other tagline here. I’ll randomize that, and again if we open up the headings, you can see one of them has been removed, and in projects, we’ve got our Disney campaign as well, so we could easily use that right there. That’s a really quick way of syncing up data from a Google sheet.

This is a really cool way to keep your Content Library in sync. You can add as many of these columns as you like, you can just keep adding multiple columns, and those will automatically get added into the Google sheet sync feature over here. I’ll basically leave it there for today. I just want to give you a really quick fundamental overview of how this feature works and how you can sync up your Google Sheets to use them as a library with multiple Snippets, multiple variants, as you saw. You can basically just add as many rows as you want, so you can just populate these and create as many text variants as you want for these different types of text Snippets.

That’s going to give you a really easy way of loading in realistic content into your designs that’s basically been approved or is ready to use instead of just using lorem ipsum or copying or anything like that. So I hope that’s helpful if you’ve been wondering how to use your Google Sheets as a bit of a Content Library in Figma. The new Content Library feature in CopyDoc is going to be a really helpful way of doing that.

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