How to use Figma Variables as a re-useable text content library using CopyDoc

Video Transcript

Today, I'm going to be showing you how to use your Figma variables as a text component library in Figma using the CopyDoc Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here. If you search for "CopyDoc" under the "Plugins" tab, click on the CopyDoc result. You can either run the Figma plugin by clicking the "Run" button here, or you can click on the "Save" icon for easy access later. I've already clicked the save icon, so I'm going to go to my canvas. Just right-click anywhere, go down to "Plugins," and then click on the "CopyDoc" item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way it works is it provides you with a set of tools to update Figma copy and Export copy, and make all different changes to text in a variety of ways. Today, I'm just going to be focusing on the Content Library feature. If you want to know how the other ones work, check out the CopyDot playlist on the YouTube channel. But for today, I'm just going to be going through how to use Figma variables as a Content Library.

To get started, all we need to do is go to the Content Library button and click on that. If you go over to the Integrations tab—click on Integrations—then down here, you basically want to select the Figma option. By default, it'll select the Google Sheets integration, but for today, we're going to be focusing on the Figma variables integration. So just make sure you've got Figma string variables selected, and then we're ready to go.

The way this feature works is it allows you to take your Figma variables. So, if you go over to your Figma right-hand side column and click on the local variables option—this local variables option over here—click on that. This will allow you to create some variables in your Figma file that will be accessible inside of the Figma plugin in a moment. The way that it works is you click on the create variable button over here, and you want to click on the string option. Click on the string option with the little text icon. Then, what we can do is start creating some text variables that we'll be able to use in our Content Library.

For example, I'm just going to call one "headings." So, I'm going to create one called "headings," and I've already got some copy that I want to use. I'm just going to copy-paste that into the value field. I'm going to paste that into value. You can see now, if we go back to our Figma plugin and click on the little refresh icon in the bottom right here, you can see that it immediately loads up our Figma variable as a text component Library option. Basically, if we expand that, we can see that we've got all these different text options. We can now apply those to our Figma layers with one click.

For example, if I click on this text layer here, I can basically click on the supply button, and that will automatically apply a random bit of text from our little variable here into the text layer in Figma. We can also select individual strings. So, you can select which one you want to use there, and that will also apply it. You might also notice that there are multiple strings in this options area here, yet we only pasted one value into here.

The reason for that is the Figma plugin automatically determines if there are multiple strings by detecting the double pipe symbol. You can see here I've got the pipe symbol. You can add that on your keyboard if you just do shift forward slash. That'll add the pipe symbol. So, you can see here, I could basically add more pipe symbols, double pipe symbols, to split up these strings. Those will automatically get imported as different strings in here. We can also add individual ones.

For example, if you just wanted to create a string called "CTA" for a CTA button and we want that to be "learn more," you could add that as a single string. If we refresh the copy here, that's just going to add it as a single string. So, if you were to apply that, that would only ever apply that one string, and you just have that as a single item. Totally fine. You probably want that in a lot of cases, but I just wanted to show you how to add multiple strings.

In this example, we could do multiple CTAs. We could do "try it now" and add that with the double pipe symbol and refresh that. In here, we'll now get two of them. So, we've got our "learn more" CTA and our "try it now" CTA. This is a really easy way of splitting up the string into multiple variants in case you want to have multiple options for different bits of copy. We can also do that for our projects.

I've got a bunch of different projects in this string here. I'm just going to add a new variable called "projects." So, if I add "projects" as the name and paste in the value with those pipe symbols again, just to split up some of those project names, I can get rid of these text layers now. If we refresh the variables again, you can see we've now got a little "projects" item in here. The cool thing is we can also apply this to multiple layers at once.

For example, if I were to select all of these titles—so I'm just going to open up these groups—and if I go ahead and select the project name for all of these tiles, I can select all of those six layers. Then what I can do is I can open up this little panel here, and I can apply those in order. I can do an ordered version, which is going to go Nike, Adidas, Apple in order, the way that we added it in the Figma variables value. Or we can do random, so we can randomly roll out those copy updates to the selected layers. We can do it alphabetically, so that's just going to go from A to Z based on the variables that we added, or we can do Z to A. We can do reverse alphabetical as well.

Of course, we can just click on the supply button, and that will automatically do a random application. Or we can apply the same value to multiple selections. So, if you wanted to apply the same string to multiple text layers, you can definitely do that as well. But in this case, I'm just going to do an ordered version based on my original Figma variable order. So yeah, that's basically it. I just wanted to run through that really quickly in case you've been playing around with the new Figma variables feature. I wanted to know how to use this more seamlessly with your text layers.

It's worth mentioning that this is not going to apply the variables to the text layers themselves. So, you'll notice here if we go to this text layer, you've got the option in Figma to apply a variable to that text layer. You can basically apply one of these variables to the text layer, and if that gets updated in here, so if we were to add, you know, a "buy now" CTA onto that text, that would automatically update that variable in here. That's not what this feature is doing. This feature is basically just making it easier to consume these variables as an on-demand text Library. It's not going to sync up your variables over time.

That's just something to be mindful of if you are going to be using this feature. It's really just an on-demand apply-once and use-it-as-is sort of thing. But it's going to give you a really easy way to keep these bits of text in your official Figma variables panel and then just sync those up in here when you actually need them. So yeah, we'll leave it there for today. Hopefully, that's helpful if you've been wanting to use the Figma text variables in a different way, to use it as a bit more of a text Library, searchable text Library. You can do that here as well. You can search the copy, make it a bit easier.

Hopefully, that's going to be handy for you if you're using the variables feature with your team. Feel free to give this new integration option a try in CopyDoc. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.