How to spell check Figma text layers in your designs using CopyDoc

Video Transcript

Today I’m going to be showing you how to spell check your text layers in Figma using a Figma plugin called CopyDoc.

The first thing you’ll need to do if you haven’t already installed it, is jump to the Figma Community and search for the term “CopyDoc”; and if you hit enter you’ll see a result pop-up called “CopyDoc”, and you’ll see the “Install” button on the right-hand side. If you haven’t clicked “Install”, just go ahead and click “Install” and you’ll see it change to say “Installed”, and once it looks like that, you’ll be able to jump back into your project and we can get started.

The first thing we need to do is just right-click anywhere, go down to “Plugins” and click on “CopyDoc”, and that will fire up the Figma plugin that we just installed a moment ago. You’ll notice there’s a bunch of different options here, but today we’re just going to be focused on the option which is about spell checking Figma text. This is going to allow us to find and correct spelling mistakes across our entire page in Figma, and we can get started by just clicking on “Spell Check Layers”; that’s the button next to this item.

After clicking on the button, you’ll get an option to say which language you want to spell check your Figma page in; by default, it just changes to “English (United States), but if you click on the drop down, you’ll be able to see dozens of different languages; you’ve got “German”, you’ve got “English”, different variations of “English” for Australia, Canada, United Kingdom, you’ve got “French” you’ve got all these different languages; depending on where in the world you’re designing the page, you’ll want to change this to match whatever language the text in your file is. In my case, I’m in Australia, so I’m just going to use “English (Australia)” option.

Once you’ve selected the language, all you need to do is click on the button that says “Find Spelling Mistakes”, so I’m going to click on that, and this is now going through my entire Figma page and searching every single layer for spelling mistakes. You can see this is a fairly small file, so it only took a couple of seconds; if you’ve got a really massive Figma file that you’re spell checking, it might take a little bit longer, but it should be pretty quick.

Okay, you can see that the spell checking feature has found a whole bunch of spelling errors in our Figma text. It has found 21 spelling mistakes all up, and some of these are going to be actionable and some of them are not going to be actionable, as there’ll be a few that potentially are in a different language or potentially abbreviations which we actually don’t want to correct. For example, “Braun” is a brand which isn’t in the dictionary, so even though it says it’s a spelling mistake, we know that that’s actually not a spelling mistake; in that instance I’m just going to leave that one. But we can see here that there’s another error which is should be actually “designed” but it’s been picked up because it’s missing the “e”, and in brackets you can see the number of times that it’s been found in your Figma file.

Any errors that the spell checker has found it will automatically group them, so if you click on one of these little titles, what that does is it reveals all the places that the spelling error has been found inside of your Figma file, and what you can do if you want to actually inspect them is just click on any of these little “search” icons next to the frame name. In this case I’m going to click on “Principle 3” and I can see there it’s immediately zoomed in to where the actual error is happening, and I can change that to go to the top one. I’ll go to the “Intro”, and that’s going to jump to the text layer on the “Intro” frame and again you can see here it’s zoomed right into where the spelling mistake has been found in Figma.

What we can do now because we know we’ve got these five different spelling errors for the word “design”, and we know we want to correct it you can see all of the suggestions underneath; we’ve got four different suggestions we know that we actually want it to be “designed” not “sign”. I’m going to go ahead and click on the “design” button and you can see after I click that it immediately updated those five different text layers all in one go. I didn’t need to do them individually, it just does them all in one go, and it’s telling me that it’s corrected “dsign” to “design”; you can see the the option that we picked has been displayed just in case you forgot what you clicked. If you still want to zoom into those layers to confirm that it’s all good you can still open up that little icon and jump around to your different frames and just verify that the changes as you’d expect.

The other thing you can do if you did it by mistake or if you actually just wanted to see what the options were again while you’ve still got this window open you can click on the “Undo” button, next to the correction you can click on “Undo” and it’s got a little five in there to indicate that it’s going to undo five layers. If we click “Undo”, that will revert it back to the original spelling and we could go ahead and change that to a different suggestion if we wanted. I can click on “sign” instead you can see it’s updated in those places and then I can undo that again and then put it back to the correct one which I know is “design”.

We’ve got that there, and for the other ones you can see here this one has only found one mistake which we can zoom in here. In this case, it’s the word “life cycle” and it’s suggesting that it should be two words or hyphenated, so if I want to hyphenate it I can just click that middle option there we go; it’s been updated. Same with “multi press”; I can check out where that is, in this case, I might want to hyphenate that as well. “Product” has two d’s in this case, so I’m going to change that, and let’s just change it up here. “Thorough” has also been detected, so if I change that I can check out where that was, so that’s updated there. We can see that I can change it to a different option, and again it’s really about whatever suggestion you want to put in there is really up to you based on the context of the the copy.

That’s basically how it works, it’ll search all of your your Figma design for text layers with spelling errors and offer you spell checking suggestions. Just keep in mind that this is just a spell checker, and it doesn’t take into account grammar or sentences or context or anything like that. It really is just a spell check feature for correcting individual words in your Figma text, so that’s just something to be mindful of in case it doesn’t pick up something which in the context of the sentence is wrong but in terms of the spelling it might still be right. Just be mindful of that, and other than that you can basically use it to correct a lot of spelling mistakes in Figma at scale, and you can see how quick it can be and how quick it works and because we’ve corrected these ones.

Now if I was to jump out of that and then spell check my Figma text layers again by clicking on the “Spell Check Layers”, if I re-run that search, so I’m just going to click “Find Spelling Mistakes” one more time; this is going to spell check all the layers in Figma again, and you can see this time it’s only found 16 mistakes, and that and that’s because we already changed the errors in the previous round. Once you do that, as soon as you leave this modal, or as soon as you close the Figma plugin after you’ve made those corrections, the very next time you run the Figma plugin to spell check your Figma text, it will it will not take those into account anymore.

You’ll lose the ability to undo those through the Figma plugin, but if you do want to undo them regardless you can just use the native undo functionality. If you do “CMD + Z” on the keyboard, or “CTRL + Z” if you’re using Windows, you can still just undo those changes as you’d expect. For example, if I use the “Undo” button now, I’m just going to hit that a few times, and you can see there it has already updated all of our copy back to the incorrect spelling. Again, if I rerun the spell checker for the Figma text again, I’ll spell check those layers now that I’ve undone the action, and click “Find Spelling Mistakes”, you can see just like before it’s found 21 mistakes again, and the previous correction that I just undid using the the native undo functionality is now back. We’ve got design back as an incorrect spelling, and once again I can just jump in and correct that to the other thing.

It’s worth noting is I’m able to do this because I have the fonts installed. If you’re a user of Figma, you’ll know that the way that fonts work, if you don’t have the fonts installed on your machine and you try to edit a text layer that’s already been created, Figma won’t let you do it; it’ll tell you that you need to install the font. The same thing is true of the spell check feature in CopyDoc as well; if it does find a spelling error and you can see it show up on the list, if you don’t have the font installed, CopyDoc will automatically flag that in the Figma plugin. You’ll see a little message saying that the font isn’t installed and it’s going to prompt you to install that font, and the suggestion buttons will be disabled until you’ve actually installed that font. If you do run into that, it’s completely normal, and that’s that’s how it’s supposed to work. The Figma plugin will absolutely let you know if there’s any text that is missing the font, so that’s just something to be mindful of, too.

That’s basically it; it’s very simple, it’s an extremely quick way of scanning your spelling errors in Figma and offering you suggestions for all those different words and bulk updating all those spelling errors across all of your Figma layers in one go. I hope that’s been helpful for you if you’ve been wondering how to do spell checking in Figma, or if you’ve tried other spell check plugins and and they haven’t quite been what you’re looking for, then this is just a another option that you can try for for doing spell checking in Figma. Thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one.