Skip to main content
March 14, 2024
Solved

How to listen for frame changes in embed

  • March 14, 2024
  • 7 replies
  • 565 views

Hi,

I know that Figma emitted events so that developers can listen to some of the event that Figma notifies, but how do I know if the prototype is presenting the last frame?

Thank You!

This topic has been closed for replies.
Best answer by tank666

Figma recently updated the documentation for embeds.
https://www.figma.com/developers/embed#:~:text=Events%20emitted%20from%20the%20embed

Store the nodeId value of the last frame and compare it with the presentedNodeId value that is available in the event message data with the PRESENTED_NODE_CHANGED type. Or with targetNodeId in a message with the MOUSE_PRESS_OR_RELEASE type.

7 replies

Gleb
Power Member
March 14, 2024

This is only available when running a plugin and using the plugins API, which is not accessible in embeds. There is no way to listen to events in embeds.

tank666
tank666Answer
March 14, 2024

Figma recently updated the documentation for embeds.
https://www.figma.com/developers/embed#:~:text=Events%20emitted%20from%20the%20embed

Store the nodeId value of the last frame and compare it with the presentedNodeId value that is available in the event message data with the PRESENTED_NODE_CHANGED type. Or with targetNodeId in a message with the MOUSE_PRESS_OR_RELEASE type.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
Gleb
Power Member
March 14, 2024

Oh wow cool!

March 18, 2024

Sorry for the late respond.

Thank you but, how do I get that nodeId? If I’m trying to get that from the NEW_STATE event, the nodeId is not the same as the presentedNodeId that emitted from PRESENTED_NODE_CHANGED event.

Here’s how I handle that:

      window.addEventListener('message', event => {
        const { type, ...rest } = event.data;
        if (!type) return;
        if (type === 'NEW_STATE') {
          console.log(
            '[NEW_STATE] event.data.data.nodeId:',
            event.data.data.nodeId
          );
          return;
        }
        if (type.includes('PRESENTED_NODE_CHANGED')) {
          const { presentedNodeId } = rest.data;
          console.log(
            '[PRESENTED_NODE_CHANGED] presentedNodeId:',
            presentedNodeId
          );
        }
      });

And this is the logs:

tank666
March 18, 2024

Get the nodeId of the last frame manually (for example, from a prototype or design link) and hardcode it.

This is a new API that I think is just starting to develop. Perhaps more features and data will be added in the future.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
March 19, 2024

Right, Thank you!!

July 30, 2024

@tank666,

I have similar question. I was able to know and compare it with the last node id. However, there is a scenario where the last FRAME has 2 buttons (Button A and Button B).

If they click on Button A. I want to notify the parentWindow (where prototype is running) that the “User is done interacting with a prototype. So close the prototype”

If they click on Button B. I want to continue showing next-page.