How to Comment in Figma When You Review Your Website Design
Leaving a comment in Figma takes a click, and pinning each note to the thing which it describes is the habit that saves the most time. How to comment on a website design in Figma, and what makes a comment quick to act on.
Mike Lopez
Designs and builds websites and B2B software
On this page
To comment in Figma, you press C, click the exact spot on the design which your note is about and type it, and I think that one habit of pinning each note to the thing which it describes saves more time in a website project than anything else a reviewer can do. In the last week of September one round of feedback on a website design reached me as a PDF with 63 sticky notes on exported screens, and every note had to be matched back to its frame before any of the work could start, while the 29 comments which another reviewer left in the Figma file itself were all applied in a single day, because each one already sat on the page which it was about.
So this post is written for you as the person who reviews the design, with the steps for leaving a comment and the few habits which make each comment quick to act on.
What you need before you can comment
Your designer shares the file with a link or an invitation, and the link opens in your browser, so there is nothing to install. Figma lets anyone with at least can view access comment on a file, on any plan, according to its guide to adding comments to files, and its guide to seats lists the free View seat as one which can open files and comment, so a free Figma account and view access are all that a review needs.
How to leave a comment
Press C, or pick the comment tool
Press C on your keyboard, or choose the comment tool in the toolbar, and the pointer turns into a comment pin. Shift and C together hide and show the comments which are already on the design, which helps when you want to look at a page without the pins in the way.
Click the thing which your note is about
Click on the part of the design which your note is about, such as a heading or a button, or drag across an area to mark a whole section. A comment which you place inside a frame attaches to that frame and moves with it when the designer rearranges the canvas, so I would always click on the design itself rather than beside it.
Write one point and post it
Type your note and post it with the send button. You can mention a person with @, which sends them an email as well as a notification inside Figma, and a comment or a reply can carry up to five images in PNG, JPEG or GIF, such as a screenshot of a website which does something that you like, all of which Figma describes in the same guide.
Keep one point in each comment
Each comment in Figma has its own thread and is resolved on its own, so a comment which holds three points mostly ends up two thirds done with nowhere to say so, while three comments can each be answered and closed as the work happens. Figma’s own team made the comment box smaller in its 2021 redesign to encourage short feedback which is easy to follow, as its post on the redesigned comments explains, and I think that is the right instinct.
Figma also numbers every comment in the comments panel, and on the projects where I work from comments, the reviewer and I refer to them by that number, so a call can move quickly through which numbers are done and which need a decision, without anybody hunting for the right note.
Say what you see, and what you would like
The most useful comments describe what you noticed and why it matters, and then leave room for the designer to suggest the fix, because the fix which you have in mind may be one of several, and the reason behind it is what the designer needs most. I would write a comment the way you would explain it to someone standing beside you, and I would ask a question as a question, since “could this button say Book a call?” starts a better conversation than “change the button”.
| Instead of | Try |
|---|---|
| “Make it pop” | “The button blends into the photo behind it, could it stand out more?” |
| “Change this” | “This heading says Our Services, could it name the three services instead?” |
| “Not sure about the colours” | “The grey text is hard for me to read on my phone outdoors” |
| “Move this up” | “Most of our calls start with prices, so I think this section should come before the team” |
| “See my email” | The point from the email, pinned to the part of the page which it is about |
A comment about the words on the page is useful too, but if most of your comments turn out to be about the copy, I think that is a sign the words should be agreed before the design, which is the order I explained in website copy before design.
Check the phone frames as well
Every page which I design has a phone frame beside the desktop one, and the phone version is a separate frame in the file, so I would read both and leave comments on each, because a heading which fits on one line on a laptop can wrap into four lines on a phone, and a button which sits beside a photo on a laptop can end up below it. A comment on the desktop frame which also applies to the phone is still worth a short note on the phone frame, so that neither version is missed.
Leave resolving to the person who asked
Resolving a comment hides it from the canvas and from the comments panel, and anyone who can view the file is able to resolve one, so the open comments are really the list of what is left, but only while each comment stays open until the person who wrote it agrees. On my projects I reply to each comment with what changed, leave it open and let the reviewer resolve it after a look, so nothing disappears from the list before the person who asked has seen the change.
Figma attaches a comment to the frame which holds it rather than to the button or heading inside it, so when the designer moves something within a page, the pin stays where it was and can end up pointing at the wrong thing. While a round of comments is open I add new sections at the end of a frame rather than in the middle, and I rearrange the page once the comments are resolved.
Where to start
When your designer next sends you a link, I would read the whole page once without commenting, then go back to the top and leave one comment for each thing which you would change, pinned to that thing, and finish with the phone frame. If your feedback is already in an email or a document, it’s worth moving each point onto the design as its own comment before you send it, and if the design is part of a redesign, my website redesign checklist lists what should be agreed before a review starts, while my projects page shows the kind of websites which I design.
Frequently asked questions
Can I comment in Figma without a paid plan?
Yes, because Figma’s guide says that anyone with at least can view access can comment on any plan, and the free View seat can open files and comment, so a free account and a link from your designer are enough.
How do I comment on a specific part of a design in Figma?
Press C, then click directly on the part of the design which you mean, or drag across an area to mark a section, and the comment attaches to the frame which holds it.
How do I see resolved comments in Figma?
Open the comments panel, use its filter menu and turn on Show resolved comments, where you can also reopen a comment by unticking its checkmark, as Figma’s guide to viewing and managing comments shows. The same menu sorts comments by date or by unread, and can show only your own threads.
Can I add a screenshot to a Figma comment?
Yes, a comment or a reply can carry up to five images in PNG, JPEG or GIF, which is a good way to show a reference from another website.
What is the difference between comments and annotations in Figma?
Comments are a conversation about the design, which ends when each one is resolved, while annotations are notes which belong to the design itself, such as what happens when a button is tapped, and stay attached to their layer for the developer. I explained how I use them in my post on how to add annotations in Figma.
