How to supercharge and organize your Figma comments using Commentful

Video Transcript

Today I’m going to be showing you how to level up your Figma comments by organizing them and being able to filter them add todo items add tags a whole bunch of stuff. We’re going to be doing this using a brand new Figma plugin called Commentful.

Let’s get started by going to the Figma Community and searching for the term “Commentful”, and under the “Plugins” tab you’ll see Commentful pop-up. Just go ahead and click on the “Install” button on the right hand side, and then you can switch back into your Figma file.

You can see here I’ve already got a few Figma comments in here, just native Figma comments, nothing nothing too crazy. We’re basically going to organize these Figma comments in a way that’s a bit easier to look through rather than just using the native Figma comments panel, which can be a bit tricky if you’ve got a bunch of Figma comments and you’re trying to keep track of them.

To get started we’re just going to right click anywhere, go down to “Plugins” click on “Commentful” and that’s just going to load up the Figma plugin we just installed a moment ago. The first time you run the Figma plugin you’ll just need to connect it to your Figma file. You can do that by clicking “Connect This Figma File” and it’s going to give you some steps just to get your Figma API token; if you go to your settings page in your Figma profile and go down to personal access tokens, just name it “Commentful” or something like that and hit enter, and you’ll receive a token that you can copy and you want to go ahead and paste that in this input field here. I’ve already got one saved in here, so I’m just going to use that one and click “Save Token”.

Then what you want todo is grab your current Figma filem, click on the “Share” button in the toolbar click on “Copy link” and you can close that off and then just go ahead and paste that Figma file link into the input here and click on “Save URL”. This is now going to connect the Figma plugin to your Figma file and sync up all of your Figma comments into the Figma plugin so we can actually see them and start organizing them.

By default, all the Figma comments that you’ve got already in your file or any new Figma comments that you add to the file will get automatically put into the “Backlog”; these are all the Figma comments that haven’t been assigned a different category yet and they’re basically just where all of the new Figma comments go.

To create a category, we just go over to the right hand side here click on any of these status icons, click on a color, and then give it a label; I’m going to call this one “Completed”, then I’m going to click on “Add New Custom Status”, and you can see here it’s added a brand new column to our board here. What we can do is we can actually filter these by resolved status; I’m just going to click on the filters button, and go down to “Show resolved and unresolved Figma comments”, and then in here if I go to my comment and resolve that in Figma.

I’ll resolve a couple of those ones, and we can actually jump to these Figma comments easily just by clicking on these pins here. If I click on any of the pins it’ll automatically jump to that comment on the page, so I’m just going to mark a couple of these as resolved; and it’s worth noting that the Figma plugin refreshes your Figma comments about every 20 seconds, so you might notice that it took took a little bit to update the statuses here, but every 20 seconds or so it’ll refresh these based on any Figma comments or updates that have been made in your Figma file using the native Figma comments feature.

Now we can see here we’ve got our two resolved Figma comments that we just added and what I’m going todo is I’m going to move these into our new category; I’m just going to click on both of those, go down to here in the footer, click on the “Completed” category and then click the “Move” button. You can see here we’ve just moved those two Figma comments into our “Completed” category, so those are out of the way now and you don’t have to worry about those, we know where they’re at status-wise, and we can go ahead and create more statuses for more use cases as well.

I’m going to create one called “In Progress”, then “Create a new custom status” and we’ve just added “In Progress”. I do want this to be in the middle, I don’t want it to be at the end, so I’m going to click and drag that title and just drop that over to the left here; now we’ve got our column in the middle so we can actually start moving these into that category now, and those are more organized as well. These are two that I’ve got “In Progress”, we can edit these labels as well; if I wanted to call this doing I just change the label and update that and that’s been saved there, we can also jump into any of these cards. These are just comment threads from Figma I can click on those get a really nice overview of when it was created, what frame it’s attached, to how many Figma comments exist, and things like that.

The cool thing is I can also give these custom titles; for example this one’s telling me that the social stats are up outdated, so I might call this one “Social Stats Updates” and that’s just going to get pulled through into our cards here. That gives me a way to give it a custom title without just relying on the comment itself, so it’s a nice way of keeping the titles organized as well.

The other cool thing we can do is set a due date, so if I know this needs to be done by the middle of the week, I can set a due date for Wednesday and that’s going to tell me that it’s now due in three days. In our overview I can also get a really clear sense that this card needs to be done in three days, I can set that so if that was already set to last week, it’ll tell me that it was due five days ago, and again you get a really clear indication that this comment needs to be taken care of and and put to the completed column; that’s what that looks like there. \

The other neat thing that we can do is actually tag these Figma comments as well. For example, this one’s telling us in the Figma comment that we need the thumbnails to be bigger; that’s probably a design task, so I’m going to tag that as “Design” and I’m going to tag this one also as “Design” and you can see here now it’s got these tags in our cards that we can actually see as an overview level, but the other cool thing is we can actually now filter by those tags, too. If we decide we only want to see Figma comment threads that are tagged as “Design” we just jump back into our Figma filters, jump into the “Filter threads by tags” input, and if you just start typing the tag it’ll autocomplete it, so we can select “Design” and now. If we close that off, you can see here that those other threads have disappeared and we’re only seeing any Figma comments that have been tagged with the tag “Design”.

I’m just going to clear those again, and we can do the exact same thing with users. If you want to filter by user you can do that, so if I type in one of the usernames, it’s going to autocomplete and I’ll just click on that one, and this is only going to show me threads that were created by “Figmatic”. I can also “Show resolved and unresolved” so we get a few more results in there; you can see these ones have been created by “Figmatic”, but I can change that to “Adam” so I can see all of Adam’s Figma comments, and you can see those are in there as well. We can clear those just by clicking on that, but that’s a really nice way of actually seeing which which tags are attached to which comment and you can just narrow that down really quickly.

The other neat thing you can do is filter by date, so if that you only want to see Figma comments that have been added today, or yesterday, or in the last week, you just click on one of these presets and that’ll automatically select “today”, so these Figma comments were all created today, but we could also say we want todo the last seven days, or we want to just do yesterday, or you can just pick your own date range. You can just jump through these if you want to see everything from January, just jump to there, select all of January, and that would show you everything that’s been in January. I don’t have any in January, so you can see here it’s just showing nothing, but I’ll just clear that.

The other cool thing we can do is filter by comment location, so if you’ve got a bunch of Figma comments in your file and you only want to see Figma comments on a certain frame or a certain place, for example, on the “Notification” frame here, I can see that we’ve got one comment on there; I’m just going to unselect all of the other locations and only show any Figma comments that are attached to the “Notification” frame here. I’m going to close off my filters and you can see here it’s just showing this one comment which is attached to the “Notification” frame on page one; that’s what that looks like there. That gives you a bit of an overview of what the filtering system looks like.

The other neat thing that we can do is automatically search all of our Figma comments instantly. If I start typing a keyword, you can see here it’s going to pre-fill those results and show me where the highlight is in the in the keyword. This is just a really quick way of searching all of your Figma comments for a specific keyword instantly and you don’t have to filter around if that you’ve got a keyword you want to look for, you can just do that and then all you need todo is click on one of these results, or use the keyboard, and that will jump you straight to the comment and open up the thread overview as well. That’s a really quick way of finding Figma comments if what you want to look for in the actual message content or in the title field here.

We can also reply to Figma comments. You can see here it’s just loaded up this comment here, that’s on Figma Comment Thread #1, and I’ve decided I want to reply to that comment, so I’m just going to have a quick look at what that actually looks like. If I find my #1 comment, which I think is actually resolved; that one’s already been resolved, so let’s leave a comment on #2; we’ve got our number two comment here. I’m just going to open up the card and this is talking about “notification thumbnails”, so we’ll just say “No worries, I’ll update this straight away”; and the cool thing is we can actually use markdown formatting to make these Figma comments a little bit more clear and concise. I can add bold, italic, strikethroughs, ordered lists, unordered bullet lists; I could write a list of file names or something just by clicking on that unordered list, and then I could say “image.jpg”, “image2.jpg”, and just add a little label I’m “uploading to”.

Okay, that’s what that looks like and you can also add emojis of course, so we can just drop in a emoji and links as well. We can actually insert links if we wanted todo that, so we could add a link to “uploading” and put that as “figma.com” or something like that, and that’s what it looks like in the preview here. If we want to reply to that thread just hit “Reply To The Figma Thread” button, and that’s going to post the reply and refresh our Figma comments. You can see there it is right in our thread that we already had open.

The neat thing is if we actually go to Figma now, and jump to that comment you can see here we’ve got one reply; and there we go, that’s the reply that we just added through the Figma plugin and it’s posting it to Figma because we’re connected to Figma using the Figma comments API; all of the Figma comments that you leave through the Figma plugin will automatically get fed into Figma as well.

Even if you’re not using the Commentful Figma plugin, that content is still available to anyone looking at the native Figma comments as well; the only difference is in here we’ve got the markdown formatting, it’s raw text; it’s still readable, it’s still meaningful, but when you do read that in the Commentful Figma plugin, that’s when you’re really going to get the benefit of having the actual formatted lists, having the actual formatted markdown, and things like that, so that’s what that looks like.

The other cool thing we can do is create todo lists. We can create todo lists in two different ways; we can either assign todos to a certain Figma comment, in this case I’m going todo that; I’m going to say jump to the “My Todos” tab, and I’m just going to insert a todo here. I’m going to say “Upload image.jpg from Dropbox”, or something like that, and I’m just going to click “Add Todo” and you can see here it’s added todo to our items for that Figma comment. I can add another one, so I’ll say “Upload second image from Dropbox”, add that as a todo as well and then we can actually start checking these off. We can check those off and see what the completed checklist looks like, we can also hide those, but the neat thing is we can actually see an overview of that from our Figma comment thread cards as well. We can see here that we’ve got 50 todos completed on this specific Figma comment card.

Even more useful is jumping to our “My Todos” tab; up in the header here if you click on the “My Todos” tab and then go to the selector up here, and we’re going to change this from “Private Todos” to “Assigned Todos”. Basically, what this tab allows you to do is see an overview of every todo item that’s been assigned to you on different Figma comments. We can see for example the ones we just added to this Figma comments thread, here those two we just added in those have automatically fed through to our personal todo list, so if someone else is assigned these to us, or if we assign them to ourselves through the Figma comments, we get that all in the one place and we don’t have to go looking around for what we’re meant to be working on, it’s all in a single place where you can just go through and check these off.

I can just go ahead and check those off like any normal todo list, and I can hide the completed lists if I don’t want to see them anymore, and I can also leave them on unhidden or just hide the todo items as well. The other cool thing is I don’t need to go back to the thread every time if I know I want to add another item here, I can just do that, I can say “Another todo here” and add that todo as well, and that’s automatically going to add it to our own list but also add it back to the todos list on the Figma comment thread; everyone’s going to be able to see that at the same time, and you don’t have to go digging around for those those Figma comments there.

The other way we can add todos is by going back to the Private Todos; if we just change this filter up here to say “Private Todos”, what we can do is create our own private todo lists. If I say “My Design Tasks” and create that as a new list, this is going to add a list that only we can see, no one else can see this list, this is just for us, just looking at this page. We can create a “My Design Tasks” list and start adding our own todos, so we can say “Update the the assets” and add that as a todo, we can say “Do a copy review before sending out”, add that as a todo; so this really becomes your own private todo list. If you have multiple categories of lists, you can just create new lists as well, so we can say “Design Review Feedback”, add that as a new list, and now you can add new items under that list as well. You can say “Fix typos in text layers”, and anything like that, you can just add your own todos in there and that’ll just give you your own private todo list that sits separate from any other todos that are shared on those Figma comment threads.

That’s what that looks like there, and as I said you can see these on the actual Figma comment thread cards, just to get a really clear overview of what’s been completed what hasn’t; you’ll be able to see those get completed and that’s just an easy trigger to say “Okay, this is probably finished, so we can move that to a different category that resolves the thread”. These are multiple ways of keeping track of tasks, keeping track of Figma comments, organizing them by statuses, tags users, adding todos, all those sorts of neat things; you’re really supercharging your Figma comments, your native Figma comments abilities to organize them in a much more straightforward way that you can’t do normally.

That’s that’s basically what it looks like, that’s all the filtering, that’s all the searching, you’ve also got an alerts panel; if you click on this little “alerts” icon, that’s basically just going to show you a stream of all of the Figma comments in this file in reverse chronological order, so everything that’s at the top is is the newest. If you open that up and you just want to see a really quick overview of what’s been happening in the file in the Figma comments, you just click on that little icon and you’ll get an instant readout of all the Figma comments that have been left, and you can jump into those really easily. That can be really handy, too.

The other cool thing you can do if you want is export these Figma comments to a CSV spreadsheet. Let’s say you’ve got all these Figma comments and someone else wants to have a look at them, or you will need to send them to a stakeholder, or you just want to export them for your own purpose, you can do that in one click just by clicking on the “Export Figma Comments button. If you click on that that’s now exported the Figma comments, so I’m just going to click “Save”, that’s going to save it to my desktop, and if I now open that with my spreadsheet app; in this case I’m just going to use the “Numbers” app that comes with the Mac. If I open up that one this is going to open up the CSV file, so this gets saved out as a CSV, just a standard CSV spreadsheet, and we can see here that all of the Figma comments from our Figma file have been exported into a nice looking CSV file.

This includes pretty much everything you’d want to know; you’ve got your pin number, that’s where the the number of the pin what page it’s on what frame it’s attached to, who posted the comment, what the comment message was, and then you’ve also got your custom statuses; these are the statuses that we added through the Figma plugin; we’ve got our “Doing” status our “Completed” status, that’s what comes up therem we’ve also got tags, so if we’ve added any tags to a comment we can see those in here as well, if we’ve set a due date that’ll pop up in there, created at, resolved at; that’s if it’s been resolved in Figma you can you can get that date in there, and then also we’ve got our link which is basically a direct link to the Figma comment pin itself; if you click on that that would open up your browser, and if you’ve got permission to look at the Figma file that would just jump you straight to the Figma pin and the location of the comment as well; that can be handy if you’re fumbling around in the dark in the spreadsheet and you want to know where the actual comment was on the file, you can just click on that and jump straight to it.

That’s basically a good overview of of what this Figma plugin can do, and I think if you’re interested in filtering your Figma comments in a better way, searching your Figma comments in a better way, or just having a way more organized Figma feedback and approval workflow to be able to track your Figma comments, where they’re at, and who’s who’s meant to be doing what, and what you’re meant to be doingm then I think the Commentful Figma plugin is a really nice way of doing that in a way that really augments the native Figma comments, and keeps them super useful, but just basically augments them with all this extra detail and extra ways of filtering things down. I think that’s really neat, especially with bigger Figma teams where you’ve got a lot of different Figma comments that you need to filter and sort through, this basically allows you to turn your native Figma comments into essentially a Trello style board that’s just way easier to keep track of visually and keep everyone on the same page.

The one last thing I’ll say is if you do need to duplicate your Figma file, it will automatically save your Figma file ID that you set originally to the Figma file in the Figma plugin, so if you duplicate it you’ll just need to re-import or re-link the Figma file. If you were to duplicate this file, for example, you’d want to re-run the Figma plugin click on the “Settings” icon and just click on “Re-link Your Figma File” and that will allow you to re-link the Figma URL with the new Figma file URL, because it’s going to be a different URL, and if you don’t do that it’s just going to keep looking at your old Figma file and using the Figma comments from there. You definitely don’t want that, so just in case you get caught out that’s all you need to do, just click on the “Re-link Your Figma File” button and you’ll be good to go.

You might have noticed there’s another “Reviews” tab up here; I’m going to go through that in a separate Figma tutorial because I think it warrants its own video, but this is basically a way to gather external stakeholder feedback. By using this feature, you can create a review link which lets you basically upload these these frames to a URL and you can send this to any stakeholder or client and get Figma comments, text feedback and image feedback on the frames that you select without them needing to have a Figma account. They can just jump into that URL and open their browser, leave all that feedback for you and that’s all going to get fed back into your Commentful Figma plugin and you’ll be able to go through that check it off; and also automatically make any image and text changes from the customer or from the client or stakeholder. As I said, I’ll go through that in in proper detail in another Figma tutorial because it is its own thing, but I just wanted to briefly touch on that in case you were wondering what that “Reviews” panel was for.

That’s that’s going to be it for today; I hope you’ve enjoyed watching this tutorial if you’ve been wondering how to organize your Figma comments in a more seamless way. This is going to be a really big improvement on the native Figma comments flow if you’ve been dealing with the carnage and chaos of keeping track of them using the native feature over here.

One other thing I should probably mention is you can also create new Figma comments through the Figma plugin. If you go to any of your statuses, you just click on the little “plus” icon and put in a comment title; I’ll say “Make the logo bigger”, and then you just basically want to click on a layer to tag it to, and click on what status you want, in this case it’s already pre-filled to “Doing”, and then you can assign it some tasks. You could say “Review design”, and then you just want to leave a comment, which will be the initial message, so “Please action this as soon as possible”, and we can just bold that to make it a little bit more a little bit more aggressive, because we really want it done immediately.

I’m just going to click on “Post New Figma Comment” and that’s basically created a brand new thread. Before, we did a reply to an existing thread, for example, under the “Figma Comments” tab, in any thread you can reply to Figma comments and keep that thread going, but what we’ve just done is we’ve created a brand new Figma comment thread. If we click on the little pin here, you can see that it’s just dropped it on our frame, and we can see the comment that we just left has been added as well. That’s just a really easy way of adding a brand new Figma thread or brand new Figma comment thread to Figma through the Commentful Figma plugin, pre-filling it to a specific category with a comment title and tags already added right out of the gate. That can be a way to streamline that process instead of leaving the comment directly in Figma, dropping a new comment in there and then basically waiting for it to load up into the Commentful Figma plugin; this basically just gets around that, so you can just add it directly through the Figma plugin, but that choice is totally up to you, so see how you go there.

Thank you as always for watching and we’ll be back soon with more Figma tutorials just like this one, so please stay tuned.