How to update Figma text from Microsoft Word with DOCX files using CopyDoc

Video Transcript

Today, I’m going to be showing you how to automatically update your Figma text content from Microsoft Word using the CopyDoc Figma plugin.

To get started, all we need to do is go up to your little “Resources” icon at the top of the Figma file here. If you click on that and search for “CopyDoc”, and under the “Plugins” tab, if you just go ahead and click on the CopyDoc item, that’ll allow you to run the Figma plugin by either clicking this “Run” button here or I’d recommend clicking on this little “More options” icon here and clicking save Figma plugin. That’ll allow you to open it from your saved Figma plugins list later.

I’ve already gone ahead and done that. So, I’m going to go to my canvas and right-click anywhere, go down to “Plugins”, and then click on “CopyDoc” under “Saved Plugins”. So, I’m going to go to saved plugins, click on CopyDoc, and that’s just going to run the Figma plugin we saved a second ago.

This Figma plugin has a bunch of different features, but for today, I’m just going to be focusing on these two, which are the export text layers feature and the import text layers feature. So, what we can do first is export our text layers to a Word document. We can do that by clicking on export text layers here, and then we can go ahead and change this export format up here. So, if you go ahead and click on DOCX, which is the Word document format that we’re going to be using. I’m going to select that, and then you can basically just check whichever frames you want to include in the export. So, in this case, I’ve only got one, so I’m just going to leave that one checked. And then it’s up to you to change any of these options down here as well. I’m just going to leave these as default for now. You can also do things like change the order that the text shows up, and you can group duplicate layers and things like that. But for today, I’m just going to leave it default and click on the export DOCX button. So, I’m going to do that now, and that’s just going to export our content to a DOCX file, which is a Word document file. So, I’m going to click on download DOCX export, save that to my desktop, and then I’m just going to unzip that file and open that up.

If we have a look at the folder, you can see we’ve got a design reference here, just so you’ve got an external reference of what the copy looks like. And then we can go ahead and open up our DOCX file that we just exported from Figma. So, I’m going to double-click on that DOCX file. That’s opened up Microsoft Word. So, we’ve got Microsoft Word running, and this will basically allow us to edit the content in Microsoft Word, and then in a minute, we’ll re-import it back into Figma.

I’m just going to make a few different changes here. So, if we change the name, we can change the work title to be something like experience. Maybe we can change this to be my bio or something like that. And maybe we want to change some of these company names to some different ones. We could change some of these tags, so you’ve got these little tags down here that’s being exported. So, maybe we could change that to development or we could do this as art direction or something like that. Just a few different examples to show you what this is going to look like. There are some other things we can do as well. So, you can see we’ve got some links in here that have been included. So, those are links that have been added in Figma. You can also change those as well. So, if you wanted to change the text or change the domain, we could definitely do that. So, you could do a link edit link and then change that in here. So, maybe we just want to change that to something else. So, in this case, I’ll just make that hypermatic.com. And then we’ll be able to see what that looks like in Figma in a second. So, I’m just going to change that now, save it, also make that the text up here. So, I’m just going to change that, get rid of the www, and just make that a bit simpler. And we can also do things like formatting. So, if you wanted to add bold or italics to some of the content, you could do that. So, you can just highlight the text, make it bold, make it italic, and that’ll get imported in a second as well. So, I’m just going to bold and italicize those. And I think that’s probably good enough for now just to show you what it looks like. So, I’m going to click save on my Word document in Microsoft Word. Then I’m just going to minimize that and go back into Figma.

Back in Figma, I’m just going to close off this little export confirmation. And this time, we’re now going to click on the import text layers button. So, I’m going to click on import text layers, which is going to allow us to re-import text updates back into Figma. So, I’m going to click on that now, and you can see here it’s got a little drop zone that we can either drag and drop or click on a file and upload that. So, we’re going to upload this directly from our computer. This doesn’t get uploaded anywhere. It just goes straight into the Figma plugin. So, I’m just going to drag and drop that DOCX file, drop that into here. And once that loads up, it’s going to give us some previews of the content that’s been changed. So, you can see here that it’s basically showing us some of the changes we made. So, you’ll remember we changed these different text items, and it’s just giving us a bit of a visual confirmation of what’s changed. If you want to exclude any of these, you can basically just uncheck those. And they won’t get included. For today, I’m just going to leave them all checked. And now that we can see that we’re basically happy with the updates that we’ve added, I’m just going to go ahead and click on the update Figma text layers button up here. So, I’m going to click that now. And that’s basically going to apply those updates. So, we can see that nine Figma text layers have been updated. And we can see that the copy in the file has been updated as well. So, you can see here we change the name, we change the subheadings, we changed the company names, we added some extra tags or some different tags. So, you can see Art Direction’s been updated. That was changed from concept art to Art Directions. All the tags have been updated. We added some formatting. So, we’ve got some formatting up here that we added. And we’ve also got, yeah, as I mentioned, the company name as well.

That’s basically just a really quick example of how you can do that. As you can see down here, we’ve got our updated link. So, because the text is a bit longer than it was previously, that text may have to change position. So, maybe we have to move some of these text layers over. This is much easier if you’re using Auto layout. So, if you’re automatically setting your frames to position the contents, you’re using Auto layout on your Figma frames. That’s going to make this way more flexible. If you’ve got manually positioned texts like this case has, then if you’re adjusting the lengths and size of those text layers, that’s going to probably require some tweaks if the text layers are going to have longer content than what’s currently there. But you can see that it’s basically updating the content as we expected from the Word document.

Yeah, that’s basically just a really quick overview of how you can use Microsoft Word and DOCX files to update your Figma content with the CopyDoc Figma plugin. This is pretty useful if you want to be making bulk updates to your artboards or to your designs outside of Figma. If you’ve got a copy team or a team of people who aren’t in Figma and they need to make copy updates, this is a really quick way of allowing them to make updates in their preferred app like Microsoft Word in this case. And then you can then re-update your Figma file based on importing that updated file as well.

We’ll leave it there for today. I just want to keep that really short, just to give you a quick overview of how you can use DOCX files to update your Figma content from Microsoft Word. I hope it helps you or your team if you’ve been wondering how to do this. So, thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.