How to export Figma to Microsoft Word .docx files using CopyDoc

Video Transcript

Today I'm going to be showing you how to export your Figma designs to Microsoft Word .docx files.

To do this, we're going to be using a Figma plugin called CopyDoc. If you haven't already installed it you can do so by going up to the Figma icon in the top left of the app, going down to "Community", and then searching for "CopyDoc",and you'll see "CopyDoc" come up in the Figma plugins list under the "Plugins" tab. If you haven't already done so, you can click on the "Install" button on the right hand side, and that will install the Figma plugin. Once you've done that, you can switch back into your Figma file and we'll be ready to go.

I'm going to be showing you how to export this Resume or CV from Figma to a Microsoft Word document, and to do that I'm just going to open up the Figma plugin we just installed. I'm going to right click, go down to "Plugins", then go down to "CopyDoc", and I'm going to click on that, and that's just going to open up the Figma plugin that we just installed a moment ago. Once it loads you'll see that we've got a few different options, but today we're just going to be focusing on the top option, which is to "Export frames to Microsoft Word". This is going to export your Figma frames to a .docx file, and considering we've only got one frame, I just thought this would be a simple tutorial to show you just to get started.

I've got my frame, it's a A4 size frame, so this has been resized in Figma when the frame was created using "Paper" and then A4. You can set this to whatever size you want, but at the moment this is for the purposes of having a resume document, it's just an A4 paper size. To load up the frame we can just click on "Export Frames" and this is just going to load all of the frames inside of your Figma design. In this case, I've only got one frame, so you can see it's got one out of one frame selected, and just to give you a simple example of how this works, we'll just keep that frame selected, and click "Export to DOCX".

That's just generated a .docx file for us and it's telling us our Microsoft Word document is ready to download. We can click on the download button below to save the exported file, so I'm going to do that now and just click on the "Download Word Doc" button, and I'm just going to save that to my desktop. If I open up that file now, I'll just double click on the .docx file that is exported; you can see there it's got the page name with the file name in it, and then today's date and you can see there it's a .docx file.

I'm just going to double click on the .docx file, and that's just opened it up for me in Microsoft Word. We can see here, all of the text that we had in Figma has been carried across, the image that we've got there has been carried across. and it's it's carried everything over as we'd expect. The neat thing is this is editable as well, so if we wanted to change this we could quite easily update that; if we wanted to change that text we can do that, all of the styles have been carried across; this has been carried over with all the caps and the spacing, and we've got the colors the slightly off of black color here and you can see everything that was in Figma has been carried across as we'd expect. That's really neat, that's exactly what we wanted and you can update that text in Microsoft Word, or you can update it in Figma again and just rerun the Figma plugin to export those frames to Microsoft Word one more time.

To show you another example, I'm just going to open up a separate document and I'll show you what it looks like to export a multi-page document as well, and we can run through that in just a second. I've just switched into a new Figma file and this one has a bunch of different frames, so I'm going to show you an example of what it looks like to export a page or a set of frames that isn't just one frame, and I'm going to show you how to export that in custom order and show you what that looks like. Once again, we can open up the CopyDoc extension by right clicking anywhere, going down to "Plugins", clicking on "CopyDoc", and that will just re-run the Figma plugin. Once again, we're just going to click on the "Export Frames to Microsoft Word" option or "Export Figma frames to .docx" is the subtitle. If you just click on the button "Export Frames", you can see here it's loaded up all of the frames in our page.

We've got all of the frames in the order that they are loaded up in in the left-hand side Figma panel, however, in our case we actually want to change that order because we can see here that "Principle 10" which is down here is actually the last frame in our in our design. We have a few options here, we can use the quick ordering, so if you click on this drop down here, you will be able to sort the frames by layer order, you can sort them visually in their columns, or their rows, or by layer name, so in this case I might just use the "rows" option, and you can see when I clicked on that it's actually loading in the rows one by one; it's going from top left, all the way across and then go into the next one going to the next one. I could also use the column option, which would look like that, and in that case you can see it's going from top to bottom left to right. In my case, I just want to keep it as rows.

The other thing you can do if you wanted to manually override the order is just click on one of these little handles over here, click and drag, and if you drag and drop those you can actually customize the order that way, too; it's just a little bit more customization. Of course, if you do need to change which frames are included, you can use the check boxes on the left hand side and that will only include the frames into the Microsoft Word document that you actually want. In this case, I just want to keep all of them there, and now that I'm happy with all the frames and the ordering I can just click on the "Export to .DOCX" button one more time, and that's going to convert my Figma document over to a Microsoft Word doc. This one has a few more images in it, so it's going to take slightly longer, but it should only still take a few seconds to export that .docx file for us.

The Microsoft Word document is ready to download, and just like before we're going to click on "Download Word Doc", and save it to the desktop. If I open up that, you can see here the .docx file has been saved, and if I double click on the .docx file you can see here that it's created another Microsoft Word document for us with all of our frames from Figma. Those are looking really good as well, and once again I can change that text, so if I wanted to update this text I can do that, and I can move it around. If I need to move that up, that's totally fine, and that's exactly as we expected. We've got all of our frames from the design in Figma exported to Microsoft Word, so this can be really handy if you need to put together a portfolio resume, or if you need to put together a deck, or a set of documents for a client or internally and you want to be able to share that in a document form or a Microsoft Word document, then exporting it from Figma to Microsoft Word doc or a .docx file is sometimes a really good way to go if somebody doesn't have access to Figma, or you need to send this via an email or via Slack or something like that.

That's what that looks like there, and as I said a minute ago if we only wanted to export a subset of those frames I can just re-run the Figma plugin again by going over to the right hand side and clicking on the CopyDoc icon, and if we only want to export some of the Figma frames to Microsoft Word, we can go in here on the left hand side and just select which of those frames we actually want. In this case, we might just want the "Intro", we might want "Principle 5" and "Principle 7"; and I might want "Principle 7" to come before "Principle 5" for some reason, so this is just an example of what that can look like. Finally, I'm just going to click "Export to DOCX" one more time, and it's going to convert our Figma design to Microsoft Word again. It's telling us the Microsoft Word documents ready, and I'm just going to click "Download Word Doc" and save it to the desktop. One more time, I'll open up this one and you can see here it's only exported the three frames that we that we specified in the Figma plugin, and it's adhering to the order that we just selected using the drag and drop ordering, too. We've got number five at the end, and then number seven, just like we did in the Figma plugin.

You can use this Figma plugin on any of your Figma designs, it doesn't really matter what the size of the frames are, you can have mixed size frames and it will still be able to export that to a single document if you wanted to do that. It does tend to work better if if all of the frames you're exporting to a Microsoft Word document are all fairly uniform, so whatever you want the design to be in Figma you can just design it the way that you want, all you need to know is that each frame is going to be treated as a page in the Microsoft Word document, so whatever Figma frames you design, those will what will be available to you when you want to export them to a word doc. As long as you do that, you can basically design anything you want inside of the Figma file.

The last thing I would note is just to say that if you're using a font in Figma that you don't have installed on your system, then it's going to look a little bit different because the font really needs to be installed for the visual side of it to look perfect. The text will still be there, it'll still be editable but it'll look a little bit different to how it does in the Figma design, so just make sure that whatever fonts you're using in your Figma file, be sure to install those before you open up the document in Microsoft Word after you've exported it from Figma to the .docx file.

Thank you for watching, and I hope if you've been trying to export Figma files to Microsoft Word documents or .docx files, hopefully this tutorial has been helpful for you. I hope that if you give it a go with your own designs you have some success, and we'll see you very soon with more Figma tutorials just like this one. Thanks again for watching.