How to add text expander content snippet shortcuts in Figma using CopyDoc

Video Transcript

Today I’m going to be showing you a quick tutorial on how to use text expander shortcuts in Figma 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 search for “CopyDoc” under the “Plugins” tab, if you just click the CopyDoc result, you can run the Figma plugin by either clicking on this “Run” button here or I’d recommend clicking on this “Save” icon here. That’ll let you run it from your saved Figma plugins list later.

I’ve already gone ahead and clicked the save icon. I’m just going to go to my canvas, right-click anywhere, go down to “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’s got a bunch of different features that help you to update, export, and import all of your text content. But for today, we’re just going to be focusing on this Content Library feature to create reusable text expander snippets.

I’ll show you what that looks like. Now, if you go ahead and click on the CopyDoc Content Library button in the Figma plugin, that’s going to bring up this little panel here. Just to show you what I mean by text expander, what it actually means is we can basically take these trigger shortcut names. For example, button or CTA, and we can type those directly into a text layer and expand that shortcut into one of these text variants.

For example, if I do forward slash, forward slash, CTA, you can see that immediately after I finish typing in the trigger, it expands that trigger into the full text from our snippet. So, if I do the same thing over here, I’ll do slash, slash, heading, and that automatically populates that heading with one of the text variants that I’ve added here.

I’ll show you how to add those in your own Content Library. You can click on this “Add New Snippet” button over here, and you can create a text trigger. So, for example, we could do one called “nav.” So, if we wanted to make some navigation items that we can reuse, we can call this one “nav.” We can basically categorize this into a section. In this case, we might call this category “menus.” We want to add the “nav” trigger to this menu. The “nav” trigger is going to be your shortcut, so it’ll be slash, slash, “nav.”

Under the text content snippet, you can start adding some text content variants here. You can just do one variant if you don’t need multiple variants. But in this case, we might want to add a few different menu items. So, we might call this one “features.” We might call this one “about us.” We might do “story,” “social media,” and maybe we’ll add one more for “FAQ.”

We’re going to create this as a text snippet. Click on “Save New Snippet,” and you can see here it’s added it right at the top. So, what we can do is we can basically now use this snippet in our content just by using that shortcut. If I go to slash, slash, “nav,” that’s automatically going to give me a menu item from my approved menu items trigger.

Again, I can do “nav” as a trigger. I can copy-paste that to my clipboard, paste that in. I can actually keep pasting it if I want to keep doing that. So, you can add multiple triggers into one text area. You could add that to in between this text here, and that will automatically expand it.

That’s basically the fundamentals of using the text expander feature in CopyDoc. As I mentioned, you can go ahead and create as many of these triggers as you want, just to basically have an approved copy library that’s going to be really handy for you to use to populate text content for pieces of your design that need approved snippets.

Instead of just using “Lorem Ipsum”, instead of actually manually typing out if you’re creating a new button, instead of thinking of a name or thinking of a, you know, Lorem Ipsum or something like that, if you’ve got the CopyDoc Figma plugin open and you’ve got your shortcuts on hand, you’ve either got it memorized or just using the copy icon over here, instead of typing out Lorem Ipsum or whatever, if you just know that it’s going to be a button and you’ve got CTAs, you can just type in CTA and automatically expand that text out into an approved bit of copy.

That’s basically what it looks like. As I mentioned, you can go ahead and create your own content snippets. There’s also a feature to import and export CSVs. So, if you wanted to do this in bulk, you can actually just import and export these snippets in a bulk export and import.

Feel free to go ahead and try that out as well. But for today, I’m just going to leave it there and keep it really simple, just to show you how to use the text expander feature in the Content Library section of CopyDoc. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.