Skip to main content
Robin_Fritig
Robin_Fritig
Mar 18, 2021 10:24 AM UTC

Export the code of the animated interactions in the prototypes

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
    Sep 23, 2021 4:17 AM UTC

    Same requirement here. Just vote you up!

    Christian_Brandt
    Christian_Brandt
    Jan 10, 2022 8:10 AM UTC

    That would be very nice!

    // Christian

    Louis_Cancedda
    Louis_Cancedda
    Mar 26, 2022 10:26 PM UTC

    That would be so nice…

    GABRIELE_MOTTER
    GABRIELE_MOTTER
    Apr 19, 2022 10:10 AM UTC

    Yes please!

    lepdev
    lepdev
    Apr 19, 2022 12:06 PM UTC

    Do you have a simple example animation ?

    Peter_Arthur
    Peter_Arthur
    Apr 13, 2023 3:33 PM UTC

    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
    Apr 13, 2023 4:09 PM UTC

    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
    Jun 6, 2023 6:43 PM UTC

    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
      Aug 1, 2023 8:46 PM UTC

      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
      Aug 8, 2023 12:43 PM UTC

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

      Regards,
      Rohan

      Terms & ConditionsAccessibility statement