How to add realistic placeholder text content in Figma using CopyDoc

Used in this video

Video Transcript

Today, I'm going to be showing you how to use realistic placeholder content in your Figma designs 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, and search for CopyDoc. Under the "Plugins" tab, if you just go ahead and click on "CopyDoc," you can either run the Figma plugin by clicking this "Run" button here, or I'd recommend clicking on this "Save" button here. Then, go to your canvas, 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, it has a bunch of different features to help you update, export, and import text content. But for today, I'm just going to be focusing on the Content Library feature. Feel free to check out the YouTube channel for other tutorials, but for today, we're just going to be focusing on the Content Library to add some placeholder content to our designs.

To get started, all we need to do is go ahead and click on the Content Library button, and then just go ahead and click on the placeholders tab. Click on placeholders, and you'll see here that immediately we've got a category selected called "person" with a bunch of different placeholder content. What we can do with this content is use it to populate layers in our design just by clicking on them. For example, if we go ahead and click on this text layer here and we wanted to add a name to that layer, what we can do is click on this full name button. That will automatically populate the layout with a fake but realistic-looking name. We can do first name, full name, last name, middle name, and go through all of these different items and apply them as needed.

Besides just people, we've also got a bunch of other categories. If you click on this category drop-down here, we've got a bunch of different ones for animals. So, if you wanted to add maybe a dog or a horse, you can add different types of these animals with just one click. You can also add a bunch of other categories. Our internet, for example, maybe you want to add an email address. You can add fake email addresses that look realistic but not quite realistic. You can do these email ones, which are more realistic with Hotmail, Yahoo, or Gmail addresses, and a bunch of other ones as well.

I'm not going to go through all of these categories. You can go through these yourself and figure out what kind of content you actually need. You can do fake words, you can do Lorem Ipsum if you want to. You can do paragraphs worth of Lorem Ipsum or just a sentence or just one line and all these different options.

Besides just using it like this, we can also use shortcuts or Snippets. For example, if we use this copy icon over here – I'm just going to click on that – this will allow us to copy this trigger to our clipboard. Then we can basically just paste it into a layer that already exists. For example, if I wanted to go into here and I paste in that trigger, that'll automatically fill out that trigger into the full text.

If I manually type that out – if I do slash slash fake dot Lorem dot lines – that'll automatically expand that based on the content that it's using. There are a few different ways you can do that. The other thing we can do is also use placeholders as part of our custom content Snippets.

If we go to the collections tab over here and we create a new snippet by clicking on the "Add New Snippet" button over here, I'm just going to give this a name. I'm going to call this subheading. Then, I'm just going to select a collection. Let's call this one "titles," just make a collection for it. That's just basically a category. Down here, we can now start using placeholders mixed in with our custom text content.

If you toggle on this "Show Placeholder Shortcuts" button, that's going to allow you to use those same categories down here and splice them with custom text content. For example, you might do something like "Hello," and then select a name. If we go back to our people, our person, and then go back to our full name, click on full name or you can just do first name if that makes more sense, and then just click on the little plus icon down here. You can see here it's basically populating that with the shortcut that we saw before in double curly brackets. This is a special type of placeholder that's going to get automatically replaced later.

I'll show you a couple more examples of this. If we were to do again, go back to the animals. So, we go back to animals and then we can say, "In this picture, shows a," and then just add a placeholder and add that there. Then we can do "bear" at the end. We basically splice that in the middle of that sentence. Just for now, I'm going to save that. I'm going to click "Save New Snippet," and you can see here we've got our new snippet added in our collection. This is just a way where we can basically create custom text Snippets.

Again, we can apply this either by clicking on the text layer and clicking "Apply." If you click "Apply," that's going to automatically apply that randomly to the text layer. Or, again, we can use the shortcut. If you wanted to copy that to a clipboard and you wanted to add it somewhere in this layer, maybe we wanted to add it in the middle here, you can just paste that in, and that will automatically populate that. You can see here it's automatically populating it. It'll do the same thing if we type it. If I type that in manually, so slash slash subheading, that's automatically going to populate that with a text snippet.

The cool thing is you can see here it's basically replacing the placeholder each time the text snippet gets rendered. In this one, we've got "Hello, Logan," and in this one, we've got "Hello, Kobe." If we were to change that or add that again, we can actually expand this and just add the "Hello, first name" snippet. That's just going to keep randomizing every single time. You really get a nice way of adding these placeholders interspersed with your own custom content.

The cool thing is you can apply this to multiple layers at once. If you wanted to add this to multiple layers, let's say we've got these four layers selected, and then we wanted to add the "Hello" snippet to those, click on that now. Each time you click that again, it's going to randomize that placeholder snippet for each of the selected items. This can be a powerful way of generating fake placeholder content for multiple items using your own content mixed with fake content.

If you want to edit these as well, you can totally do that. Just click on the edit icon down here. In this case, we don't want to have "bear" at the end because it seems to be automatically adding the bear into the sentence. I'm just going to remove that, and we can add some other content in here as well. Let's say we want to do a location. You could create a location for a country. You could say, "I'm from country," and then plus, and then you could add another area down here. You could say, "country," and then you could do "building number," so we go "building number" and there. Then we'll do, "I live at building number," and then we can do maybe an address, so we'll do a street address, add that in, and then we can also do maybe a postcode at the end. Let's add a postcode or country code, one or the other, and then just add that in there. We'll update that snippet, and you can see here it's added that as a new snippet for us.

Now, if we were to apply that, you can see here it's going to populate that automatically. This is a really easy way of creating interspersed fake text content between custom text content that you can automatically apply with one click. Again, you can copy that as a trigger. You can add that to the end, so you could keep adding that trigger and just keep going to keep populating it. We can also do, as I mentioned before, just applying it directly. There we go. You can see we've removed "bear," so it's adding the bear automatically now. That's a cool way of adding the dynamic animal into your sentence.

Yeah, as I said, I'm not going to go through every single category. There are tons of different categories and placeholders in here. The last thing I want to go through is localization. Let's say you wanted to do a localized site or a localized bit of content and you wanted to use names or addresses from a different country. By default, it's just going to do English American, but if we open up this localization drop-down here, you can actually customize that to a different Locale. If we were to do Japanese and change that down here, you can see that the examples have basically been updated to use Japanese characters and Japanese names.

If we were to replace this text layer here with a full name, you can see that it's basically populating it with the Japanese characters now. The same sort of thing with Korean. We can do a Korean name, and that's automatically going to populate that. The same thing for Italian. We can do Italian, and that's basically going to populate it with Italian names.

The cool thing is when you've got this Locale selected, that's also going to get applied to your existing collections as well. If we were to reuse the first name, so we'll apply the first name, you can see here that it's using the Italian names in our first name here. If we change this back again, so we'll go back to Japanese just to make it obvious that it's changing, and go back to here, go back to our collections, and now if we replace that name, it's going to be in Japanese. That's a really easy way of localizing your placeholders as well if you do need to do a completely different language or a different set of locations or names. All the content that can be localized will be automatically localized when you apply the placeholders.

Yeah, I hope that's been helpful if you've been wondering how to use more realistic placeholder content. If you're kind of overusing Lorem Ipsum and you actually want to use something that's going to be much closer to the real content that you're going to be using but you're still waiting on the final copy to be approved, using some of these placeholders is going to be a really easy way to automatically populate your designs with realistic placeholder fake content.

We'll leave it there for today. I just wanted to show you some of the fundamentals of how you can use placeholder content in CopyDoc on its own and also splice in some of those placeholders dynamically into your custom content text Snippets using the Content Library feature in CopyDoc. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.