Video transcript
14-minute video ·
Today I’m going to be showing you how to gather external comments and feedback from clients and stakeholders without them needing a Figma account, directly into your Figma designs.
We’re going to be doing this by using a new Figma plugin called Commentful. To get started, we’ll just go to the Figma Community, search for the word “Commentful” and then under the “Plugins” tab you’ll see Commentful pop-up. Just go ahead and click on the “Install” button and then you’ll be ready to go.
I’m just jumping back into my designs now and to run the Figma plugin we just right click anywhere, go down to “Plugins”, click on “Commentful” and that’ll fire up the Figma plugin that we just installed a moment ago.
If it’s the first time you’re running the Figma plugin in the file you’ll just need to click on this “Connect To Figma File” button and jump into there; you’ll get a couple of instructions on how to get your Figma API token. Just go to your settings page in Figma, go down to the API tokens, paste that in there and click on “Save Token”. Then in your current file you just want to go up to the “Share” button in the header, click on that, then click on “Copy link” and paste that into the text box and click “Save URL” and that’s just going to connect up your Figma file to the Commentful Figma plugin.
I’ve got another Figma tutorial on our YouTube channel which goes through all of the ways that you can organize your native Figma comments, this is more for internal Figma feedback with you and your team, but for today we’re going to be looking at a different feature, which is under the “Reviews” tab. If you click on the “Reviews” tab in the Commentful Figma plugin; you basically want to jump into that and under the “Reviews” tab, this is where you’re going to be able to create review links that you can send to your customers or stakeholders and they’ll be able to leave you Figma comments, text feedback, and image feedback without them needing to have a Figma account. Then you can basically see all the feedback coming straight through into the Figma plugin and action that automatically in Figma.
To get started, all we need to do is click on the “Create New Review” button and that’s just going to open up this little panel which will reveal all of the frames that are on your current Figma page. You can order these by either dragging and dropping them in the list or you can just quickly order them by column or row or layer name; in this case I’m going to sort by left to right in columns, so that’s just going to sort it by the way we see it on the Figma page. Then you just select the frames that you want to include in the review, so I’m just going to include these three to start with, and I’m going to say let’s review the “App Profile Screens”, I’m going to call it that and click the “Create New Review URL” button and this is going to go ahead and up upload the three frames that we just selected in the order that we selected them, and then it’s going to give us a link that we can share with our clients and stakeholders to review.
That’s finished now, and we can optionally personalize the URL if we know the name of the person that we want to be reviewing the link. In this case I’ll just put my name in there, and I’m going to click on the “Passwordless URL”, so this link doesn’t need a password but you can also send a URL with a password if you want to do that instead. I’ve just copied that URL and I’m going to paste it into my browser and you’ll see it load up with the designs that we just selected in Figma. I’ve got my three frames here and they’re basically just a snapshot of the Figma frames from that moment in time. If you were to update your Figma file at the moment, like if you just change some of these text layers or images or moved anything around, that would not affect the uploaded images on this link. The review is looking at the link at the time that you uploaded it rather than a live Figma version that’s a work in progress.
There’s a few ways that a stakeholder can leave feedback; the first is just generic feedback, exactly the same as you would see in the native Figma comments. If they click anywhere, they can click on this logo and say they want to “make that bigger”, they can do that, they can add formatting, they can add emojis, they can add links all that good stuff, and then they can just submit those comments. You can see here that’s been left by me and it’s been created at this time, and that’s what the comment looks like.
More importantly, we can actually now jump back into our Figma file and you’ll see the new review pop up there. If we click on the review, I can see that the comment that I just left has automatically come through to the Commentful Figma plugin itself, and I can jump to that comment location just by clicking on the pin here, and you can see it’s referring to this logo on the “Detail Current Bid” frame. That’s just a really easy way to jump to it, so I could action that feedback in the file and then I could check it off in the feedback reviews page, and then I would know that’s basically done, so you can close that off and you can see what the progress is for any given review.
We’re going to go ahead and leave some more review feedback, and this time instead of leaving comments, we’re going to click on this “Request Text Updates” button in the top of the page in the review link. What this does is it switches it into a mode where the reviewer can actually leave specific text feedback on real Figma text layers that correspond to your Figma file. For example, I could give some feedback on this follow count, so I could change that from “150” to “2000” or something like that, change that, I can change this one to “9000”, and you can just leave any feedback that you want. If this needs to have an “http” prefix, I can do that, I can add some exclamation points, I can remove text if I need to and submit that as a change request. I can see what that looks like in here, so I get a clear difference of what the original content was and what the requested change looks like, so I can check all those out inside of the app.
More importantly, I get all of that content fed directly back into my Figma file instantly; I don’t need to wait for them to finish all their feedback to be able to see it, I get all of this coming into my Figma file in real-time, and I can jump around and see exactly where that content has been left, where the feedback’s been left. The coolest part is I don’t even need to manually update this, I can just click on this button that says “Update in Figma”; if I click on that, that will automatically make the text changes that have been requested for me. You can see here I’m just clicking on these buttons and it’s automatically checking off the task for me at the same time. I’m just going to do the last one now, so I’m going to click “Update in Figma” and you can see here it’s made that change. You can see before it used to have that suffix on the end, it didn’t used to have the “https”, that’s now been added in, so all of this feedback’s just been actioned within a few seconds basically without me having to manually figure out where the text changes were and manually update them on my Figma layers, so you can see all the feedback’s been completed there.
Along with text changes your reviewers can also leave image update feedback. If you click on the “Request Image Updates” tab at the top this will also highlight any layers that contain images, so that’s bitmap images in your Figma fills, Figma image fills and that means that they can actually leave specific image feedback on certain Figma layers. If I knew that this image here needed to be updated, I can just click on that, and from my computer I can just drag and drop an image. I’m just going to drag this image, because I want to update the avatar, and that’s just going to upload the image to the review link. It’s telling me that it’s been uploaded, and once again I can see here if I click on this feedback pin that the new feedback or the image requested change has been set to this.
Again, in my Figma file I can see that pop up instantly as well. I can jump to that see exactly where the image change was and once again, more importantly, I can just update that instantly in Figma. If I click on “Update in Figma”, that’s going to download the image and automatically swap it out for me, I didn’t need to save it to my desktop, I didn’t need to do anything like that; I didn’t need to manually drag it into my Figma image layers, I just automatically click “Update in Figma” and that feedback will come through into the design. It adds the image as an extra layer fill, so if you were worried that it was replacing the original image, don’t worry it’s still there; if you wanted to see that you can just hide that top image and the original layer is still underneath, and it just adds it at the top.
You can basically do whatever you want with that image now, so if you do need to move it around or change the way that it feels you can do that. You could change it if you need to. That’s what that looks like there, and again, you can just you can just go through and do this for for any image you need to; you can add more feedback. I can drop some more images in there for this other little avatar here, and once again, we see it instantly come through into Figma. If I know that I want to update that, I can check out where that’s been left, and I can decide if I want to accept it. In this case I’m just going to update in Figma againm and there we go, we’ve got our brand new image that’s been requested.
That’s what that looks like, and that’s basically it. You can send these around as many times as you want; you can also hide the completed feedback, so if you’ve already checked off these and you want to tidy up this list, you can check the “Hide Completed Feedback” toggle and that will basically just hide all of the client feedback that’s already been done, and if any new Figma comments or feedback comes through, so if we get some button feedback that’s not been completed yet, all of our hidden feedback is hidden, but all of the new feedback will still show up. It just tidies up that list a little bit more in a way that you don’t have to sort through it visually.
The other thing that you can do is export the Figma comments and Figma feedback to a CSV file. If you want to export this to a different program, or just look at it all in a spreadsheet, or print it out even for some reason, you can do that. You just click on the “Export Feedback” button and that will automatically generate a CSV for you, so if we save that to our desktop and open that up that, we’ll automatically have basically all the feedback that we’ve just been collecting from our stakeholder or from our client that we could see in here. I’ll just open that CSV, and I’ll just show all the completed ones again, just so we can compare, and you can see here it’s basically got all of our feedback the same as what we can see in the Figma plugin, but it’s just in a spreadsheet. We can see what the feedback type is, if it’s a comment, an image change or a text change, what the pin number was, what the comment was, what that feedback was, what the requested image looks like, and what the text changes look like.
It’s got the previous text and what that text was requested to be updated to, and then you can see the completed status. when it was created. when it was last updated. and also a link to the pin itself in the web app, so you can you can jump in there as well. That’s what the CSV export looks like with your feedback comments from stakeholders, so that might be useful if you’re wanting it in that format as well.
In terms of the web link you can delete feedback, too, if you accidentally made a mistake or the feedback no longer applies. You can remove that just by clicking on the “Delete Feedback” button and then clicking “Ok” to confirm, and that will basically remove that feedback from not only the web link, but also from your plugin Figma comment list as well; that’s just if you need to delete any feedback. Alright, so that’s currently all the ways you can leave client feedback and Figma comments without a Figma account using the “Reviews” web link for Commentful. You’ve got the native Figma-like comments, text update change requests and image update requests. there will probably be more added over time, but at the moment that’s what it looks like.
Hopefully that’s a really good start if you’ve been wanting to gather client feedback or Figma comments without inviting them into the Figma file or making them sign up for a Figma account, or using a completely different third-party service that you need to manually export your Figma designs from and into, and manage those links and then somehow get that feedback back into Figma; this is just a much tighter feedback loop that integrates directly with the Figma layers themselves and directly with your Figma file itself, which is where all the feedback is going to be actioned. To me, it makes sense that you would try and get that as close as possible to the layers.
If you’ve been wanting to streamline your feedback process, your external feedback process or internal feedback process, feel free to give the Commentful Figma plugin a try and hopefully it improves your workflow and just really streamlines things with you and your customers, or clients, or internal stakeholders and gives them an easy way to leave feedback or Figma comments in your Figma designs without a Figma account, or without them having to see your real-time Figma designs if you don’t want them to. That’s going to be all for today; I hope you enjoyed the tutorial, and we’ll be back soon with more Figma tutorials just like this one very soon.
Pro Bundle