Documentation within Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a comment in Figma.

Figma

figma.currentPage.[1]('This is a note for the design')

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

AinsertComment

BaddComment

CcreateComment

DcommentAdd

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'addComment' which does not exist.

Trying to use 'commentAdd' which is not a valid method.

In Figma's plugin API, createComment is used to add a comment to the current page.

2fill in blank

medium

Complete the code to select a frame by its name in Figma.

Figma

const frame = figma.currentPage.findOne(node => node.name === [1] && node.type === 'FRAME')

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

A'Main Frame'

B"Main Frame"

CMain Frame

D'frame'

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the frame name.

Using single quotes inconsistently.

Strings in JavaScript must be enclosed in quotes. Double quotes "Main Frame" correctly represent the frame name.

3fill in blank

hard

Fix the error in the code to add a text node with documentation inside a frame.

Figma

const text = figma.createText();
text.characters = [1];
frame.appendChild(text);

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

ADocumentation_text

B'Documentation text'

CDocumentation text

D"Documentation text"

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning a variable name instead of a string.

Not using quotes around the text.

The characters property requires a string value, so the text must be enclosed in quotes.

4fill in blank

hard

Fill both blanks to create a rectangle and add a description as its plugin data.

Figma

const rect = figma.createRectangle();
rect.[1] = 100;
rect.setPluginData('[2]', 'This rectangle is for layout')

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

Awidth

Bheight

Cdescription

DlayoutInfo

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing width and height properties.

Using an invalid key name for plugin data.

The rectangle's width is set by the width property. Plugin data keys can be any string, here 'description' is used to store notes.

5fill in blank

hard

Fill all three blanks to add a comment with a message, author, and position.

Figma

figma.createComment({ message: [1], author: [2], clientMeta: { x: [3], y: 100 } })

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

A"Review this section"

B"John Doe"

C50

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting string values.

Using strings for numeric coordinates.

The message and author must be strings in quotes. The x coordinate is a number, here 50.