Skip to main content
Solved

How to listen for frame changes in embed


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!

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.

View original

7 replies

Gleb
  • New Participant
  • 4699 replies
  • 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
  • Power Member
  • 4794 replies
  • Answer
  • 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.


Gleb
  • New Participant
  • 4699 replies
  • March 14, 2024

Oh wow cool!


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
  • Power Member
  • 4794 replies
  • 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.


Right, Thank you!!


@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.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings