Design review workflows in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a comment in Figma for design feedback.

Figma

figma.currentPage.[1]('Please review this section.')

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

AcreateFrame

BloadFontAsync

CdeleteNode

DaddComment

Attempts:

3 left

💡 Hint

Common Mistakes

Using createFrame instead of addComment

Trying to delete nodes instead of commenting

Use addComment to add feedback comments directly on the design.

2fill in blank

medium

Complete the code to select all frames for review in the current page.

Figma

const frames = figma.currentPage.[1](node => node.type === 'FRAME')

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

Afilter

Bmap

Creduce

Dfind

Attempts:

3 left

💡 Hint

Common Mistakes

Using map which transforms but does not filter

Using find which returns only one item

The filter method selects nodes matching a condition, here frames.

3fill in blank

hard

Fix the error in the code to assign reviewers to frames for feedback.

Figma

frames.forEach(frame => frame.[1] = ['[e-mail]', '[e-mail]'])

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

Areviewers

Bcomments

CassignedReviewers

DreviewersList

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reviewers' which is not a valid property

Using 'comments' which holds feedback text

The correct property to assign reviewers is assignedReviewers.

4fill in blank

hard

Fill both blanks to create a workflow that sends notifications after comments are added.

Figma

figma.on('[1]', event => {
  sendNotification(event.[2])
})

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

AcommentAdded

Bcomment

Cselection

Dnode

Attempts:

3 left

💡 Hint

Common Mistakes

Listening to 'selection' event instead of 'commentAdded'

Using 'node' instead of 'comment' for event data

The event to listen for is commentAdded, and the comment data is in comment.

5fill in blank

hard

Fill all three blanks to create a summary report of comments per frame.

Figma

const report = frames.map(frame => ({
  [1]: frame.name,
  [2]: frame.comments.length,
  [3]: frame.comments.map(c => c.message).join('; ')
}))

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

AframeName

BcommentCount

CcommentMessages

DframeId

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic keys like 'frameId' instead of descriptive names

Mixing up keys and values

Use descriptive keys: frameName, commentCount, and commentMessages for clarity.