Comments and feedback in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a comment in Figma.

Figma

figma.currentPage.selection[0].[1] = 'Great design!'

Drag options to blanks, or click blank then click option'

Acomment

Bnote

Cfeedback

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'note' or 'feedback' instead of 'comment'.

Trying to add comments to the page instead of the selected object.

In Figma, you add comments using the comment property on selected objects.

2fill in blank

medium

Complete the code to retrieve all comments on the current page.

Figma

const comments = figma.currentPage.[1];

Drag options to blanks, or click blank then click option'

Anotes

Bcomments

Cfeedbacks

Dmessages

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'notes' or 'messages' which are not valid properties.

Trying to access comments from the document instead of the current page.

The comments property holds all comments on the current page in Figma.

3fill in blank

hard

Fix the error in the code to post a comment at position (100, 200).

Figma

figma.currentPage.[1]({ x: 100, y: 200 }, 'Looks good!')

Drag options to blanks, or click blank then click option'

AcreateComment

BpostComment

CaddNote

DsendFeedback

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like 'addNote' or 'sendFeedback'.

Confusing method names that sound similar.

The correct method to add a comment at a position is createComment.

4fill in blank

hard

Fill both blanks to filter comments by author and get their messages.

Figma

const authorComments = figma.currentPage.comments.filter(c => c.[1] === 'Alice').map(c => c.[2]);

Drag options to blanks, or click blank then click option'

Aauthor

Bmessage

Ccontent

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'user' or 'content' which are not valid comment properties.

Mixing up author and message properties.

Comments have an author property and their text is in message.

5fill in blank

hard

Fill all three blanks to add a reply to a comment and then resolve it.

Figma

const reply = comment.[1]('I agree!');
comment.[2] = true;
figma.notify('[3] resolved');

Drag options to blanks, or click blank then click option'

AaddReply

Bresolved

CisResolved

Dcomment

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'resolved' as a property instead of a string message.

Confusing 'comment' with method names.

Use addReply to reply, set isResolved to true to resolve, and notify with 'resolved'.

Practice

1. What is the main purpose of using comments in Figma during a design project?

easy

A. To communicate directly on designs and share feedback

B. To change the colors of design elements

C. To export the design files

D. To create new design layers

Solution

1. Step 1: Understand the role of comments in Figma

   Comments are used to communicate and give feedback directly on design elements.

2. Step 2: Identify the correct purpose

   Changing colors, exporting files, or creating layers are not related to comments.

3. Final Answer:

   To communicate directly on designs and share feedback -> Option A

4. Quick Check:

   Comments = Communication and feedback [OK]

Hint: Comments = direct feedback on designs [OK]

Common Mistakes:

• Confusing comments with editing tools
• Thinking comments change design elements
• Mixing comments with exporting features

2. Which of the following is the correct way to add a comment in Figma?

easy

A. Right-click and select 'Delete Comment'

B. Double-click a layer to add a comment

C. Click the Comment tool and click on the design to place a comment

D. Use the Text tool to write comments directly on the canvas

Solution

1. Step 1: Recall how to add comments in Figma

   Comments are added by selecting the Comment tool and clicking on the design area.

2. Step 2: Eliminate incorrect options

   Right-click 'Delete Comment' removes comments, double-clicking a layer edits it, and Text tool adds text, not comments.

3. Final Answer:

   Click the Comment tool and click on the design to place a comment -> Option C

4. Quick Check:

   Add comment = Comment tool + click [OK]

Hint: Use Comment tool to add comments [OK]

Common Mistakes:

• Confusing comment adding with deleting
• Using Text tool instead of Comment tool
• Trying to add comments by double-clicking layers

3. In Figma, if a team member replies to a comment and then marks it as resolved, what happens to that comment thread?

medium

A. The comment thread is deleted permanently

B. The comment thread is hidden but can be viewed later

C. The comment thread is duplicated for record

D. The comment thread is locked and cannot be replied to

Solution

1. Step 1: Understand the resolve feature in Figma comments

   Resolving a comment hides the thread from the main view but keeps it accessible for later review.

2. Step 2: Compare options with this behavior

   Comments are not deleted, duplicated, or locked; they are hidden but retrievable.

3. Final Answer:

   The comment thread is hidden but can be viewed later -> Option B

4. Quick Check:

   Resolve comment = hide thread, not delete [OK]

Hint: Resolve hides comments, doesn't delete [OK]

Common Mistakes:

• Thinking resolved comments are deleted
• Assuming comments get duplicated
• Believing resolved comments cannot be reopened

4. You try to reply to a comment in Figma but the reply box does not appear. What is the most likely reason?

medium

A. Your internet connection is too fast

B. The design file is corrupted

C. You are using the wrong tool to add comments

D. You do not have permission to comment on this file

Solution

1. Step 1: Identify common reasons for reply issues

   Permission issues often prevent replying to comments in shared files.

2. Step 2: Evaluate other options

   File corruption is rare and would cause bigger issues; wrong tool would not allow adding comments at all; internet speed does not block replies.

3. Final Answer:

   You do not have permission to comment on this file -> Option D

4. Quick Check:

   Permission needed to reply to comments [OK]

Hint: Check permissions if reply box missing [OK]

Common Mistakes:

• Blaming file corruption
• Confusing tool usage with permissions
• Ignoring permission settings

5. A project manager wants to keep the design feedback organized by showing only unresolved comments on the dashboard. Which Figma feature should they use to achieve this?

hard

A. Filter comments to show only unresolved threads

B. Delete all resolved comments permanently

C. Export comments to a separate file

D. Use the Text tool to highlight unresolved comments

Solution

1. Step 1: Identify how to manage comment visibility in Figma

   Figma allows filtering comments to show only unresolved ones, keeping feedback organized.

2. Step 2: Evaluate other options

   Deleting comments loses history, exporting is not for filtering, and Text tool does not manage comments.

3. Final Answer:

   Filter comments to show only unresolved threads -> Option A

4. Quick Check:

   Filter = show unresolved comments only [OK]

Hint: Use comment filter for unresolved only [OK]

Common Mistakes:

• Deleting comments instead of filtering
• Using Text tool for comment management
• Exporting comments instead of filtering