How to export comments from Figma files using CopyDoc

Video Transcript

Today I’m going to be showing you how to export your Figma comments to CSV and JSON files with image references that you can share with your team.

The first thing we need to do is go to the Figma Community, and if you just search for the word “CopyDoc”, and under the “Plugins” tab you’ll see a result called “CopyDoc” pop-up. If you haven’t already installed it, you can click on the “Install” button on the right-hand side, and that will install it in Figma for you. Once it says “Installed”, you can jump back into your project and we can get started.

Now that we’ve installed the Figma plugin, if you just right click anywhere on your page go down to “Plugins” and then click on “CopyDoc”, that’s just going to open the Figma plugin that we just installed. You can see there’s a number of options here, but today in this tutorial we’re just going to be focusing on the “Export Figma Comments” option, and as the subtitle says this is going to export all of your comments to CSV and JSON.

I’ve already got some comments set up in this file, I’ve just added a few as a bit of an example. You can see I’ve got one thread on the first frame and then I’ve got a second thread on one of the other frames here. On this frame there’s a second thread which I’ve marked as resolved, so we’re going to be exporting these comments out of Figma. Anyone else who doesn’t have Figma is still able to look at them, or you can mark them off in a spreadsheet, or really do whatever you want with them outside of Figma.

To export these comments from Figma, all we need to do is jump back to that “Export Figma Comments” option and click on the button just next to it that says “Export Comments”; this will open up the “Export Figma Comments” panel, and there’s a couple of fields in here that we’ll have to fill out.

The very first one is just filling out the Figma page URL; this is a required field, but it’s really easy to get. All you need to do is go up to the top toolbar in Figma where it’s got the blue “Share” button and click on that, and you’ll see here there’s a shortcut that says “Copy link”; click on that “Copy link” shortcut, and it’s telling us that the link’s been copied to the clipboard. You can close off that settings panel now, and in the “Export Figma Comment” settings under “Figma Page URL” we’re just going to paste that in, and you can see there it’s copy pasted the file URL for this Figma project from the clipboard, and it’s been put into the settings there. That’s just going to tell the Figma plugin that this is the file that we want to use to export the comments from.

The second thing we’ll need is your Figma personal access token. This is another required field, but again, it’s very easy to generate. There’s some instructions here but I’ll show you how to do it just so you can visually see it. What we need to do, is go to our Figma profile “Settings” page, so I’ll go to that now. I’ve just clicked on my Figma username, and then I’ve gone to the “Settings” tab, and underneath the “Settings” tab, if you scroll down you’ll see a section called “Personal Access Tokens”. What you want to do, is click on this link here that says “Create a new personal access token”, so just click on that once and you’ll be asked to enter a description; in this case, you can just put in the Figma plugin name, but you can make this whatever you want as long as you know what it’s referencing, and just hit enter. Once you do that, you’ll be shown this little notification which is telling us that we need to copy this token because the only chance we’re going to be able to do that. If you just highlight that text, that whole token, and copy that to your clipboard; now if we go back to our page and in the “Figma Personal Access Token” field, I’m just going to click on that, and paste in that token. You can see there it has validated the button now, because the token has been pasted in.

The last option we have here is, it’s automatically set to true, which is “Include Design References”; having this option selected will automatically generate references of the frames that contain comments, and it’s going to include little pin markers that you can reference with your spreadsheet file; I’ll show you what that looks like in just a second.

Now that we’ve got everything set up, all we need to do is finally click on the “Export Comments to CSV/JSON” button, so I’m going to do that now, and this is going to search our whole page for any comments and generate a CSV file and JSON file from those Figma comments. You can see here, it was very quick and it’s telling us that our Figma comments are ready to download, so we can now click on the “Download Comments” button here I’m just going to save that to my desktop. You can see up here I’ve got a zip file which I can open up by double clicking, and if I open up the folder that’s just been unzipped you can see here that we’ve got a few different files; we’ve got our CSV file, we’ve got our JSON file, and we’ve also got a folder called “frames”.

If I open up the “frames” folder, and if I close off the Figma plugin, now you can see here that if I open up one of those images we’ve got one of our frames that has been exported with comments. That would be “Principle One” the “Principle One” frame, and you can see here there’s a little pin that is showing up with the number two on it, and in our export here, we’ve also got a little number two pin on our export. If I go up to the other design, you can see we’ve got another pin with the number one which correlates to the pin in Figma also with a number one. This is exactly marking where those threads are showing up in Figma, just so you can actually have a visual reference of the comments in the CSV and JSON files without needing to be in the Figma file. This can be really handy for sending to clients or just referencing feedback without being in the Figma file.

To give you an idea of what these two files look like, I’m just going to double click on the CSV file, and in my case it’s just going to open up the “Apple Numbers” program, it might open up “Microsoft Excel”, or you could drag this into Google Sheets; it’s really up to you. You can see here it’s displaying all of my comments that we just saw from Figma. If I open up the Figma comments again you can see in our CSV file that we’ve got a few things. I might just zoom in, so you can see it a bit more clearly. It’s telling us what frame the comment is on; for example we’ve got the “Intro” frame over here, so we’ve got “Intro” frame and then it’s telling us what number the comment thread is. We’ve got comment thread number one, and then we’ve got the different comments and when they were created, so you can see here this one was created at 47 seconds after that time, and then we’ve got 54 seconds, this one was created just after. It’s in the order of of those comments, and the other thread that we’ve got is the number two thread.

If I jump back to that one over here as I said this one’s actually been marked as resolved and you can see here that it’s telling me what time that thread was actually marked resolved. You can see not only was it resolved, but you can tell what time it was actually resolved, and on what day. Once again, we’ve got our messages from the thread and the comment thread pointing to number two, so for example, if I opened up the image that we had from the frames; we’ve got the frames here, so I could open up the corresponding frame. For example, “Principle One”, I can open that up and I can see here comment thread number two is here; I know exactly what part of the files being referenced from the CSV just by correlating the comment thread number with the frame and the comment thread number and the frame. These these two things will always match up, so that’s just a really nice visual reference for showing you your Figma comments that were exported to the CSV.

The other file that we have is the JSON file. I’ll just open that one up, too; this is our JSON file, and it has the exact same data as the CSV file except we’re using an array of JSON objects. This can be helpful if you’re a developer, if you’re working with developers it’s most likely that they’ll prefer to have data exported in a JSON format because it’s much easier for them to work with as opposed to a CSV. CSV files can be really good for sending around to internal stakeholders, or sending to clients, or just exporting it for yourself to sort of check off to-do lists; that can be really handy, but for developers and people who want something a little bit more technical, a JSON file might be exactly what you’re looking for. Once again, this is going to export all of the comments all of the dates, the messages, the usernames, the comment threads, the frame, all of that data is being exported from Figma into the JSON file.

Those are the two files that you’re going to get along with the images. That’s basically it; it will automatically export every single frame, so you don’t have to worry about checking which frames and and which pieces of the design need to be exported, it will just grab every single comment whether it’s resolved or not, and you can basically just filter down that information however you choose in the CSV itself. You’ll basically be able to export all the comments in bulk and and that should be way easier than having to sort of manage each individual comment or each individual frame.

I hope that’s been helpful if you’ve been looking for a way to export Figma comments to CSV or export Figma comments to JSON, this is the the easiest way and the quickest way to do it. I hope you have some success in your team if you decide to give it a go, and we’ll be back very soon with more Figma tutorials just like this one. Thanks again for watching.