How to export and re-import selected text layers in Figma using CopyDoc

Video Transcript

Today I’m going to be showing you how to easily export any selected text layers from Figma out to a spreadsheet file, which we can then edit and re-import back into Figma to make a whole bunch of text changes really easily and automatically.

To get started we’re just going to jump into the Figma Community and search for the word “CopyDoc” and under the “Plugins” tab you’ll see CopyDoc come up, and all you need to do is click on the “Install” button on the right-hand side and we’ll be ready to go.

You can swap back into your Figma file at this point, and it can be any Figma file with any content in it. I’m just going to go ahead and run the Figma plugin that we just installed by right clicking anywhere, going down to “Plugins, clicking on “CopyDoc”, and that’s just going to fire up the Figma plugin we just installed a moment ago.

For today’s Figma tutorial I’m only going to be focusing on this bottom feature called “Quick Export Selected Text Layers”, and this feature differs from another feature that I’ve covered in other Figma tutorials which is this feature up here called “Export Figma Text Layers”, and this feature is different because it centers around entire Figma frames; if you want to export a whole bunch of Figma frames out to a file and make changes to them and re-import them in bulk, that’s a really good option, but if you only need to export certain parts of a design or certain parts of a single frame, then this option that we’re covering today is going to be an option that’s much more suited to what you’re after.

To get started, all we need to do is find the part of the design that we want to export, so in this case I’m going to export this “Cast” frame. This frame contains, as we can see on the left here a bunch of text layers, I’ve got a heading layer, this other layer here, and then a bunch of nested text layers, too. By clicking on the frame that wraps around all those FIgma layers, what the Figma plugin is doing is it’s showing us that we’ve got six text layers found, so we can see one, two, three, four, five, six.

What we can do is export those specific text layers quite easily just by clicking on this “Quick Export” button. I’m going to do that now, and you can see here it’s given us a list of the text phrase text layers that have been selected, and the only thing you need to do is select what format you want to export it to. We’ve got CSV, JSON, XLIFF, and you can go into some more advanced options here too, but I’m just going to keep it simple with CSV today. Then I’m just going to select the ordering option; this is the order of the text that gets exported to the CSV. At the moment, I’m just keeping it as sorting the text visually based on where it is in the design. For example, it’ll sort it from top left to bottom right; we should see “Cast”, “See all”, “Robert Downey Jr.” and so on. I’m just going to leave it as that, and then I’m going to click on the “Quick Export CSV” button.

Okay, it’s generated the CSV. I’m just going to click on “Download CSV Export”, it’s very quick, as you can see. I’m just going to save it to my desktop and then I’m going to jump into my desktop and open up this file. I’m just going to use the default “Numbers” app that comes with Mac. You can use Excel, you can use Google Sheets, anything that you like you can use, but I’m just going to keep it really simple today just so you can see what I’m doing here. As we saw in the design, it’s exported it in the order that we expected; that’s exactly how we expected the order to come out. You can see we’ve got a few different columns here; the “id” column you don’t want to touch, that’s what’s going to map these layers back into Figma in a moment when we re-import it. The “frame” is just telling us which Figma frame that it’s been exported from; in this case it’s the “Movie Details” frame. The “layer_name” is the layer name of the text layer, you can change that layer name if you like, and that will get updated also in the Figma text layers or Figma layers panel. Finally, we have the “figma_text” column; this is the actual text content in each of these layers, so that’s the one we’re going to be focusing on today. All I’m going to do is I’m going to update this; I’m going to say “Actors Featured”, so I’m going to change that “Cast” one to “Actors Featured”. I can change “See all” to “See more”, and I think all of these names are correct, so I’m going to leave those as is. Then all I’m going to do is I’m going to click on file export to CSV I’m going to select CSV select unicode utf-8 and go next and then I’m just going to save it as updated on my desktop.

I’m going to close that “Numbers” app off now. I’m going to jump back into my CopyDoc Figma plugin, I’m going to close off that download panel, and this time I’m going to click on the “Import Text Layers” option; I’m going to click on that little button here and this is giving us the chance to drag in a file that we’ve updated that was originally exported from the CopyDoc Figma plugin. What I’m going to do is I’m going to grab that updated CSV that we just changed, I’m going to drag that in to the Figma plugin into this little drag and drop window, and you can see here that it’s loaded up the CSV file and it’s telling us that it’s detected two text changes since we exported the file. You can see that it’s detected we’ve changed “Cast” to “Actors Featured” and “See all” to “See more”. I’m happy with both of those, but if you only want to import certain ones you just uncheck any of the ones you don’t want to update. If you’re unsure of where the text is being changed, all you need to do is click on this little text icon, and that will immediately select it and zoom into it on the Figma canvas; if you’re a bit unsure, that’s just a really good way to double check.

In my case, I’m happy with these changes, so I’m just going to go ahead and click on this “Update Figma Text Layers” button here. I’m going to click that now, and you can see here that it says it’s updated two Figma text layers, and as we’d expect, it’s made those two changes that we made in our spreadsheet just a minute ago. As you can see, none of the other text has been updated, that’s all been left alone; just these two changes have been made. That’s a really nice way of updating certain components or certain layers within a larger frame or within a larger context, and this can be really useful for things like microcopy or for example these buttons, you could export those or if there’s just a list within a frame like these cinemas for example, exporting that selection is a really quick way to send that to your copywriter, or update it yourself, or update or send it to someone who doesn’t have a Figma account, and then they can basically send it back to you once they’re happy with the text changes while you continue working on the design, and then you can just re-import that spreadsheet file directly into Figma via the CopyDoc Figma plugin.

That’s basically it for today; you can you can use this example in your own designs, you can select multiple layers, so if you wanted to select both of these layers we can we can easily do that. I’ll just quickly show you what that looks like; you can see here that we’ve got both of these selected, and now “Storyline” is also showing up. I forgot to mention that this preview here will also reflect your option, so if you change the ordering option of the text, for example, if we changed it to “Alphabetical”, so we’ll go from “A to Z”, and you can see here as a preview it’s showing you what that’s going to look like in the spreadsheet. I forgot to mention that before, but that’s a bit of a preview of how it’s going to look when it actually gets exported. If we quickly export that CSV again, download the export to our desktop, save that, and once again open that with the “Numbers” app, or whatever spreadsheet software you want to use, you can see here this time it’s exported those two extra layers; the “Storyline” layer and the “Description”, and because we selected the “Alphabetical” option, it’s now sorting the Figma text content from “A to Z” in alphabetical order. That’s just an example of how you can easily change that text order when you do export the spreadsheet.

Alright, I think we’ll leave it there for today; I just wanted to give you a really quick example of this new quick export option. Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.