Skip to main content
Sean_Metcalf1
Sean_Metcalf1
New Member
February 23, 2024

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

  • February 23, 2024
  • 10 replies
  • 4950 views

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

    Figmate
    Junko3
    Figmate
    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,

    Iuliia_Muzaleva
    March 13, 2024

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

      Shaul_Vainblat
      Shaul_Vainblat
      March 18, 2024

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

      example video attached

      fernandolins_cs
      fernandolins_cs
      March 18, 2024

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

        MrP
        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
        Sean_Metcalf1Author
        New Member
        March 28, 2024

        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
        Stevie_Ortell
        May 6, 2024

        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
        Sean_Metcalf1Author
        New Member
        May 6, 2024

        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
        Stevie_Ortell
        May 9, 2024

        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
        New Member
        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.

        Terms & ConditionsAccessibility statement