Prototype presentation mode in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start the prototype presentation from the current frame.

Figma

figma.showUI(__html__);
figma.ui.postMessage({ type: '[1]' });

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

Astart-prototype

Bopen-settings

Cclose-prototype

Drefresh-ui

Attempts:

3 left

💡 Hint

Common Mistakes

Using a message type that does not start the prototype.

Confusing UI refresh with prototype start.

The message type start-prototype tells Figma to begin the prototype presentation from the current frame.

2fill in blank

medium

Complete the code to exit the prototype presentation mode.

Figma

figma.notify('[1]');
figma.closePlugin();

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

APrototype exited

BExiting prototype mode

CClosing plugin

DPrototype ended

Attempts:

3 left

💡 Hint

Common Mistakes

Using vague or unrelated notification messages.

Not notifying the user after closing the plugin.

The notification Prototype ended informs the user that the prototype presentation mode has been exited.

3fill in blank

hard

Fix the error in the code to correctly toggle the prototype presentation mode.

Figma

if (figma.currentPage.selection.length > 0) {
  figma.showUI(__html__);
  figma.ui.postMessage({ type: '[1]' });
} else {
  figma.notify('Select a frame to start prototype');
}

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

Astop-prototype

Bpause-prototype

Cstart-prototype

Dtoggle-prototype

Attempts:

3 left

💡 Hint

Common Mistakes

Using unsupported message types like 'toggle-prototype'.

Not checking if a frame is selected before starting.

The correct message type to start the prototype is start-prototype. Using 'toggle-prototype' or others will cause errors.

4fill in blank

hard

Fill both blanks to send a message that navigates to the next frame in prototype mode and notifies the user.

Figma

figma.ui.postMessage({ type: '[1]' });
figma.notify('[2]');

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

Anext-frame

BPrevious frame

CNavigated to next frame

Dprev-frame

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up next and previous frame commands.

Using notifications that do not match the action.

The message type next-frame moves the prototype to the next frame, and the notification Navigated to next frame informs the user.

5fill in blank

hard

Fill all three blanks to create a function that starts the prototype, waits 2 seconds, then notifies the user.

Figma

async function startPrototype() {
  figma.showUI(__html__);
  figma.ui.postMessage({ type: '[1]' });
  await new Promise(resolve => setTimeout(resolve, [2]));
  figma.notify('[3]');
}

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

Astart-prototype

B2000

CPrototype started

Dstop-prototype

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect message types.

Setting the wrong wait time or notification message.

The function sends the start-prototype message, waits 2000 milliseconds (2 seconds), then notifies the user with Prototype started.