How to update Figma text from Office 365 with DOCX files using CopyDoc

Video Transcript

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

To get started, all we need to do is go to the little "Resources" icon at the top of your file. If you click on that and search for "CopyDoc," click on "plugins," and then click on the CopyDoc item, it'll let you run the Figma plugin. You can either click on the little "Run" button here or click on the "More options" icon and click "Save Figma plugin." That will save it to your Figma plugins list for easy access later. I've already gone ahead and done that.

Now, I'm going to go to my Figma canvas, right-click anywhere, go down to "Plugins," and then go down to "Saved Plugins." I'll click on the CopyDoc item, and that's going to run the Figma plugin we saved a second ago. The Figma plugin has a bunch of different features, but for today, I'm just going to be focusing on the export text layer feature and import text layer feature.

The first thing we're going to do is export our content out to a Word document, which will let us open it up in Office 365 and make some changes. To do that, I need to click on the export text layers button and make sure that the export format up here is selected as DOCX. DOCX is the word document format we're going to be using. Then, I'll go ahead and make sure that the frames I want are selected. I've only got one in this case, but you might have some other ones in here as well. You can change the other options to your own liking, but I'm just going to leave all of these as default and then click on the export DOCX button.

That will export all of our Figma content to a Microsoft Word DOCX file that we can open up in Office 365. Now, I'll show you how to do that. If you click on the download DOCX export button and save that to your computer, then open up the zip file and open up the folder, you'll see that you've got a designs folder, which is just a static JPEG of the content that we just exported for reference. Then, you've got your DOCX file.

We're now going to open up this DOCX file in Office 365 using Word. So, I'm going to go back to my browser and just go to OneDrive in Office 365. You can upload your DOCX file to OneDrive by dragging and dropping the file into OneDrive. So, I'm just going to drag and drop that now, and that's going to upload it into OneDrive so we can then open it using Office 365 Word.

I've got that uploaded into OneDrive, and you can open that up in Word by clicking on the DOCX file here. So, I'm going to click on that, and that's going to open up Word in Office 365 in our browser. Now, we can basically edit the content in Word using Office 365 online. We have all of our content in here that we just exported from Figma. Now, you can go through and make any changes you want in Office 365.

I'm just going to change some of these items here to show you an example of how we can update this content in Office 365 and then re-import it back into Figma in a moment. I'll make a few basic changes just to demonstrate how it works. We can do things like simple formatting, text updates, and update some of these little tags here. For example, I'll change "visual effects" to "visual design," "design" to "development," and "ux" to "copywriting." I'll also make one more change here and change that to "Amazon." Additionally, I'll change one more company to "Microsoft" since we're using Microsoft right now. That's about it.

To get this content back into Figma, all we need to do now is export this as a Word document from Office 365. We can do that by clicking on "File," then "Save As," and then "Download a copy." So, I'll click on the download a copy button, and that will save the Word document to a local file on your computer.

Once it's finished saving, you'll get a prompt asking if you want to save it or download it. We want to download it directly to our computer, so we'll click on the download a copy button. That will download it to your computer.

Now, I'm going to open up my download folder and see that the updated DOCX file has been downloaded. I'll just minimize Office 365 for now and drag this folder over a bit so we can see our Figma plugin. Now, we want to go back to our CopyDoc Figma plugin in Figma, close off this confirmation screen, and re-import the text updates to Figma. This will allow us to update the text content from our updated Word doc file that we just saved.

I'll click on the import text layers button here, and then I'll go to the folder where I downloaded the updated DOCX file from Office 365. I'll drag and drop that DOCX file back into Figma, specifically into the CopyDoc Figma plugin's drop zone. Now, it's going to load up any content previews for the changes we made in the file. If we scroll down, we'll see a preview of what content has been changed. We can select which changes we want to make in the Figma file. If you want to uncheck any content, you can do that. For today, I'll leave most of these selected and click on the update Figma text layers button up here. This will apply all the changes we previewed. I'll click that now, and it will update all of our text layers.

As you can see, it has updated 11 Figma text layers in our designs. If we have a look, we can see that the content has been updated, including the company names and the little tags we changed to copywriting, visual design, and development. We also added some basic formatting and changed the heading and subheadings as expected.

That's it for the tutorial. I just wanted to show you a quick overview of how you can make content updates from Office 365 using a Word document and the CopyDoc Figma plugin. If you're using Office 365 to edit your Word documents, this is a quick way to update your Figma text content. Just be mindful that if you're updating content that is longer than the current text content and you're not using Auto Layout, you may have to manually adjust some layers in your design if they've been updated as well. If the imported content is longer, it may overlap with existing elements, so you'll need to reposition it manually. Auto Layout can make this process easier.

That's all for today. Thank you for watching, and we'll be back with more Figma tutorials like this one very soon.