Skip to main content
Question

Sending the events from prototype when user clicks on a button from last Figma Screen/Design-frame


Hello,

I am new to FIGMA, I am looking for a way to send an event from the FIGMA prototype to the parent window which renders the FIGMA prototype when a user clicks on a particular button(Submit/Done/Complete) from the last screen/design on the FIGMA prototype.

Is this possible? if yes, Please do let me know the steps for implementing it

15 replies

  • 3 replies
  • July 26, 2024

Yes, it is possible to send an event from a FIGMA prototype to the parent window. You’ll need to use the postMessage API to communicate between the FIGMA prototype and the parent window.


  • Author
  • 2 replies
  • July 26, 2024

Thank you @Duane34, for the response. Could u please give me an example of how to do it on the FIGMA prototype ?


  • Author
  • 2 replies
  • August 2, 2024

@Gayani_S,

Could you please help me with this topic?


Gayani_S
Figmate
  • Community Support
  • 1978 replies
  • August 7, 2024

Hey @DivizH, thank you for reaching out and apologies for the delayed response!

I can check this internally with the team, but could you show me a screenshot of your screens and describe again what you’re trying to achieve?
I’d like to understand what exactly you’re trying to achieve here:
“send an event from the FIGMA prototype to the parent window which renders the FIGMA prototype when a user clicks on a particular button(Submit/Done/Complete)”

Also, feel free to share your file if you’re okay to share in the Forum. You can invite support-share@figma.com with “can edit” permission so we I look into this.
Note that users with @figma.com emails on your team do not count towards your billing.

Thanks,
Gayani


Antoine_Dezarnaud

Hello there,

Actually i’m quite interested to know if a solution exist to listen/get prototype events in order to trigger requests on a custom API. That way, it will be possible for a Figma prototype to be connected to something external from it.

Eg : I play a Figma prototype with a button. When I click on the button, I want to be able to request a custom API route on my service.

Is it possible ? If yes, how ? With a plugin, a widget, your REST API ? Thanks


Gayani_S
Figmate
  • Community Support
  • 1978 replies
  • August 13, 2024

Hey @Antoine_Dezarnaud, thank you for reaching out!

I am not quite sure, but I’ve reached out to the team internally and asked for help. Will get back to you once I receive a response.

Appreciate your patience in the meantime!


Gayani_S
Figmate
  • Community Support
  • 1978 replies
  • August 14, 2024

The team has also confirmed that this is possible, like the community members mentioned before:

For more information on how to use the Embed Kit to do this feel free to check this out: https://www.figma.com/developers/embed#control-prototypes.

There’s no direct way to do it within Figma today so you’ll have to make your own website, embed the Figma prototype then use the API above.

Hope this helps!


Antoine_Dezarnaud

Ohh okay I see this is possible when we use embedded thank you very much !

Correct me if I’m wrong but it seems that today it only support those messages :

  • Listen which element has been clicked by id
  • Ask the prototype to navigate to another page by id

But is it possible to change the content of the prototype dynamically ? Eg. change the value of a text in prototype mode
If not, is there a roadmap to support dynamic content in prototype mode ?
It would be a game changer and eliminate the need to use protopie in some cases.

Thanks !


Gayani_S
Figmate
  • Community Support
  • 1978 replies
  • August 15, 2024

Hey @Antoine_Dezarnaud, good question! I am dropping this again to the team to help answer, will get back to you asap.


Gayani_S
Figmate
  • Community Support
  • 1978 replies
  • September 25, 2024

Hey @Antoine_Dezarnaud, the team has rolled out Embed Kit 2.0.

It allow developer to change a component’s variant state.

Here’s an example (with the code) of it in action: https://figma-embed-change-component-state-example.glitch.me/.

This might be also helpful: https://www.figma.com/developers/embed#change-component-state.

Apologies for the delayed message, let me know if this is helpful!


Albert13
  • 3 replies
  • November 7, 2024

Hey @DivizH, may I ask if you managed to post messages from your Figma prototype to the parent window? I followed the documentation Gayani_S provided and I’m able to read the events from the prototype – but these are standard ones. I want to create a set of custom events such as “Sign up completed” and post these to the parent.

Thanks,
Albert


Albert13
  • 3 replies
  • November 12, 2024

Hi @Gayani_S. Do you mind checking this (I couldn’t tag you before).


Gayani_S
Figmate
  • Community Support
  • 1978 replies
  • November 13, 2024

Hey @Albert13, thank you for tagging me, happy to help out!

Feel free to share it with me, I can reach out to the team internally and ask for help.


Albert13
  • 3 replies
  • November 13, 2024

Gayani_S
Figmate
  • Community Support
  • 1978 replies
  • November 14, 2024

Thanks for getting back @Albert13. I’m glad to hear the standard events are working, and I understand the need for custom events like “Sign up completed” to track specific actions. I’ve shared this with the team to get you more details, and I’ll keep you updated as soon as I hear back.

Thanks for your patience in the meantime!


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