How to update Figma text layer content with Markdown files using CopyDoc

Video Transcript

Today I’m going to be showing you how to easily make lots of text updates in your Figma designs with markdown files using the CopyDoc Figma plugin.

So, to get started, all we need to do is go to the little “Resources” icon at the top of your Figma file. If you click on that and search for “CopyDoc”, under the Figma “Plugins” tab you’ll see CopyDoc pop up. All you need to do to run it is just click on that item, and then you can click on the “Run” button down here, or I’d recommend clicking on this little “More options” icon and just clicking on the “Save Figma plugin” link down here.

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

CopyDoc has a bunch of different features that you can explore. I’m not going to be going through all of them today. If you want to check out those ones, you can go on the YouTube channel and just check out the CopyDoc playlist. But today, I’m just going to be focusing on exporting and importing markdown files to make text updates in your designs.

To get started, all we need to do is click on this little export text layers button, and this is going to bring up any frames that are currently in your Figma file. So today, I’ve only got one, so I’m just going to keep that one selected and then click on the drop-down here and make sure that markdown is selected. You can export it to different formats, but for today, we’re just going to be looking at markdown. So, I’m just going to click on “Markdown” and then export the markdown by clicking on the “Export Markdown” button.

If you click on that, that will basically export the text to a markdown file that you can download. So, I’m going to click on the download markdown export button, download that to my desktop, and then if you unzip the file, you’ll open up the folder, and you’ll be able to see that we’ve got a markdown file and also a designs file, just as a bit of a visual reference if you’re translating this or updating the content in your text editor.

To open up the file, you can basically use a code editor or a markdown editor. Today, I’m just going to be using this markdown editor and opening that up. So, you can see here that I’ve basically got my Figma file exported, and it’s including all of our different text layers with the content in between each of the IDs. So basically, you want to leave these ID layers or ID lines alone because they’re going to map the text back into Figma later, but you can start making text content updates just by editing the content here.

So, for example, we could change “hello” to “welcome.” We can change this body copy here, so we can say “this is portfolio,” and you can make updates to longer bits of copy as well. So maybe we want to just change around this copy a little bit, add some line breaks in there. Maybe you want to add some formatting as well, so you can add formatting in markdown just by adding in these little star icons. So, that’ll do bold. If you want to do italic, you can basically add a single star on each side, and that will make the text italic. And you can see here that any bold text is also automatically been included with the markdown formatting. So, that’s bold text there. And you can see here, there are a few different other options we can have a look at. Today, I’m just going to be keeping it really simple.

Maybe we can unbold one of these items as well. So, I’ll unbold the home link here, and maybe I want to bold the “about us” link instead. So, we’ll just make those changes. For now, I’m just going to save the markdown file again, and if we now minimize that and go back to CopyDoc, if you now click on the import text layers button. So, we clicked export before, now we’re going to click on import text layers, and what we’re going to do is drag and drop our saved markdown file into the little drop zone here.

I’m going to open my folder again, just going to grab that markdown file we just saved, drag that into the little drop zone here, and you should see the updates that we just made show up. So, you can see we’ve got a list of all the changes that have been made. So, we can preview those. We can select or deselect changes that we want to apply or not apply, but you can basically see here that we’ve got our updates that we made in the markdown file applying in the Figma plugin now as a preview.

Now we want to actually update those text changes in the file. So, I’m going to click on the “update Figma text layers” button here, and that’s basically going to go through and automatically update that content. So, you can see here the changes that we made are the heading, so we’ve got this “welcome” text instead of “hello.” We’ve got our subtitle of the portfolio that we added, and we’ve got our home link, which is now not bold, and the “about us” link is bold instead. So, we’ve changed the formatting of that content there, and we’ve also just changed the line break of the main text here.

It’s just a handful of changes but quite effective at making updates to the body copy with formatting changes just in one drag and drop. So, the other thing we can do is export this with grouped layers as well. So, for example, if we go to the export text layers button again and this time I’m just going to also change some of this copy to be the same, so I’m just going to make this one “welcome” as well, and I’m also just going to change these ones down here so that’s the same, and if we make this one the same as the other one at the top. So, I’m just going to make these two the same, and that should be enough for now just to show you what this looks like.

If we re-export the text layers, so I’m just going to click on export text layers, and this time, if you click on the group duplicate text layers toggle. So, I’m just going to click on that now and then click on the export markdown button again, and that’s going to allow us to download a new markdown export. So, I’m just going to save that, unzip it, and just rename that, so I’m just going to call it “new,” and then go back to my editor. So, if I just close off that, go to my editor down here, and go back to desktop and go to my new folder, and you can see here that we’ve got a new export.

And you’ll notice that this time, it’s a little bit different. So, we’ve got some IDs getting extra IDs in here with one set of texts. So, you can see for this “welcome” text, for example, we can see that it’s got two Figma layer IDs automatically added. And so, that means we can basically make this text update in one spot and anywhere that that text has been exported from originally. So, for example, “welcome” and “welcome” down here, if we were to change that in here, so I’m just going to change that back to “hello” again and save that.

And we can also change these menu items here, so we’ve got these ones. I’m just going to change that to “mobile design,” and I’m also just going to change the company slogan to something new. So, that’s a pretty good overview of changing these little details. So now, if we save that again, exact same process. I’m going to go back to Figma, click on the import text layers button again, and this time I’m just going to drag and drop my new markdown file, which I just updated, drag and drop that into the Figma plugin.

And this time, you’ll see that we’ve got those changes, but it’s also changing the multiple text layers. So, because we made a change for the “welcome” layer in our file, we’ve got two different “welcome” layers in the actual design. So, it’s going to automatically pick up on that change and allow us to apply it to multiple layers at the same time, same with our company slogan. We can check out where these text layers are as well just by clicking on this little text icon.

If you want to figure out which layer relates to what, you can just go ahead and click on that, and that’s just a really easy way of jumping to that layer that’s going to get updated when you do click that button. So, this is just a nice little preview. If you don’t want to update any of them, you just uncheck them. For now, I’m just going to update them all. So, I’m going to click on “update Figma text layers” again, and that’s going to go through and update six layers.

We can see here that “mobile design” has been updated in both of our layers here because we updated it in our group export. And you can see up here we’ve now got “hello” again in both these fields down here, and the company slogan that’s been updated here and also in the footer. So, that’s just a really easy way if you’ve got a lot of duplicate texts. So, for example, a lot of times you’ll have buttons with the same label. If you just want to update them in one spot using the grouped export feature that we just went through here, grouping duplicate text layers is going to be really seamless way of updating the text in one place in your markdown file and then re-importing it back into Figma.

That’s basically it for the Figma tutorial today. The last thing that you can do if you want to, as well, if you don’t want to export entire frames, is you can just use this little quick export option down here. So, if you click on the quick export button with some layers selected, that will automatically just export certain text layers. So, you can just get a much smaller export if you just want to export certain layers instead of the entire Figma frame. You can go ahead and do that, export to markdown, and then re-import that using the import text layers button again.

Thank you as always for watching. I hope that’s been helpful if you’ve been wondering how to use markdown files to update your Figma content easily. This is going to be a really quick way of going about it using the CopyDoc export and import feature. And we’ll see you in the next Figma tutorial video very soon.