Real-time multiplayer editing in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a real-time multiplayer session in Figma.

Figma

const multiplayerSession = figma.[1]();

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

AstartMultiplayer

BcreateMultiplayerSession

CinitMultiplayer

DbeginSession

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method that does not exist in the Figma API.

Confusing session creation with starting or initializing.

The createMultiplayerSession() method initializes a new real-time multiplayer session in Figma plugins.

2fill in blank

medium

Complete the code to listen for changes made by other users in the multiplayer session.

Figma

multiplayerSession.[1]('change', (event) => {
  console.log('Change detected:', event);
});

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

Aon

Bsubscribe

CaddListener

DonUpdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using methods like addListener or subscribe which are not part of the Figma multiplayer API.

Using onUpdate which is not a valid event listener method here.

The on method is used to listen for events such as 'change' in the multiplayer session.

3fill in blank

hard

Fix the error in the code to broadcast a user's cursor position to other collaborators.

Figma

multiplayerSession.broadcast({ cursor: [1] });

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

Acursor

Bcursor.position

CcursorPos

DcursorPosition

Attempts:

3 left

💡 Hint

Common Mistakes

Using cursor.position when cursor is not defined as an object.

Using cursorPos which is not declared.

The variable cursorPosition holds the current cursor coordinates and should be passed directly.

4fill in blank

hard

Fill both blanks to update the shared document state and notify collaborators.

Figma

multiplayerSession.[1]('documentUpdate', [2]);

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

Aemit

Bsend

Cupdate

Dnotify

Attempts:

3 left

💡 Hint

Common Mistakes

Using update or notify which are not valid methods for event emission.

Confusing the data variable with method names.

The emit method sends an event named 'documentUpdate' with the data passed as the second argument, here send represents the updated document data.

5fill in blank

hard

Fill all three blanks to handle a new user joining and update the user list.

Figma

multiplayerSession.[1]('userJoined', (user) => {
  usersList.[2](user);
  updateUI([3]);
});

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

Aon

Bpush

CusersList

Drefresh

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect event listener methods like emit.

Using array methods other than push.

Not calling a UI update function.

The on method listens for the 'userJoined' event, push adds the new user to the usersList array, and refresh updates the UI to reflect changes.