Skip to main content
Robin_Fritig
Robin_Fritig
March 18, 2021

Export the code of the animated interactions in the prototypes

  • March 18, 2021
  • 10 replies
  • 5262 views

Hi everybody,

I have a suggestion for a ‘developer oriented feature’ to add in FIGMA.
As for now it doesn’t exists, there is something we would appreciate I think :
Having an option to export the animated interactions settings (with all the ease settings and so on…) we made in the “prototype” section of Figma…
I mean through SVG + CSS with @keyframes, JQUERY or anything else !

It’s too bad to have to recreate in HTML, JS etc… all the stuff out of Figma.
We would love using this feature to be more efficient and getting a better productivity in our pipeline of production!

In one word : “Once we have validated our Figma animated designs, we want to be able to export the code applied for this animate part of the prototype”

Thank you very much,
Best Regards,
Robin

    10 replies

    ShawnZeng
    ShawnZeng
    September 23, 2021

    Same requirement here. Just vote you up!

    Christian_Brandt
    Christian_Brandt
    January 10, 2022

    That would be very nice!

    // Christian

    Louis_Cancedda
    Louis_Cancedda
    March 26, 2022

    That would be so nice…

    GABRIELE_MOTTER
    GABRIELE_MOTTER
    April 19, 2022

    Yes please!

    lepdev
    lepdev
    April 19, 2022

    Do you have a simple example animation ?

    Peter_Arthur
    Peter_Arthur
    April 13, 2023

    Great feature request!
    Here is an example animation that looks simple, but would be VERY difficult to code blindly. Widths and heights are changing, but the button is anchored on the center point, so position values would also need to animate, as well as the shadow.
    figma-animation-example

    Kenneth_Kawamoto2
    Kenneth_Kawamoto2
    April 13, 2023

    Widths and heights are changing, but the button is anchored on the center point, so position values would also need to animate

    You’d use CSS Transforms, which by default the origin is the centre 😀

    Devonna_Howell
    June 6, 2023

    I spent so longgggg looking for something, a tool, a plugin, something… & then finally, I stumble upon this. What a relief that I can now get some sleep knowing there is no solution, still, years later but also disappointing since its been a week of using Fig for the first time & mainly for this feature in which is useless besides Visualization. Why would I want to create something I can only look at. This platform is only for data visualization I guess.

      megaroeny
      megaroeny
      Active Member
      August 1, 2023

      I’ve been wondering about this for a long time, and in the new Dev mode, it shows this. But how does that translate to code? I’d love to have this be JS or CSS animation properties.

      image

      Rohan_Singhvi
      Rohan_Singhvi
      August 8, 2023

      Recently launched Dualite to do exactly that. Do check it out, and let me know your feedback!

      Regards,
      Rohan

      Terms & ConditionsAccessibility statement