Skip to main content

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

Sean_Metcalf1

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!

10 replies

J
Figmate
  • Junko3
  • Figmate
  • 2002 replies
  • February 26, 2024

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,

I

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

Yannis_Buge_Design
1 person likes this
  • Yannis_Buge_Design
    Yannis_Buge_Design
Shaul_Vainblat

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

example video attached

1 Attachments
fernandolins_cs

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

Rafael.Matos.da.Silva
Sean_Metcalf1
M
3 people like this
  • Rafael.Matos.da.Silva
    Rafael.Matos.da.Silva
  • Sean_Metcalf1
    Sean_Metcalf1
  • M
    MrP
M
  • MrP
  • 3 replies
  • March 28, 2024

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

Sean_Metcalf1

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.

Stevie_Ortell

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.

Sean_Metcalf1

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.

Stevie_Ortell

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.

Ben84
  • Ben84
  • 4 replies
  • November 5, 2024

We need this feature. I’ve been working on Final products using Figma prototypes as well which are embedded in landing pages and a lot of times being able to copy texts is a great thing to have. at least have the ability to use an interaction with a copy function.

Reply


Terms & ConditionsCookie settings

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