How to create a re-useable text content library in Figma using CopyDoc

Video Transcript

Today, I’m going to be showing you how to create a reusable text content library in Figma using the CopyDoc Figma plugin.

To get started, all we need to do is go to our Figma file and click on the little “Resources” icon at the top here. If you search for CopyDoc and under the “Plugins” tab, click on the CopyDoc results. You can run the Figma plugin by either clicking on this run button here, or 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 later. So, I’ve already done that, and I’m going to go to my canvas and right-click anywhere, go down to “plugins,” go down to “saved plugins,” and then 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 with updating text and exporting text. Today, I’m just going to be focusing on the content library feature. If you’re interested in the other features, feel free to check out those in the CopyDoc playlist on the YouTube channel. But for today, we’re just going to be focusing on the content library.

To get started, all we need to do is go ahead and click on this content library button here. That’s just going to bring up the content library feature that I can run you through right now. Basically, this allows you to create reusable text Snippets that can include variants. You’ve got a bunch of different variants here, and these ones that have already been added. It just allows you to create a reusable content library that you can share with your team. So everyone’s basically on the same page with the type of content and copy that has been approved to use in your designs.

I’ll show you what that looks like to add a new text snippet. So, if you go ahead and click on “add new snippet” up here, that’s basically going to bring up this little creation panel, and I’ll run you through how it works now. The first thing you need to do is add a trigger shortcut. This is basically going to be the shortcut that’ll automatically trigger the text to expand if you type it into a text layer. So what I mean by that, for example, is if we go back here and check out this heading one, if I basically take that snippet, so if I were to type in slash slash heading, that’s automatically going to expand into that snippet or one of those snippets. I can also copy it to my clipboard and just paste it. That’s also going to do that. But the snippet is basically going to be the shortcut that comes after the slash slash that’ll trigger that snippet.

Again, if we go back to our add new snippet panel and I wanted to call this one tagline, for example, I can call it tagline, and the snippet will be slash tagline. You can also add dot characters if you wanted to do something like marketing dot tagline, you could do that just to make it more namespaced. But today, I’m just going to keep it simple and call it tagline. Then what you can do is add it to a collection, so you can store your snippets in different collections to make them more easily identifiable. I’ve already got a couple of these set up, so I’m going to put this under the marketing copy category. But you can go ahead and click on “add new collection” if you want and create a brand new collection. I’m just going to use marketing copy for now.

The interesting part down here is that we can then add our text content snippet. So, if you just wanted to add one tagline, for example, we can grab this tagline here and drop that into here. So, you could basically just include that as the one approved bit of copy. If you just wanted to add that one line, you could definitely do that. So, we could hit “save new snippet.” When we open up our collections tab here, you can see we’ve got a new item called tagline. What this does is it allows us to reuse that snippet. So, if we went down here and clicked on one of these categories, we can basically just click on this text layer, click on the button, and that will automatically apply the text.

This content here hasn’t quite been styled very well, so we can do a fixed width and then bring that in. So if you wanted to apply that, you can apply that there. It looks a little bit better. So, this will basically allow you to apply that snippet. But you’ll normally want to have more than one snippet for a certain type of content snippet. So what you can do is we can now edit that. I’m going to click on the little pencil icon. If you want to add multiple taglines, so for example, if we want to split this into two, you’d basically just add the double pipe symbol characters. So on the keyboard, just push on the pipe symbol, so hold down shift and push on the forward slash or pipe symbol button, and just do a double one. So you want to do two, and then you can add more categories of text in there.

We can create text variants. I’m going to call this text variant example. So, we can add another one and then we can do another one here and so on. So, you can basically create as many as you want for these little snippets. When we hit “update snippet,” you can see here that the content has been updated for that tagline trigger. So what that means is if we were to basically now go into here and use that trigger, so if we did slash slash tagline, that’s automatically going to expand into one of those random variants. So, we can add it again, do tagline, and again, it’s going to be random, so it’s going to change every time, or again, you can just use the direct snippets down here and pick which variant you want. Or again, we can do multiple selections. So if we wanted to select multiple layers, we can definitely do that. So we can do all three of these, and that’ll allow us to create an ordered or random application of those snippets. So we could do ordered, we could do random, so those are just going to bounce around, or we can do alphabetical as well. So that’s just a really quick way of applying multiple snippets to multiple text layers at once.

You’ve got the option of applying them with the buttons, or you’ve got the option of applying them with the expander. So that’s all well and good, but maybe you’re thinking, I’ve got a bunch of text that I want to add, and I don’t want to go through and manually add them one by one. Well, the good news is you can also do a CSV import. So if you click on this import CSV button, that’s going to bring up this little drag and drop area here, and what you can do is you can download an example CSV. I’m just going to download that to my computer. I’m going to click on the little link, save that to my desktop. So I’m just going to open that up now. I’m going to open that up with Microsoft Excel. You can use any spreadsheet software that you prefer, Google Sheets, or numbers, or anything like that. Today, I’m just going to be using Excel to keep it very generic.

You can see here that the example file basically contains the header row. The header row is where you’re going to add your triggers or your shortcuts for the text expander. And then each row underneath that per column is going to be the text variants that you want to use. So these are basically just two different text variants that will get added. We can obviously add more. So, we could do content copy, and just add some random text. We could do “Random text,” “Another bit of text.” And if we were to basically now hit “Save,” so I’m just going to save that CSV. And now what we can do is drag and drop that updated CSV file into our little drop zone area here. So, I’m just going to drag and drop that in.

You can see that it’s loaded up our snippets. It’s got three new snippets detected, and we can go ahead and select a new collection for those snippets. So, I’m just going to go ahead and create a new collection. So, I’m going to click “Add new collection.” I’m going to call this one “CSV Imports”, so you can call this whatever you want, and CSV imported snippets. Then just go ahead and click on “Import Snippets,” and that’s going to bulk import those new text snippets into your collections tab. You can see here, if we go down to our CSV imported snippets collection and filter those down, the three new text snippets that we just imported by CSV are now available. So, we can basically go ahead and use those. You can see here, if I apply those text snippets, or if I jump into this one, that’s basically going to include the text that we just imported from our CSV file. So that’s a really quick way of doing that.

The other thing that you can do is then re-export these to CSV if you wanted to. So, what we could do in this case is basically select the snippets that we want to export, just check those, click on “Export to CSV” up here, and then save that to your computer. It’s basically going to save that into categories. So if you’ve got multiple collections selected, it’s going to export each of those collections to a separate CSV. But in this case, I’m just going to be doing the one we just imported. You can see here that it’s basically exported the two snippets that we selected to be exported from the Figma plugin. What we can do now is basically update these. So, instead of calling this one “Random text,” we can call this one “Ordered text” and change “Text” to “Content.” We can change these things here, so we can add some extra names, and maybe we want to delete some as well. So delete this row here, and again, hit “Save” on that CSV, jump back into our selection. I’m just going to uncheck those, click on “Import CSV,” and drag and drop that new updated file that we just exported and re-saved. I’m going to drop that in there.

This time it’s basically saying we’ve got some existing snippets that we want to update. It’s detected two new updates. We’ve got this snippet updated, and it’s showing you exactly what’s going to change. Go ahead and click on “import snippets,” and that’s going to update those text snippets for us. You can see here that the names have been updated, and the copy here has also been updated. So that’s just a really quick way of bulk importing or updating existing snippets if you want to export those to CSV, make some updates, and then re-import them. That’s a really quick way of doing that.

The other thing you can do in bulk is move these into different categories. So let’s say we wanted to move these into a couple of different categories. We can basically select the snippets that we want to move, go down here to “Select Snippet Collection,” and we can basically rearrange those collections in bulk. So I might want to move those into the buttons category. I can just select “Buttons” and click “move,” and that will automatically move those snippets into the collection that you specified. Likewise, you can also bulk delete things. So, if you wanted to bulk delete these two snippets, you can basically just select those two, go down here, and click on “delete,” and that will instantly delete those text snippets. So, you’ve just removed those.

That’s a really easy way of bulk managing or updating and exporting and importing snippets via CSVs or via the selection in the Figma plugin. So yeah, that’s basically it. I just want to go through the basics of how you can use CopyDoc to create a reusable text content library. You can imagine using this for all sorts of different copy. If you’ve got different types of components or different kinds of content categories in your app or on your website that you need to reuse copy for, you can go ahead and do that. So for example, CTAs, we’ve got some calls to action buttons here, we’ve got some calls to action text, and basically, you can apply these automatically from our little copy library down here and drill down into those and have some copy available whenever you need to populate some of these different text snippets down here.

We’ll leave it there for today. I just wanted to run through the basics of creating a reusable text content library using this new content library feature in CopyDoc. Hopefully, that’s helpful if you’ve been wondering how to create a reusable set of text snippets that are really easy to roll out into parts of your designs. This is one option that’s hopefully going to make that a bit more manageable and scalable for you and your team. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.