How to find and replace Figma text content using CopyDoc

Video Transcript

Today I'm going to be showing you how to find and replace text content in your Figma designs using the CopyDoc Figma plugin.

The first thing we need to do just really quickly if you haven't already done so, is go to the Figma Community search for the term "CopyDoc", and you should see the result pop-up under the "Plugins" tab. If you click on the "Install" button on the right hand side you should be good to go.

Now we can jump back into our Figma file, and to run the Figma plugin we can just right-click anywhere, go down to "Plugins" and click on "CopyDoc" and that's just going to load up the Figma plugin we just installed. This is going to be a pretty short Figma tutorial, it's just going to be covering the find and replace text feature in this Figma plugin. If you go ahead and click on the "Find and Replace" button, that's just going to bring up a modal with a familiar looking interface where you've got your "find" input and you've got your "replace" input.

The "find" input is where you put in your search term with the text you want to replace; for example, if I put in "avengers", which is the name of the movie in a couple of these screens, and if I just change that to be all caps, I can find those matches and preview the updates. If I click on that "Find Matches and Preview Updates" button, that's actually going to load up all of the instances where it's found the word "avengers" in my current file on my current page, and it's just going to preview what it looks like with the text that I've put in in the "replacement" input as well.

You can see it's found a few different instances of this, and we can get a sense of exactly where it's appearing in the file, and what it's going to look like when it gets changed. If you're unsure where these are being changed or where they're going to be changed, you can just click on the little text icon button in any of these results; if I click on this one, that immediately jumps to the layer that it has found and instantly selects it. You get a really clear idea of where all these results are showing up, and the cool thing about that is you can actually uncheck those from being included; let's say I didn't want to include this particular change, I can just uncheck that input and this won't be included in rolling out those Figma text updates.

If I'm happy with all the other ones, all I need to do to find and replace those in my Figma file is click on the "Uupdate Figma Text Layers" button; I'm going to click that now, and that's just gone ahead and updated seven text layers. We can see it's got a check mark against all the layers that it's updated, and we can see the preview of what it's updated, and now that it has been carried out, we can actually check that out. You can see here it's changed all of those lines of text to all caps as we put in, but it's also excluded the layer that we unselected here.

If you do want to undo that you can just either "Command + Z" on Mac or "Control + Z" on Windows to just use the normal Figma "Undo" feature, and that's just instantly undone all of those text changes. If you did make a mistake you can quite easily undo those text changes in Figma from your "find and replace" replacements.

We can do this as many times as we want; I'm just going to close the window again and load up another find and replace, but you can actually just keep finding and replacing as well. For example, I could search for "action" and find all those matches; you can see here we've got a bunch of those matches. I could search for "adventure", I could find those, and you can just keep searching in the same modal over and over again if you want to keep looking for different layers. Of course, you can make these changes; I can change "adventure" to "comedy" for example, and find and replace those changes in my Figma text. That has just found all the matches for "adventure" and is showing me what it's going to look like when it gets changed to "comedy". Again, I'm just going to quickly update all of those text layers to show you how that looks; I'll update those, so it's just updated all those four layers, and you can see it's changed over here all of them have been changed to "comedy" from "adventure".

The other thing that's probably just worth touching on as well is the "Match Case" feature. We'll use "avengers" for example again, so let's say I search for "avengers" in lowercase; I'm just going to do "avengers", so if we search for that, it's going to come up, and it's going to get shown in our search results. We can see here it's included "avengers" because we searched for "avengers", but you'll notice in the design that "avengers" is actually capitalized in all the places where it's got the "Avengers: Endgame" title. If we wanted to actually specifically match that case to make sure that it's only matching the exact uppercase and lowercase in our search term, we can click on the "Match Case" toggle. If I toggle that on, and now I'll try and find those matches again, you can see this time it's actually returned no results; and the reason for that is because all of these are capitalized. This basically makes it case sensitive, so this can actually be helpful if you're replacing things like names or things of parts of words that might actually not be capitalized that you don't want to replace.

This is just a nice way of doing that, and to show you how that does work with the capitalization; if I put "Avengers" into the search input again now I've capitalized the "A", and I'm going to leave the "Match Case" setting on, and if I find those matches again, this time it has included the capital "A" because we did we did add the capital "A" into our search term. That's just a really quick note there as well.

That's essentially it; it's a really quick Figma tutorial, I just wanted to go through it and show you how it actually works, and show you how to find and replace Figma text really easily and preview the final replacements before you update them in Figma. If you've been looking for a feature like this, this is a fairly new feature in the CopyDoc Figma plugin; it's designed to be very similar to a typical find and replace feature in something like a code editor, and now you have the added benefit of really easily being able to preview those changes beforehand. There's just no way you're ever going to accidentally find and replace a whole bunch of text without knowing what it's going to look like first.

As always with this Figma plugin and with updating any kind of text using Figma plugins, please just be sure that you do have the fonts installed; if you don't have the font installed, the Figma plugin will let you know that it won't be able to replace the Figma text without the font installed. If you are going to be doing some find and replace in Figma and you're wondering why it's not actually letting you do it, it's almost definitely because the font needs to be installed, and if it's not installed you won't be able to update it; that's just the way that that Figma handles fonts.

That's basically it, I'll leave it there, and I hope if you've been wanting some find and replace functionality in your Figma file, then this Figma plugin should hopefully help you out. Thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.