Video transcript
13-minute video ·
Today, I’m going to be showing you how to import and export text content from your Figma designs using CSV files.
We’re going to do this by installing a Figma plugin called CopyDoc. If you haven’t already installed it, you can jump into the Figma Community and search for the term “CopyDoc”, and under the “Plugins” tab, you’ll see a result come up called “CopyDoc”, and if you go over to the right-hand side you’ll be able to click on the “Install” button, and once it says “Installed”, then you’re ready to go and we can jump back into our Figma design.
I’m just going to be using this Figma file to give you an example of what it looks like to import and export text content from Figma using CSV files. The first thing we need to do is just right click anywhere, go down to “Plugins” and then click on “CopyDoc”, and that’s just going to fire up the Figma plugin that we just installed a moment ago. You’ll notice that there’s a few different settings here, but for today we’re just going to be focusing on importing and exporting CSV, just using these two options.
The first thing we need to do in order to edit the content is to export all of our Figma text layers to CSV; and the way we can do that is just by clicking on this button over here which says “Export CSV”. Once that loads, it’s going to load in all of the different Figma frames that you’ve got at a parent level; all of your top level frames on the current page will get loaded into this window, and this essentially just allows you to select which frames you want to export the Figma text layers from.
By default, it will select every single frame in your Figma document, but if you want to narrow that down, there’s a couple of different ways to do it. The first way is just to uncheck all the layers, or check and uncheck individual layers, and you’ll see that you’ll be selecting a subset of those layers; for example, if I only wanted these seven, I could do that another easier way if you know which frames you want to export is you can just click on those frames in your design, and you can select multiple ones and that will automatically filter down those those frames in the Figma plugin itself. If we only wanted to export these three we could quite easily just click on those and you’d see those three filter. You can unselect all the frames just to get the whole list back, and for the purposes of this tutorial I’m just going to export all of these frames in one go from Figma to CSV.
Let’s go ahead and do that now. We can just click on this “Export CSV” button up here; I’ll click on that, and this is going through and exporting every single Figam text layer in our frames to a zip file. It’s telling us that the Figma text layers are ready to download, so I’m going to click on the “Download Text” button and just save that to my desktop, and if I double click on that zip file you’ll see we get a folder which contains my CSV file, and it contains a folder called “frames”; and that “frames” folder is there because I selected the “Include Designs Option”, and what that means is it’s going to include references to all of your frames in the zip file. You can see here if I navigate through those, it’s including a file for every single frame that I chose to export, and that’s just a nice touch to be able to reference the designs from the CSV even if you’re not accessing the Figma file directly.
To give you an example of what the CSV looks like, I’m just going to double click on the CSV file and this is going to open up Apple Numbers, that’s my default app on this computer, yours might be Microsoft Excel, or you could open it in Google Sheets, and that would be another option, but for today I’m just going to be showing you the Apple Numbers app.
We can see here it’s loaded up the CSV file that we exported from Figma, and if you have a look closely you can see that we’ve got a few columns here; we’ve got the “id” column, this is a column that you don’t want to be editing, this is what’s going to map the text layers back into Figma when we re-import them; you can just not worry about that “id” column. The “frame” column is a reference to what frame the text is being included on; for example we’ve got the “Intro” frame here, and you can see that on the “Intro” frame we’ve got three layers of text; we’ve got “Dieter Rams ten principles of good design” and then this little snapshot here as well; we’ve got those three little lines and the same thing goes for all of the other frames. You can see all the frame references, and that just makes it really easy to visually verify what’s going on.
The other thing to note is that it will essentially go from top to bottom, so the text layers will be ordered from top to bottom, and you can see here in this intro frame we’ve got “Dieter Rams ten principles for good design”, and then this little tag line at the bottom, and that’s because the order of those top to bottom in the design itself, it also takes into account left to right as well; for example we’ve got “good design is innovative”, “the possibilities for innovation” is the second one, and then we’ve got this little footer down here as well; those are a little bit of an example of what they look like. You can see over here we’ve actually got these numbers which are getting aligned to the right, I believe that’s just because they’re being recognized as numbers by the program, but if you’re wondering where those were they’re just sitting over the right hand side; that’s probably more of an Apple Numbers specific thing.
Now that we’ve got our CSV file with all of the text from Figma, we can actually go and edit that text content right now. For example, if we wanted to change this this title frame here; instead of “Ten principles”, maybe you want to say “Two principles” for some reason; and instead of “Dieter Rams”, I’m just going to put my own name there, and I’ll put my last name in there as well.
The other cool thing we can do is actually just find and replace, so you can do this in any spreadsheet software, but if you actually just do a find, so if you wanted to do “good design”, if you wanted to find that sentence and for some reason you wanted to replace that with “bad design”, you can do that and you can click “Replace All”, and you can see here it’s changed all of those references in our document. If that was the change I wanted to make and I wanted to re-import these text changes back into Figma from the CSV, what I can do is I can save the file as a CSV. I’m just going to “Export to CSV”, I’m going to click “Next” and I’m just going to save that onto my desktop. I’m just going to say “Updated”, so I know which one.
I’ve just updated the CSV with all of my Figma text, and now we’re going to actually re-import that text back into Figma. All we need to do is close off this little success message here in the Figma plugin, and this time instead of clicking on “Export”, we’re going to look at the “Import Text Updates from Figma” feature, so this is going to update the Figma text layers from the CSV. If you go ahead and click on the “Import CSV” button, you’ll see this little prompt to either click or drag and drop a CSV file, and it’s just letting us know that we should ensure that the CSV was originally exported from the CopyDoc Figma plugin, otherwise it’s probably not going to work.
If I go back to my desktop, we can see here we’ve got the new updated CSV file that we just edited. All I’m going to do is I’m going to click and drag that into the Figma plugin, and I’m going to drop it into that little drop zone. It has just loaded in the CSV file, so it has read through all of our rows in the updated CSV that we exported from Figma and it’s actually giving us a list of all the differences it has detected. It’s gone ahead and verified every single row in the CSV file, and it’s comparing those rows with the text that’s currently in Figma based on the IDs that we exported from in the first place and it’s actually giving us diffs, visual diffs, of what’s going to change were we to update these layers. It doesn’t update them immediately, it’ll always let you verify the updates that you want to make from the file just so you know exactly what’s going to be changed, and you can opt-out of any changes that you actually don’t want to approve.
In this case, it has detected 13 changes that we made, so you’ll recall that we changed “Dieter Rams” to my name, and then we also did a big find and replace where we changed every reference of “good design” to “bad design”, and so you can see here all of the diffs are showing that difference; it’s keeping the “d” at the end of “good”, but it’s changing the first letters to now be “bad”, so you can visually see in the red on the left of the original text and what it’s going to look like when that text gets updated. In this case, I want to keep all of the changes except for the “Ten principles of good design” getting changed to “Two principles”, I’m going to leave that one out.
To verify where these text layers are in the design, you can easily do that by clicking on the little magnifying glass icon or the search icon next to any of these layers. As you can see here, it actually zooms in automatically to where that change is going to be made, were you to accept it. You can go through all of the layers to verify where all these changes are actually happening, and that’s just a really quick and easy way to verify any text changes that are going to be made without you realizing where they might be. That’s just a really neat feature that you can use before you actually go ahead and click the “update” button.
Having said that, I’m pretty happy with all of these updates that we’re going to be making. As I said, I’m selecting 12 out of the 13 layers, so now that I’m happy with all of those, I’m going to go ahead and click on “Update Figma Text Layers”; this is now updating, or has already just updated 12 Figma text layers. It’s told us that 12 figure layers have just been updated, and if we actually go through we can see in the list here that all of them except for this bottom layer, which we didn’t want to update, has been updated. You’ve got this little confirmation icon, the little check mark, and in brackets at the end of each string it’s got “Updated” in brackets. It has confirmed that it has updated all the layers, and again, you can still use these magnifying glasses and we can actually cruise around the file and see exactly what was changed; it’s just a really easy way to verify what actually happened, and you can see here we’ve changed every single layer within a matter of a couple of seconds, so that’s pretty neat.
If we wanted to undo that, the quickest way to do that would just be to do a “CMD + Z” or a “CTRL + Z” on Windows. For example, I can do “CMD + Z”, and it immediately undoes all of those text changes, which is great if you if you accidentally did the update and you didn’t really mean to, then a “CTRL + Z” or a “CMD + Z” will get get you back there pretty easily.
Again, now that we’ve reversed those, we can easily re-import them just as easily as we did. I’m just going to drag that back in, and this time I’ll accept all the changes, including the bottom one, and once again I’ll just click “Update Figma Text Layers”. It’s going to replace all of the text layers from the CSV file that we modified into Figma. I’ll show you that one more time, and click on “Update Figma Text Layers”, and there we go; two seconds later, we’ve got 13 text layers updated super easily.
This is a really nice way of bulk updating content in a design just by editing a CSV file that you’ve exported from Figma, so if you have a copywriting team or if you have some external stakeholders that need to review copy, exporting the content or the text from Figma to CSV can be a really convenient way to get a quick overview of every single bit of text that’s being used in your Figma design, or just on specific frames that you need to run past your legal department or run past a client for approval.
If you’re a copywriter, oftentimes it’s a lot easier to actually edit that copy in an isolated fashion in a spreadsheet or a Google Sheet and being able to export all of your text from Figma to that CSV file that they can edit on their own without disrupting the design process, that’s actually a preferable way to go a lot of the time. As a designer or as a copywriter, you can quite easily just jump back here as we’ve just seen and re-import all those copy updates from CSV to Figma and review them before they actually go into the design, just in case there’s any crazy huge amounts of text that are going to break the design; you’ll be able to verify that before you actually go ahead and re-import it.
That’s basically everything you need to know about exporting and importing CSV text content in Figma using the CopyDoc Figma plugin. If you’ve got a copywriting team, or if you’re having issues with managing your text in Figma, then exporting and importing text with CSV files in Figma might be something that you can try. If you do, I hope you have some success with it, and we’ll be back soon with more Figma tutorials just like this one. Thank you again for watching, and we’ll see you soon.
Pro Bundle