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

Ask the community
1

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

2

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.

3

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

4

@Gayani_S,

Could you please help me with this topic?

5

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

6

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

8

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!

9

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!

1 Like
10

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 !

11

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

15

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!

1 Like
16

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

17

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

18

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.

19

Great! Please see https://forum.figma.com/t/sending-the-events-from-prototype-when-user-clicks-on-a-button-from-last-figma-screen-design-frame/82537/16

20

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!