Create 'Copy text to clipboard' action for 'On Click' interaction

Not sure how common/uncommon this issue is, but recently I’ve had a few projects from clients where they want to use the prototype preview as a final product. In the most recent project, they have lists of text that they want people to be able to copy (within the preview).

I know that the content in the preview is not built with markup (rather just a canvas), so any kind of solve that requires selecting text would be a huge change that would require an overhaul of the entire engine, and hence, is unrealistic to implement. However, creating an interaction that will tie an ‘On Click’ to copy text to the clipboard would be much easier to implement.

In the list of options for ‘On Click’ you could add ‘copy to clipboard’, then in the settings for the action you could provide a text box where the text to be copied could be pasted in. Alternatively you could have the option to copy an image instead.

Thanks!

4 Likes

Hi @Sean_Metcalf1 , Thanks for sharing your thought about prototype action! I completely understand how beneficial this feature would be for your projects.
We are eagerly looking forward to seeing the community’s response to this. Don’t forget to cast your vote for your idea!

Thanks,

hi, yeah this feature could save the day, I was just searching if it’s possible to do

1 Like

@Sean_Metcalf1 you can achieve copy to clipboard with the CMD+C and paste with CMD+V.

example video attached

@Shaul_Vainblat I believe they want the text to be copied to the clipboard so that the text can be pasted elsewhere, not in the same prototype. For example, copy the text from a prototype and paste it on an e-mail app.

2 Likes

This is exactly what I want to do as well, unclear if this is possible without javascript.

To get things moving, I’m basically making a button tooltip that says " [name] copied to clipboard and including the code I found on W3 schools for the dev.

shows the action visually

In the browser its super easy with JS, but I was trying to get something to work for the prototype, as the client in my case wants the prototype AS the final product (which I know is odd). As far as I know (and I would love this if it was ever possible), you can’t run any code (add-ons, etc) in prototype mode.

My team is working on outline our brand standards; we were planning on using a Figma prototype for this but we really need this feature to do so. The non-designers need to be able to easily pick up hex codes and microcopy.

For the project that inspired this suggestion, I ended up creating a google sheet that had all the values, then created a button-link labeled ‘copy from google’ on the page. Not a great workaround of course, but at least keeps all the values together.

Thanks for the workaround idea. My org blocks Google Workspace but I might be able to try it with excel, if I’m able to give the necessary permissions.