Navigate to frame in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Figma

const frame = figma.currentPage.[1](node => node.name === 'Frame 1');

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

AgetNode

BfindAll

CfindChild

DfindOne

Attempts:

3 left

💡 Hint

Common Mistakes

Using findAll returns an array, not a single frame.

Using getNode is not a valid method on currentPage.

The findOne method returns the first node matching the condition, which is used to find a frame by name.

2fill in blank

medium

Complete the code to navigate the viewport to the selected frame.

Figma

figma.viewport.[1](frame);

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

AscrollAndZoomIntoView

BzoomToNode

CfocusOnNode

DmoveToNode

Attempts:

3 left

💡 Hint

Common Mistakes

zoomToNode is not a valid Figma viewport method.

focusOnNode does not exist in Figma API.

The scrollAndZoomIntoView method moves the viewport to show the specified node.

3fill in blank

hard

Fix the error in the code to correctly find a frame named 'Dashboard'.

Figma

const dashboard = figma.currentPage.[1](node => node.name === 'Dashboard' && node.type === 'FRAME');

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

AfindAll

BgetNodeByName

CfindOne

Dfilter

Attempts:

3 left

💡 Hint

Common Mistakes

Using findAll returns an array, causing errors when assigning to a single variable.

getNodeByName is not a valid method.

findOne returns the first node matching the condition, which is correct here. findAll returns an array, and filter is not a method on currentPage.

4fill in blank

hard

Fill both blanks to select a frame named 'Settings' and navigate the viewport to it.

Figma

const settingsFrame = figma.currentPage.[1](node => node.name === 'Settings' && node.type === 'FRAME');
figma.viewport.[2](settingsFrame);

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

AfindOne

BscrollAndZoomIntoView

CfindAll

DzoomToNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using findAll returns an array instead of a single frame.

Using zoomToNode is not a valid viewport method.

Use findOne to get the frame and scrollAndZoomIntoView to move the viewport.

5fill in blank

hard

Fill all three blanks to find a frame named 'Profile', check if it exists, and then navigate the viewport to it.

Figma

const profileFrame = figma.currentPage.[1](node => node.name === 'Profile' && node.type === 'FRAME');
if (profileFrame !== [2]) {
  figma.viewport.[3](profileFrame);
}

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

AfindOne

Bnull

CscrollAndZoomIntoView

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Checking against undefined instead of null may cause logic errors.

Using findAll returns an array, causing errors in the if condition.

Use findOne to find the frame, check against null to confirm it exists, then use scrollAndZoomIntoView to move the viewport.