Video transcript
7-minute video ·
Today, I’m going to be showing you how to automatically update your Figma text layers from Google Docs using the CopyDoc Figma plugin.
To get started, all we need to do is click on the little “Resources” icon here at the top of your Figma file. If you click on that and search for “CopyDoc” under the plugins tab, and click on the CopyDoc item. You can run the Figma plugin by either clicking this “Run” button here, or I’d recommend clicking on this little “More options” icon and clicking “Save Figma plugin.” That’s just going to allow you to run the Figma plugin from your Figma plugins list later.
I’ve already gone ahead and done that. Now I’m going to go to my canvas and just right-click anywhere, go down to “Plugins”, then go down to “Saved Plugins,” and click on CopyDoc. 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 going through two of them. I’ll be going through the export text layers feature and the import text layers feature.
The first thing we’re going to do is export our text layers out to a Google Doc. We can do that by clicking on “Export text layers” and then making sure that this little select box up here is set to a DOCX format. So, DOCX is a Word document format. We’re going to click on DOCX and make sure that’s selected. Then you can go through and select any frames you want to export or not export. In this case, I’ve just got one frame, so I’m going to keep that selected here. Feel free to play around with any of these extra settings down here or do things like change the order if you want to do that. Feel free to change that or group duplicate layers and things like that. Today, I’m just going to leave this pretty standard. Now I’m going to click on the “Export DOCX” file. So, I’m going to click on “Export.x,” and that’s just going to export all of our Figma text to a DOCX file. I’m going to click on the “Download DOCX” export and save that to my desktop.
If we open up that zip file and open up the folder, you’ll see here that we’ve got a “designs” folder, which just contains a static design as a bit of a visual reference of the DOCX file. What we want to do is basically open up this file using Google Docs. So, I’ve already got Google Docs open in my browser. I’m going to go to my browser, I’ve just created a brand new blank Google Docs document. Then, what you want to do is go up to the “File” item up here and click on that, then click on the “Open” option. Click on “File” and “Open.” Then, you want to make sure the “Upload” tab is selected. Just click on that “Upload” tab. Then, what you can do is basically just drag and drop the DOCX file that we just exported from Figma into your Google Docs window. So, I’m going to do that now. I’m just uploading that document into Google Docs, and that’s going to open it up for me to start editing.
You can see here that I’ve got all my content from Figma. This is all in Google Docs. So, we can now start to edit this content in Google Docs directly. I’m going to do some things just to show you what it looks like. I’m going to change some of the names and roles and subheadings. So, I might call this “Experience.” I might call this “Bio.” Maybe we want to change some of these companies. So, I’m going to change some of these company names. I’m going to change some of these tags. Maybe we want to change “Visual Effects” to “Visual Design.” Maybe we want to change “Design” to “Code”. Maybe we want to just change this to be “Art Direction.” Just a handful of different changes to show you what it looks like.
We can also do things like change links, change formatting. For example, if we wanted to change some of the formatting in this lime Epsom, we could do things like add some bold formatting or italics formatting just to show you what that looks like. So, that’s a pretty good overview of a few different changes that we can make. Now, just to show you what it looks like to re-import that content, what I’m going to do is now download this file from Google Docs back into a Word document. So, I’m going to click on “File,” go down to “Download,” and then I’m going to click on “Microsoft Word” or DOCX in brackets. If you click on the Microsoft Word option, that’s just going to download the file to your downloads folder or wherever you’ve got your default downloads saved to. So, basically just open that up. You can see here on my desktop, I’ve got the saved file from Google Docs that we just edited. If I preview that, you can see that the changes are in that file. We’ve got the changed names, changed subheadings, company name formatting. So, that’s definitely the updated file from Google Docs.
Now, what we want to do is go back into Figma. I’m just going to minimize Google Docs. I’m going to go back into Figma, close off this little window, and jump into the “Import text layers” feature. If you click on the “Import text layers” button, this is going to allow us to re-import text updates to Figma. I’m going to click on “Import text layers.” Then, I’m basically just going to drag and drop the file that we just saved from Google Docs, the updated file, just drag and drop that back into Figma, in this little drop zone here. What that’s going to do is load up some previews of the content that was changed. So, you can see if we scroll through these, it’s just showing some of the updates that are going to be made. These haven’t been made in the file yet. It’s just more of a review phase so you can see what’s been updated in the file before you approve them or update them in Figma.
I’m pretty happy with these changes. If you didn’t want to include any, you can basically just uncheck those, and those won’t get included. But for today, I’m just going to accept everything and click on the “Update Figma text layers” button to update all of my Figma text layers in this preview. So, I’m going to click that now. I’m going to click “Update Figma text layers.” That’s just going to update all of the text layers that we changed in the Google Doc. You can see it’s updated 10 Figma text layers. If we zoom in a bit, you’ll see that all the changes we made in the document have been applied. The names have been changed, the subheadings have been changed, the experience has been changed from Google to Airbnb in this case, and also the tags that we changed have been made. You can see here it used to be called “Concept Art and Design,” and that’s been changed to “Art Direction and Code.” So, those have been updated there. The formatting we added has been applied, so we’ve got the bold text and the italicized text here. It also changed some of these links. Because the link wasn’t properly formatted before, it’s just gone ahead and formatted that. You could basically just remove that if you didn’t want to include that. So, I’ve just left that as is. But you could move that around.
The other thing to note is if you’re changing some of the text content and the layers don’t have Auto Layout, you might have to manually move some of those around if the content’s been exaggerated or extended. Sometimes you’re going to get longer content or shorter content, and that might require some layout changes. Again, if you don’t have Auto Layout applied. So, it’s always good to apply Auto Layout as much as possible beforehand. But if you don’t, you may have to tweak some of those positions around. But the main thing is you can update that content directly from Google Docs. So, if you’re working with someone who doesn’t have Figma access or if you’re working with copywriters who prefer to do their copywriting in Microsoft Word or in Google Docs or using a DOCX file, this is going to be a nice way for them to edit the content without having to deal with Figma or deal with any of the design challenges that might pop up when they’re editing text.
We’ll leave it there for today. I just wanted to keep this really short and simple, just to show you how you can use Google Docs as an option for updating content in Figma using the CopyDoc export and import features. It’s going to be a really quick way of going about it. Feel free to give it a try with your team, and hopefully, that helps if you’ve got some people on the team who are into using Google Docs instead of Figma to make updates in the designs. We’ll leave it there. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle